Image minification gulp task
npm install @hugsmidjan/gulp-images```
npm install --save-dev @hugsmidjan/gulp-images
`js`
const [imagesCompress, imagesWatch] = require('@hugsmidjan/gulp-images')(
opts
);
`js
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;
`
PNG and JPEG images can be forced through a lossy compression via a ---q{N}dist
file-name suffix. The suffix is stripped from the filename before saving in
the folder.
In SVG files all ID attributes are stripped away unless a svg_keepIds: true---ids
option is passed, or if an individual SVG file has a file-name
suffix - which then gets stripped away before saving.
Examples:
- src/i/photo---q60.jpg (100% quality original) ---> dist/i/photo.pngsrc/i/image---q50.png
(recompressed to approx. 60% quality)
- (24bit file) ---> dist/i/image.png (png8 with atsrc/i/image---q50-70.png
least 50% quality)
- (24bit file) ---> dist/i/image.png (png8 withsrc/i/image---q50--d0.png
between 50% and 70% quality)
- (24bit file) ---> dist/i/image.png (png8 withsrc/i/image---ids.svg
at least 50% quality - no dithering)
- (keep ID attributes) ---> dist/i/image.svg` (with
ID attributes intact)