Replace image resize tasks with gulp-responsive

gulp/tasks/images.js

@@ -1,35 +1,22 @@
'use strict';
var changed     = require('gulp-changed');
var filter      = require('gulp-filter');
var glob        = require('glob');
var gulp        = require('gulp');
var gulpif      = require('gulp-if');
var imagemin    = require('gulp-imagemin');
var imageResize = require('gulp-image-resize');
// var imagemin    = require('gulp-imagemin');
// var imageResize = require('gulp-image-resize');
var merge2      = require('merge2');
var newer       = require('gulp-newer');
var notify      = require('gulp-notify');
var rename      = require('gulp-rename');
var responsive  = require('gulp-responsive');
var size        = require('gulp-size');
var util        = require('gulp-util');

// include paths file
var paths       = require('../paths');

// lazyload image resize values
var lazyloadImages = [
  { width: 20, suffix: '-lq', upscale: false },
  { percentage: 100, suffix: '', upscale: false }
]

// responsive image resize values
var responsiveImages = [
  { width: 20, suffix: '-lq', upscale: false },
  { width: 320, suffix: '-320', upscale: false },
  { width: 768, suffix: '-768', upscale: false },
  { width: 1024, suffix: '-1024', upscale: false },
  { width: 1920, suffix: '', upscale: false }
]

// 'gulp images:optimize' -- optimize images
gulp.task('images:optimize', () =>
  gulp.src([paths.imageFilesGlob, '!src/assets/images/{feature,feature/**,lazyload,lazyload/**}']) // do not process feature images
@@ -46,44 +33,55 @@ gulp.task('images:optimize', () =>

// 'gulp images:lazyload' -- resize and optimize lazyload images
gulp.task('images:lazyload', function() {
  var lazyloads = lazyloadImages.map(function(el) {
    // resizing images
    return gulp.src([paths.imageFiles + '/lazyload' + paths.imagePattern, '!' + paths.imageFiles + '/lazyload/**/*.svg'])
      .pipe(rename(function(file) {
        if(file.extname) {
          file.basename += el.suffix
        }
      }))
      .pipe(newer(paths.imageFilesSite))
      .pipe(imageResize(el))
      .pipe(imagemin([
        imagemin.jpegtran({progressive: true}),
        imagemin.optipng()
      ], {verbose: true}))
      .pipe(gulp.dest(paths.imageFilesSite))
  });

  return merge2(lazyloads);
  // resizing images
  return gulp.src([paths.imageFiles + '/lazyload' + paths.imagePattern, '!' + paths.imageFiles + '/lazyload/**/*.{gif,svg}'])
    .pipe(changed(paths.imageFilesSite))
    .pipe(responsive({
      // resize all images
      '*.*': [{
        width: 20,
        rename: { suffix: '-lq' },
      }, {
        // copy original image
        width: '100%',
        rename: { suffix: '' },
      }]
    }, {
      // global configuration for all images
      errorOnEnlargement: false,
      withMetadata: false,
      errorOnUnusedConfig: false
    }))
    .pipe(gulp.dest(paths.imageFilesSite))
});

// 'gulp images:feature' -- resize and optimize feature images
// 'gulp images:feature' -- resize images
gulp.task('images:feature', function() {
  var features = responsiveImages.map(function(el) {
    // resizing images
    return gulp.src([paths.imageFiles + '/feature' + paths.imagePattern, '!' + paths.imageFiles + '/feature/**/*.svg'])
      .pipe(rename(function(file) {
        if(file.extname) {
          file.basename += el.suffix
        }
      }))
      .pipe(newer(paths.imageFilesSite))
      .pipe(imageResize(el))
      .pipe(imagemin([
        imagemin.jpegtran({progressive: true}),
        imagemin.optipng()
      ], {verbose: true}))
      .pipe(gulp.dest(paths.imageFilesSite))
  });

  return merge2(features);
  return gulp.src([paths.imageFiles + '/feature' + paths.imagePattern, '!' + paths.imageFiles + '/feature/**/*.{gif,svg}'])
    .pipe(changed(paths.imageFilesSite))
    .pipe(responsive({
      // resize all images
      '*.*': [{
        width: 20,
        rename: { suffix: '-lq' },
      }, {
        width: 320,
        rename: { suffix: '-320' },
      }, {
        width: 768,
        rename: { suffix: '-768' },
      }, {
        width: 1024,
        rename: { suffix: '-1024' },
      }, {
        width: 1920,
        rename: { suffix: '' },
      }]
    }, {
      // global configuration for all images
      errorOnEnlargement: false,
      withMetadata: false,
      errorOnUnusedConfig: false
    }))
    .pipe(gulp.dest(paths.imageFilesSite))
});

package.json

@@ -23,6 +23,7 @@
    "del": "^2.2.0",
    "glob": "^7.0.6",
    "gulp": "git://github.com/gulpjs/gulp.git#4.0",
    "gulp-changed": "^2.0.0",
    "gulp-cheerio": "^0.6.2",
    "gulp-concat": "^2.6.0",
    "gulp-cssnano": "^2.1.0",
@@ -38,6 +39,7 @@
    "gulp-postcss": "^6.0.0",
    "gulp-pretty-data": "^0.1.1",
    "gulp-rename": "^1.2.2",
    "gulp-responsive": "^2.7.0",
    "gulp-rev": "^7.0.0",
    "gulp-rsync": "^0.0.6",
    "gulp-sass": "^2.1.1",