DEV Community

loading...
Cover image for Angular Image optimization using Gulp

Angular Image optimization using Gulp

Maulik Thaker
Passionate UI / Frontend developer
Updated on ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

then,

$ cd project-name
Enter fullscreen mode Exit fullscreen mode

and install npm depencencies ( $ npm install)

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

$ npm install -D gulp
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

So, let's call our gulp task by:

$ ng build --prod && gulp
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (2)

Collapse
abdunnahid profile image
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?

Collapse
mak0099 profile image
Maulik Thaker Author

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.