batch resizing in gulp

Question

I need to make versions of images in different resolutions. However, the output of my gulp code is a mess - some files are missing, some pictures are saved under different filenames. I know it has something to do with async execution, but I'm not really familiar with node.js, so I can't figure out by myself how to fix it. Any help is appreciated, especially with explanation.

var gulp        = require('gulp');
var rename      = require('gulp-rename');
var gm = require('gulp-gm');
var originalBasename = '';

    gulp.task('resize-all', function () {
      return gulp.src(['_img/**/*.{jpg,png}', '_img/*.{jpg,png}'])
      .pipe(rename(function (path) {
        originalBasename = path.basename;
        path.basename += "-2048";
      }))
      .pipe(gm(function (gmfile) {
        return gmfile.resize(2048, 5000);
      }))
      .pipe(gulp.dest('_site/img'))
      .pipe(rename(function (path) {
        path.basename = originalBasename; // restore basename
        path.basename += "-1536";
      }))
        .pipe(gm(function (gmfile) {
          return gmfile.resize(1536, 5000);
        }))
        .pipe(gulp.dest('_site/img'))
        .pipe(rename(function (path) {
          path.basename = originalBasename; // restore basename
          path.basename += "-1080";
        }))
        .pipe(gm(function (gmfile) {
          return gmfile.resize(1080, 5000);
        }))
        .pipe(gulp.dest('_site/img'))
        .pipe(rename(function (path) {
          path.basename = originalBasename; // restore basename
          path.basename += "-750";
        }))
        .pipe(gm(function (gmfile) {
          return gmfile.resize(750, 5000);
        }))
        .pipe(gulp.dest('_site/img'))
        .pipe(rename(function (path) {
          path.basename = originalBasename; // restore basename
          path.basename += "-320";
        }))
        .pipe(gm(function (gmfile) {
          return gmfile.resize(320, 5000);
        }))
        .pipe(gulp.dest('_site/img'))
    });

Bartosz Czerwonka · Accepted Answer · 2015-11-03T01:31:45.653

6

Try use gulp-responsive to create yout task -https://github.com/dcgauld/gulp-responsive-images .

For example:

var responsive = require('gulp-responsive-images');

gulp.task('resize-all', function() {
    return gulp.src('_img/**/*')
        .pipe(responsive({
            '**/*.*': [{
                width: 2048,
                height: 5000,
                suffix: '-2048'
            }, {
                width: 1536,
                height: 5000,
                suffix: '-1536'
            }]

        }))
        .pipe(gulp.dest('_site/img'));
});

From documentation:

gulp-responsive-images requires GraphicsMagick to function. Installation is simple: Ubuntu: apt-get install graphicsmagick Mac OS X (using Homebrew): brew install graphicsmagick

Or use https://github.com/mahnunchik/gulp-responsive

var responsive = require('gulp-responsive');

gulp.task('resize-all', function() {
     return gulp.src('_img/**/*')
         .pipe(responsive({
             '**/*.*': [{
                 width: 2048,
                 height: 5000,
                 rename: {
                     suffix: '-2048'
                 }
             }, {
                 width: 1536,
                 height: 5000,
                 rename: {
                     suffix: '-1536'
                 }
             }]

         }))
         .pipe(gulp.dest('_site/img'));
 });

edited Nov 03 '15 at 01:31

answered Nov 02 '15 at 23:03

Bartosz Czerwonka

1,631
1
10
11

I tried, but gave up on installing libvips (there are errors during installation, and compilation instructions didn't work for me as well). – Mikhail Vasin Nov 02 '15 at 23:09
I managed to install libvips and installed https://github.com/mahnunchik/gulp-responsive, but couldn't run your code without errors ('glob pattern string required'). But luckily, the second link seems to be a perfect fit! Thanks! – Mikhail Vasin Nov 02 '15 at 23:53
I use both libraries, but if the second work for you it great. I edited my answer at the second library ;) Could you mark answers as helpful ? Thanks in advance! – Bartosz Czerwonka Nov 03 '15 at 00:25
Still, I couldn't run your gulp-responsive-images code without 'glob pattern string required'. As for gulp-responsive, _img/**/*.jpg glob for some reason works like _img/*.jpg. It processes only files in the upper _img folder and ignores subfolders. So it's not yet a solution for me. But thanks for your help anyway! – Mikhail Vasin Nov 03 '15 at 00:45
Everything works, I modified the code you as you need. it's all just regular expressions – Bartosz Czerwonka Nov 03 '15 at 01:26
I ran this code at home and do not have any such error - 'glob pattern string required'... are you sure it's this piece of code? – Bartosz Czerwonka Nov 03 '15 at 01:29
I added two versions for you because both libraries work the same way and you need only set a good regular expressions. – Bartosz Czerwonka Nov 03 '15 at 01:33
Bartosz, your piece of code for gulp-responsive works perfect. I just removed `height: 5000` and added `withoutEnlargement: false, progressive: true` and pretty happy with the result. I'll upvote your answer as soon as I'll be able to (I'm new here). – Mikhail Vasin Nov 03 '15 at 08:55

batch resizing in gulp

1 Answers1