Skip to content

Instantly share code, notes, and snippets.

@emartini
Last active September 1, 2021 09:02
Show Gist options
  • Save emartini/8f12a56856e3ea342134 to your computer and use it in GitHub Desktop.
Save emartini/8f12a56856e3ea342134 to your computer and use it in GitHub Desktop.
Gulp workflow to optimize images
var os = require("os");
var gulp = require("gulp");
var rename = require("gulp-rename");
var parallel = require("concurrent-transform");
var changed = require("gulp-changed");
var imagemin = require("gulp-imagemin");
var pngquant = require("imagemin-pngquant");
var imageResize = require("gulp-image-resize");
var resizeAndMinImagesTask = function (options) {
options["imagemin"] = {
progressive: true,
interlaced: true,
svgoPlugins: [{
removeViewBox: false //https://github.com/svg/svgo/issues/377
}],
use: [
pngquant()
]
};
var cpus = os.cpus().length;
return function () {
return gulp.src("src/images/**/*.{jpg,jpeg,gif,png,svg}")
.pipe(rename(function (path) {
path.basename += "-" + options.width;
}))
.pipe(changed("dist/images"))
.pipe(parallel(imageResize({width: options.width}), cpus))
.pipe(imagemin(options["imagemin"]))
.pipe(gulp.dest("dist/images"));
}
};
gulp.task("images-1x", resizeAndMinImagesTask({width: 800}));
gulp.task("images-2x", resizeAndMinImagesTask({width: 1600}));
gulp.task("images", ["images-1x", "images-2x"]);
gulp.task("watch", function () {
gulp.watch("src/images/**/*.{jpg,jpeg,gif,png,svg}", [
"images",
]);
});
{
"name": "image-optimization-workflow",
"version": "0.0.1",
"description": "",
"main": "gulpfile.js",
"devDependencies": {
"concurrent-transform": "^1.0.0",
"gulp": "^3.9.1",
"gulp-changed": "^1.3.0",
"gulp-image-resize": "^0.7.1",
"gulp-imagemin": "^2.4.0",
"gulp-rename": "^1.2.2",
"imagemin-pngquant": "^4.2.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Esteban Martini",
"license": "ISC"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment