gulp-responsive-task.js

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'
    }));
});