Not getting output from gulp-responsive

[caraya]

Moving from Grunt to Gulp and trying to undestand what's going on.

Task I'm running

gulp.task('images', function () {
  return gulp.src('[app/images/**/*.{jpg,png}]')
    .pipe($.responsive({
      // Resize all JPG images to three different sizes: 200, 500, and 630 pixels
      '*.jpg': [{
        width: 200,
        rename: { suffix: '-200px' }
      }, {
        width: 500,
        rename: { suffix: '-500px' }
      }, {
        width: 630,
        rename: { suffix: '-630px' }
      }, {
        // Compress, strip metadata, and rename original image
        rename: { suffix: '-original' }
      }],
      // Resize all PNG images to be retina ready
      '*.png': [{
        width: 250
      }, {
        width: 250 * 2,
        rename: { suffix: '@2x' }
      }]
    }, {
      // Global configuration for all images
      // Strip all metadata
      withMetadata: false
    }))
    .pipe(imagemin({
      progressive: true,
      svgoPlugins: [{removeViewBox: false}],
      use: [ mozjpeg() ]
    }))
    .pipe(webp({quality: 50})())
    .pipe(gulp.dest('dist/images'))
    .pipe($.size({
      pretty: true,
      title: 'processImages'
    }));
});

With the command above I get the following error

16:51:50] carlos@Rivendell athena-shell 1945$ gulp images [16:53:51] Using gulpfile ~/code/athena-shell/gulpfile.js [16:53:51] Starting 'images'... [16:53:51] 'images' errored after 119 ms [16:53:51] Error in plugin 'gulp-responsive' Message: Available images do not match the following config:

• *.jpg
• *.jpg
• *.jpg
• *.jpg
• *.png
• *.png

If I comment out the pipe commands after responsive the command start but fails silently and exits.

output of gulp images command [16:39:19] carlos@Rivendell images 1938$ gulp images [16:41:44] Working directory changed to ~/code/athena-shell [16:41:46] Using gulpfile ~/code/athena-shell/gulpfile.js [16:41:46] Starting 'images'... [16:41:47] carlos@Rivendell images 1939$

gulp --version CLI version 3.9.0 Local version 3.9.1

node --version v5.6.0

version of Vips [16:41:47] carlos@Rivendell images 1939$ vips --version vips-8.2.2-Tue Jan 26 13:54:33 PST 2016

Installed via Homebrew on a Mac

What am I doing wrong? how do I fix this?

[mahnunchik]

Hi @caraya

You have mistake not related to the gulp-responsive. You've wrong gulp src sources so no any files was matched.

return gulp.src('[app/images/**/*.{jpg,png}]')

It should be:

return gulp.src('app/images/**/*.{jpg,png}')

or

return gulp.src(['app/images/**/*.{jpg,png}'])

Also you don't need to use imagemin and webp with gulp-responsive because sharp already do optimisations.

[caraya]

I've taken the advanced example and fixed gulp.src. The file now looks like this:

gulp.task('processImages', function () {
  return gulp.src(['app/images/**/*.{jpg,png}'])
    .pipe($.responsive({
      '*.png': [{
        width: 300,
        rename: {
          suffix: '-300px',
          extname: '.jpg'
        },
        format: 'jpeg'
      }, {
        width: 600,
        rename: {
          suffix: '-600px',
          extname: '.jpg'
        }
      }, {
        width: 1900,
        rename: {
          suffix: '-1900px',
          extname: '.jpg'
        },
        withoutEnlargement: true
      }, {
        // Convert images to the webp format
        width: 630,
        rename: {
          suffix: '-630px',
          extname: '.webp'
        }
      }]
    }, {
      // Global configuration for all images
      quality: 80,
      progressive: false,
      withMetadata: true,
      errorOnEnlargement: false
    }))
    .pipe(gulp.dest('dist'));
});

I get the following output in my terminal. The task does not execute

carlos@Rivendell athena-shell 1987$ gulp processImages --verbose
Using gulpfile ~/code/athena-shell/gulpfile.js
Starting 'processImages'...
carlos@Rivendell athena-shell 1987$

[mahnunchik]

@caraya please see https://github.com/mahnunchik/gulp-responsive/issues/28#issuecomment-184250982

[caraya]

this was related to #20 and not having installed vips with the correct dependencies.

For any Mac users having issues with not getting output, try reinstalling vips with this command:

brew install homebrew/science/vips --with-imagemagick --with-webp

installing sharp from npm as it's suggested at the top of Sharp's README file has no impact on this issue.

After reinstalling vips I reinstalled gulp-responsive and now it works.