November: Procrastination Month

    gulp-squoosh
    TypeScript icon, indicating that this package has built-in type declarations

    0.9.0 • Public • Published

    gulp-squoosh

    Gulp plugin to compress images using Squoosh.

    github test workflow status npm version license npm downloads nodejs support coverage

    Installation

    npm i -D gulp-squoosh
    

    Usage

    const gulp = require("gulp");
    const gulpSquoosh = require("gulp-squoosh");
    
    function processImages() {
      return gulp
        .src("src/images/**")
        .pipe(gulpSquoosh())
        .pipe(gulp.dest("dist/images"));
    }

    Configuration

    For available options, see libSqooush.

    gulpSquoosh({
      preprocessOptions: {...},
      encodeOptions: {...},
    });
    
    gulpSquoosh(({ width, height, size }) => ({
      preprocessOptions: {...},
      encodeOptions: {...},
    }));
    const DEFAULT_ENCODE_OPTIONS = {
      mozjpeg: {},
      webp: {},
      avif: {},
      jxl: {},
      oxipng: {},
    };

    Example

    Full Example

    const gulp = require("gulp");
    const gulpSquoosh = require("gulp-squoosh");
    const gulpCache = require("gulp-cache");
    
    const SOURCE = "src/images/**";
    const DESTINATION = "build/images";
    
    function processImages() {
      return gulp
        .src(SOURCE)
        .pipe(
          gulpCache(
            gulpSquoosh(({ width, height, size, filePath }) => ({
              preprocessOptions: {
                resize: {
                  width: width * 0.5,
                },
              },
              encodeOptions: {
                jxl: {},
                avif: {},
                webp: {},
                // wp2: {}
                ...(path.extname(filePath) === ".png"
                  ? { oxipng: {} }
                  : { mozjpeg: {} }),
              },
            }))
          )
        )
        .pipe(gulp.dest(DESTINATION));
    }
    <picture>
      <source srcset="image.jxl" type="image/jxl" />
      <source srcset="image.avif" type="image/avif" />
      <source srcset="image.webp" type="image/webp" />
      <img src="image.webp" alt="fill out me" />
    </picture>

    Troubleshooting

    WASM memory error

    You cannot run multiple gulp-squoosh tasks in parallel (via gulp.parallel) because you will get a wasm memory error. You can just replace it with gulp.serial, it will not affect the speed:

    gulp.parallel(/* ... */ compressImages, /* ... */ compressOtherImages);
    
    // become
    
    gulp.parallel(
      /* ... */ gulp.series(compressImages, compressOtherImages) /* ... */
    );

    Useful links

    Install

    npm i gulp-squoosh

    DownloadsWeekly Downloads

    100

    Version

    0.9.0

    License

    MIT

    Unpacked Size

    12.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • chenaski