Kevin 29b9a0c50c clean && clean html base | 4 years ago | |
---|---|---|
.. | ||
node_modules | 4 years ago | |
screenshot | 4 years ago | |
test | 4 years ago | |
.editorconfig | 4 years ago | |
.travis.yml | 4 years ago | |
index.js | 4 years ago | |
license | 4 years ago | |
optimize.js | 4 years ago | |
package.json | 4 years ago | |
readme.md | 4 years ago |
Optimize PNG, JPEG, GIF, SVG images with gulp task.
$ npm install --save-dev gulp-image
brew install libjpeg libpng
on macOSapt-get install -y libjpeg libpng
on Ubuntunpm install -g windows-build-tools
on WindowsThis is an example of gulpfile.js
.
const gulp = require('gulp');
const image = require('gulp-image');
gulp.task('image', function () {
gulp.src('./fixtures/*')
.pipe(image())
.pipe(gulp.dest('./dest'));
});
gulp.task('default', ['image']);
You can pass an object to image()
as argument such as following:
gulp.task('image', () => {
gulp.src('./fixtures/*')
.pipe(image({
pngquant: true,
optipng: false,
zopflipng: true,
jpegRecompress: false,
mozjpeg: true,
gifsicle: true,
svgo: true,
concurrent: 10,
quiet: true // defaults to false
}))
.pipe(gulp.dest('./dest'));
});
Set false
for optimizers which you don't want to apply. And you can set concurrent
option to limit the max concurrency in execution. You can also set quiet
to avoid logging out results for every image processed.
You can configure parameters applied to each optimizers such as following:
gulp.task('image', () => {
gulp.src('./fixtures/*')
.pipe(image({
optipng: ['-i 1', '-strip all', '-fix', '-o7', '-force'],
pngquant: ['--speed=1', '--force', 256],
zopflipng: ['-y', '--lossy_8bit', '--lossy_transparent'],
jpegRecompress: ['--strip', '--quality', 'medium', '--min', 40, '--max', 80],
mozjpeg: ['-optimize', '-progressive'],
gifsicle: ['--optimize'],
svgo: ['--enable', 'cleanupIDs', '--disable', 'convertColors']
}))
.pipe(gulp.dest('./dest'));
});