@hugsmidjan/gulp-images NPM

@hugsmidjan/gulp-images

npm install --save-dev @hugsmidjan/gulp-images

Usage

const [imagesCompress, imagesWatch] = require('@hugsmidjan/gulp-images')(
  opts
);

API / Advanced usage

const imagesTaskFactory = require('@hugsmidjan/gulp-images');

const options = {
  // These are the defaults:
  name: 'images', // the display name of the generated tasks
  src: 'src/',
  dist: 'pub/',
  glob: ['i/**/*', '!i/_raw/**'], // which files to glob up as entry points
  // svg_keepIds: false, // Treat all SVG `id=`s as significant content
  // svgoRules: {}, // SVGO settings (https://github.com/svg/svgo#what-it-can-do)
};

// Create the gulp tasks based on the above options.
const imagesTasks = imagesTaskFactory(options);

// imagesTasks is a two item array...
const [imagesCompress, imagesWatch] = imagesTasks;
// ...but it also exposes the tasks as named properties.
const { compress, watch } = imagesTasks;

Magic file-name compression hints

PNG and JPEG images can be forced through a lossy compression via a ---q{N} file-name suffix. The suffix is stripped from the filename before saving in the dist folder.

In SVG files all ID attributes are stripped away unless a svg_keepIds: true option is passed, or if an individual SVG file has a ---ids file-name suffix - which then gets stripped away before saving.

Examples:

src/i/photo---q60.jpg (100% quality original) ---> dist/i/photo.png (recompressed to approx. 60% quality)
src/i/image---q50.png (24bit file) ---> dist/i/image.png (png8 with at least 50% quality)
src/i/image---q50-70.png (24bit file) ---> dist/i/image.png (png8 with between 50% and 70% quality)
src/i/image---q50--d0.png (24bit file) ---> dist/i/image.png (png8 with at least 50% quality - no dithering)
src/i/image---ids.svg (keep ID attributes) ---> dist/i/image.svg (with ID attributes intact)