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",