Laravel Mix - Simple Image Processing

A simple laravel mix plugin to copy/minify/resize images in your projects.

Installation & Usage

Installation of the npm package:

npm install --save-dev laravel-mix-simple-image-processing

Usage, in your webpack.mix.js:

let mix = require('laravel-mix')

require('laravel-mix-simple-image-processing')

mix.imgs({
    source: 'resources/images',
    destination: 'public/images',
    // ... other optional parameters
})

Executing the module (the following exemple for the "dev" environnement):

npm run dev

Note: when running npm run watch the module is only executed once at the beginning.

Options

Here is the list of available options when passing an object to the mix.imgs() method:

Option	Type	Default value	Description
disable	Boolean	`false`	Wether to disable the execution of the plugin or not, can be used to disable the execution on specific environnements.
source	String	`'resources/images'`	Path to the folder containing the images that will be used as input of the processing functions (images in sub-folders are also included).
destination	String	`'public/images'`	Path to the folder where the images will be saved (with source-like sub-folders).
thumbnailsSizes	Array[Int]	`[]`	A list of maximum-width (in pixel) thumbnail to generate. E.g. `[300, 600]` would generate 2 thumbnails for each image processed, one with a 300px width and one with a 600px width. The height of the images are calculated proportionally. The plugin will emit a warning for each value superior at the width of the source image.
thumbnailsSuffix	String	`'@'`	Suffix to be used for thumbnail names, the thumbnail names are based on the template `{img-name}{suffix}{width}.{img-extension}`, for example `image.jpg` could generate a thumbnail named `[email protected]`.
thumbnailsOnly	Boolean	`false`	Wether to copy or not the original (full-sized) pictures to the destination folder. The full-sized pictures will be optimized in the destination folder. This option is useful if you only want to generate thumbnails without copying/optimizing the full-sized pictures.
smallerThumbnailsOnly	Boolean	`false`	Whether to resize images to only sizes below their native width.
webp	Boolean	`false`	Wether to generate WebP images. An image with the WebP format will be generated for each picture processed in the destination folder (including for all thumbnails).
imageminPngquantOptions	Object	`{ quality: [0.3, 0.5] }`	Options to pass to the imageminPngquant plugin.
imageminWebpOptions	Object	`{ quality: 50 }`	Options to pass to the imageminWebp plugin.

Exemples

Basic exemple (copy/optimize images from source to destination folder):

mix.imgs({
    source: 'resources/images/photos',
    destination: 'public/images/photos',
})

Process images in all environnements EXCEPT for 'production':

mix.imgs({
    disable: process.env.NODE_ENV === 'production',
    // ...
})

Generate thumbnails without the full-sized source images:

mix.imgs({
    source: 'resources/images/photos',
    destination: 'public/images/photos/thumbnails',
    thumbnailsSizes: [300, 600], // Generate thumbnails with 300px and 600px width.
    thumbnailsOnly: true, // Do not copy the original (full-sized) images over.
})

Other

This plugin was originally inspired by the laravel-mix-image-resizer (which didn't seem to be maintained).

rockykev / laravel-mix-simple-image-processing Goto Github PK