npm package: @ilabdev/images
Description: Gulp tasks for optimizing images
Author: Innovation Lab
Latest version: 1.0.1

# `@ilabdev/images`

> Gulp tasks for optimizing images

## Installation & set up

Install `@ilabdev/images`

```shell
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.

```js
require( '@ilabdev/images' )( gulp )
```

Add the content from `config.sample.js` to your `.gulpconfig.js` and adjust as appropriate

```js
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