A quick image compression gulp workflow using https://pngquant.org/

README.md

Gulp pngquant Workflow

A quick image compression gulp workflow using pngquant.

Instructions

1. Run npm install
2. Creatae a ./src dir and put some images in it
3. npm run build to compress, npm run start to compress and watch ./src for new files

gulpfile.js

const gulp = require("gulp");
const changed = require("gulp-changed");

const imagemin = require("gulp-imagemin");
const imageminMozjpeg = require("imagemin-mozjpeg");
const imageminPNGQuant = require("imagemin-pngquant");

const del = require("del");
const runSequence = require("run-sequence");

const SRC_DIR = "./src";
const DIST_DIR = "./dist";

gulp.task("default", function(cb) {
  runSequence("clean", "imagemin", cb);
});

gulp.task("clean", function() {
  return del([DIST_DIR]);
});

gulp.task("imagemin", function() {
  const plugins = [
    imagemin.gifsicle({ optimizationLevel: 3 }),
    imageminPNGQuant({ verbose: true }),
    imageminMozjpeg({ quality: 80 }),
    imagemin.svgo({
      floatPrecision: 3,
      plugins: [
        // {mergePaths: true},
        { cleanupIDs: false },
        { convertTransform: true },
        { removeTitle: true },
        { sortAttrs: true }
      ]
    })
  ];

  return gulp
    .src(`${SRC_DIR}/**/*`)
    .pipe(changed(DIST_DIR))
    .pipe(imagemin(plugins, { verbose: process.env.NODE_ENV === "production" }))
    .pipe(gulp.dest(DIST_DIR));
});

gulp.task("watch", ["default"], function() {
  gulp.watch("**/*", { cwd: SRC_DIR }, ["imagemin"]);
});

package.json

{
  "name": "gulp-pngquant-workflow",
  "private": true,
  "scripts": {
    "build": "cross-env NODE_ENV=production gulp",
    "start": "cross-env NODE_ENV=production gulp watch",
    "watch": "npm run start"
  },
  "devDependencies": {
    "cross-env": "^5.2.0",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-changed": "^3.2.0",
    "gulp-imagemin": "^4.1.0",
    "imagemin-mozjpeg": "^7.0.0",
    "imagemin-pngquant": "^6.0.0",
    "run-sequence": "^2.2.1"
  }
}