Build responsive images with Gulp

gulpfile.js

'use strict';
var gulp = require('gulp');
var gutil = require('gulp-util');
var del = require('del');
var debug = require('gulp-debug');
var $ = require('gulp-load-plugins')();

gulp.task('clean:pages', function() {
	gutil.log('Deleting /pages/**/*', gutil.colors.magenta('123'));
	return del([
		'pages/**/*'
	]);
});
gulp.task('build:source', ['clean:pages'], function() {
	gutil.log('Build from /Source', gutil.colors.magenta('123'));
	return gulp.src(['Source/**/*'])
	.pipe(debug({title: 'Source:'}))
	.pipe(gulp.dest('pages'));
});

gulp.task('build:responsive', ['build:source'], function() {
	return gulp.src(['pages/**/*.{gif,jpg,jpeg,png}'])
	.pipe($.cached('responsive'))
	.pipe($.responsive({
		'**/*': [{
			width: 2240,
			height: 320,
			crop: 'center',
			rename: { suffix: '-thumbwide' }
		}, {
			width: 2240,
			rename: { suffix: '-2240' }
		}, {
			width: 1920,
			rename: { suffix: '-1920' }
		}, {
			width: 1600,
			rename: { suffix: '-1600' }
		}, {
			width: 1280,
			rename: { suffix: '-1280' }
		}, {
			width: 960,
			rename: { suffix: '-960' }
		}, {
			width: 640,
			rename: { suffix: '-640' }
		}, {
			width: 480,
			rename: { suffix: '-480' }
		}, {
			width: 320,
			rename: { suffix: '-320' }
		}, {
			width: 160,
			rename: { suffix: '-160' }
		}],
	}, {
		quality: 70,
		progressive: true,
		withMetadata: false,
		skipOnEnlargement: true,
		errorOnUnusedConfig: false,
		errorOnUnusedImage: false,
		errorOnEnlargement: false
	}))
	.pipe(gulp.dest('responsive'))
});
gulp.task('build:images', ['build:responsive'], function() {
	gutil.log('Copying responsive images from /responsive to /pages', gutil.colors.magenta('123'));
	return gulp.src('responsive/**/*.{gif,jpg,jpeg,png}')
	.pipe(debug({title: 'Images:'}))
	.pipe($.imagemin({
		progressive: true,
		interlaced: true
	}))
	.pipe(gulp.dest('pages'))
});
gulp.task('clean:responsive', ['build:images'], function() {
	gutil.log('Deleting /responsive/**/*', gutil.colors.magenta('123'));
	return del([
		'responsive/**/*'
	]);
});

gulp.task('clean:grav', function() {
	gutil.log('Deleting Grav /pages/**/*', gutil.colors.magenta('123'));
	return del([
		'grav/user/sites/test.grav.dev/pages/**/*'
	]);
});
gulp.task('move', ['clean:grav'], function() {
	gutil.log('Moving updates pages to Grav', gutil.colors.magenta('123'));
	return gulp.src(['pages/**/*'])
	.pipe(debug({title: 'pages:'}))
	.pipe(gulp.dest('grav/user/sites/test.grav.dev/pages'));
});
gulp.task('default', ['clean:pages', 'build:source', 'build:responsive', 'build:images', 'clean:responsive']);

package.json

{
  "name": "pages",
  "version": "1.0.0",
  "description": "Regenerate responsive images",
  "private": true,
  "author": "Ole Vik",
  "license": "MIT",
  "devDependencies": {
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-cached": "^1.1.0",
    "gulp-debug": "^2.1.2",
    "gulp-imagemin": "^2.4.0",
    "gulp-load-plugins": "^1.2.2",
    "gulp-responsive": "^2.2.0"
  }
}