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.

Comments

[Abdun Nahid]

Nice technique indeed.
I have a question though. ng build also copies your images along with other assets into dist/newProject/assets/images. Does gulp replaces those images or creates another copy?

[Maulik Thaker]

Depends on path you given at gulp.dest('...'); if folder not created by ng build then gulp will auto create the folder at specific path including converted images and if folder already present like you said then it will replace those images with current ( converted ) images.