Angular Image optimization using Gulp

Hello, This is my very first Post in Dev.to and I want to share about how we can reduce image size by using gulp tool in Angular. You can take a tour of gulp [https://gulpjs.com/] in brief if not familiar.

First most you need to create angular project by using

$ ng new project-name

then,

$ cd project-name

and install npm depencencies ( $ npm install)

After that install Gulp as a dev dependencies on your project using following command.

$ npm install -D gulp

Now, create a gulpfile.js at root of your project. One more gulp dependency we need to reduce image size is called gulp-imagemin. Install this dev dependency using below command :

$ npm install -D gulp-imagemin

Now you can write following code into your gulpfile.js

const gulp = require('gulp'); // Initialize gulp 
const imagemin = require('gulp-imagemin');
 function optimizeImages(){
    return src('src/assets/images /*').pipe(imagemin()).pipe(gulp.dest('dist/newProject/assets/images'));
 }
exports.default = optimizeImages; // Call of task as default

Here, gulp is need to be initialized first and then we used here imagemin feature of gulp. After that we create a function (In case of gulp it's task) named optimizeImages() and use src() for accept entry point of our image path (In my case, I usually stored my images at src/assets/images). Now we have to store optimized image at one path right ? So for that we used here gulp.dest('path'). For Angular, we need to create a build for deployment purpose so I run my gulp task after creating dist so I gave the path like dist / newProject/assets/images. Now we need to call our task named 'optimizeImages'. Gulp provide various ways of calling your tasks (publicly and privately) among-them one I used is

exports.default = optimizeImages;

Your gulp task (optimizeImages) is called when you type $ gulp in terminal.

So, let's call our gulp task by:

$ ng build --prod && gulp

You can see the each image size stored at your (dist/newProject/assets/images) destination path and compare it with your source path. It's pretty much reduced. Isn't it nice ? There are many other gulp plugins which can individually taken care of reduce of image size and removed unused css and js that we covered later.