Permalink
Browse files

Replace image resize tasks with gulp-responsive

  • Loading branch information...
mmistakes committed Apr 19, 2017
1 parent 11bfd89 commit 56bbd9bf5429a269047a41e045cc2ef0bf34e62b
Showing with 54 additions and 54 deletions.
  1. +52 −54 gulp/tasks/images.js
  2. +2 −0 package.json
@@ -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))
});
@@ -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",

0 comments on commit 56bbd9b

Please sign in to comment.