@ilabdev/images
Gulp tasks for optimizing images
Installation & set up
Install @ilabdev/images
npm install @ilabdev/images --save-dev
-- OR --
yarn add @ilabdev/images --dev
Include @ilabdev/images
in your gulpfile.js
NOTE: Make sure you pass gulp
through to the package as shown below. The package sets up gulp tasks and will need it passed through to work.
require( '@ilabdev/images' )( gulp )
Add the content from config.sample.js
to your .gulpconfig.js
and adjust as appropriate
module.exports = {
// Other configs here...
images: {
process: true,
watch: true,
logColor: 'green',
areas: [
{
paths: {
src: './src/images/**/*',
watch: './src/images/**/*',
dest: './dist/images',
},
pipes: {
// Put any pipe overrides here
src: {
allowEmpty: true,
base: './src/images',
},
dest: {},
},
},
],
pipes: {
watch: {
events: 'all',
},
sharp: {
sharpOptions: {
limitInputPixels: false,
},
compressOptions: {
avif: {
quality: 33,
effort: 6,
},
gif: {
progressive: false,
colors: 256,
effort: 7,
},
jpeg: {
quality: 75,
progressive: true,
mozjpeg: true,
},
png: {
compressionLevel: 6,
progressive: true,
quality: 100,
},
tiff: {
quality: 80,
compression: 'jpeg',
},
webp: {
quality: 75,
},
},
sizes: [],
},
svgo: {
multipass: true,
plugins: [
'sortAttrs',
{
name: 'removeViewBox',
active: false,
},
{
name: 'cleanupIDs',
params: {
minify: true,
},
},
],
},
},
},
// Other configs here...
}
Run gulp images
to run the image optimization task, gulp images:watch
to run the watch task, or add the task as a script and run that with npm
or yarn
Config
process
Type: boolean
Whether to optimize images or not
watch
Type: boolean
Whether to watch images for changes or not
loggerColor
Type: string
The logger color to use for any output text. See https://github.com/stgdp/fancy-logger#available-modifiers for colors that can be used
areas
Type: object[]
The areas to be optimized. Each area has it's own, isolated settings to allow for separate configs
areas[].paths
Type: object
Path references for the image optimizer
areas[].paths.src
Type: string[]|string
The paths to optimized. Passed through to gulp.src
, items can be globs
areas[].paths.watch
Type: string[]|string
The paths to watched. These are combined into a single array and passed through to gulp.watch
areas[].paths.dest
Type: string
The destination path of the optimized images. Passed through to gulp.dest
, items can be globs
areas[].pipes
Type: object
Options to be passed through to the pipes.
areas[].pipes.src
Type: object
Options to be passed through to the gulp.src
pipe. See https://gulpjs.com/docs/en/api/src/ for more information
areas[].pipes.dest
Type: object
Options to be passed through to the gulp.dest
pipe. See https://gulpjs.com/docs/en/api/dest/ for more information
pipes
Type: object
Options to be passed through to the pipes.
pipes.watch
Type: object
Options to be passed through to the gulp.watch
pipe. See https://gulpjs.com/docs/en/api/watch/ for more information
pipes.sharp
Type: object
Options to be passed through to the gulp-optimize-images
pipe. See https://www.npmjs.com/package/gulp-optimize-images for more information
pipes.svgo
Type: object
Options to be passed through to the gulp-svgmin
pipe. See https://www.npmjs.com/package/gulp-svgmin for more information