Optimizing Images with Gulp
Enhancing pictures helps us keep our locales as rapid as could be expected under the circumstances. Via robotizing the enhancement we can simply drop a picture into our project and our task runner will guarantee it is as little as conceivable without loss of quality.
We'll start with Gulp.
First step, you need to install "imagemin" plugin for Gulp
npm install gulp-imagemin --save-dev
After put this code to your gulpfile.js
var imagemin = require('gulp-imagemin');
gulp.task('optiimage', function() {
return gulp.src('dist/img/*')
.pipe(imagemin({ progressive: true }))
.pipe(gulp.dest('images'));
});
Let’s review how this works.
We are calling the task optiimage and then passing in a source location of all files in images folder.
Now, run this script:
gulp optiimage
You should see output similar to this:
Using gulpfile gulpfile.js
Starting 'optiimage'...
gulp-imagemin: Minified 1 image (saved 15.33 kB - 9.4%)
Finished 'optiimage' after 102 ms