How to Reduce file sizes with Gulpjs

How to minify file sizes with gulpjs


Learn how to automatically minify your files with gulpjs?.

Prerequisites

  • Make sure you have NODEJS

  • Make sure NPM is installed in your computer


To start β€” what is gulp?

Gulp is a JavaScript task runner that lets you automate tasks such as…

  • Bundling and minifying libraries and stylesheets.
  • Refreshing your browser when you save a file.
  • Quickly running unit tests.
  • Running code analysis.
  • And much more!

An alternative to Gulp is Grunt


We can create tasks that we would like to fulfill. In these tasks we load files that we want gulp to work on (modifying or not), then we return them to some return folder.


Setting up Gulp is simple compared to Grunt.


In this little tutorial, I will teach you how to create a task to minify all CSS files in your folder. Then put the minified ones in another folder.


Let’s start πŸš€

Our project structure πŸ‘‡

β”œβ”€β”€ css/
β”œβ”€β”€ node_modules/
β”œβ”€β”€ images/
β”œβ”€β”€ js/
β”œβ”€β”€ gulpfile.js
β”œβ”€β”€ index.html
└── package.json

First thing is to install gulp-cli globally by running:

$

bash

npm install gulp-cli -g

Next step is to initialize our project with npm by running:

$

bash

npm init -y

I'm using the -y flag to skip all the prompts

We will create a gulpfile.js by running:

$

bash

npx -p touch nodetouch gulpfile.js

There are tons of open source plugins for almost every task in the official gulpjs website however, we are going to consider some plugins for

  • Minifying images
  • Uglify our CSS files
  • Uglify our JS files
  • and much more...

First lets work on Images.


I am going to use an uncompressed version of my profile photo for this demo which is about 1.4mb so that we can know how useful it is to compress our images without loosing its quality and details.


The first step is to install the plugins we wish to use.

$

bash

npm i -D gulp-imagemin

In Gulpfile.js

Add the following code to the gulpfile.js file we created earlier.

js

gulpfile.js

const { src, dest } = require("gulp");
const imagemin = require("gulp-imagemin");
function minifyImages() {
return src(["./images/**/*"]).pipe(imagemin()).pipe(dest("dist/images"));
}
exports.minifyImages = minifyImages;

First of all we require our plugins then we create a function and call it minifyImages. This function return a gulp task that maps through everything in our /images directory, then we call our imagemin() function that we got from the plugin we imported. next we specify our output directory in the dest(). Finally we export our function.

You might be wondering β€” you’re already able to minify your files? Yes, by executing the gulp command in the terminal followed by the task name.


We can view all available tasks we have written by executing the following command:

$

bash

gulp --tasks

gulp tasks


The only defined task in our gulpfile is the minifyImages task so if we execute

$

bash

gulp minifyImages

It is going to create a new folder called /dist/images and put all our files as we specified in the dest.

If you compare the size of our original image to the minified version you will see a big difference because our minified image is 490kb while our original image is 1.40mb. Thats awesome right?.

Minify CSS files

The next thing we are going to checkout is how to minify CSS files?.

The steps are pretty much the same.

We will start off by installing gulp-clean-css plugin

$

bash

npm i -D gulp-clean-css

Next we will require our plugin and add a function that will minify our CSS files.

js

gulpfile.js

const { src, dest } = require("gulp");
const imagemin = require("gulp-imagemin");
const cleancss = require("gulp-clean-css");
function minifyImages() {
return src(["./images/**/*"]).pipe(imagemin()).pipe(dest("dist/images"));
}
function minifyCss() {
return src(["css/**/*.css"]).pipe(cleancss()).pipe(dest("dist/css"));
}
exports.minifyCss = minifyCss;
exports.minifyImages = minifyImages;

Then we can minify our css files by running:

$

bash

gulp minifyCss

To minify your javascript files your code should look like:

js

gulpfile.js

const { src, dest } = require("gulp");
const imagemin = require("gulp-imagemin");
const cleancss = require("gulp-clean-css");
const javascript = require("gulp-uglify");
function minifyImages() {
return src(["./images/**/*"]).pipe(imagemin()).pipe(dest("dist/images"));
}
function minifyCss() {
return src(["css/**/*.css"]).pipe(cleancss()).pipe(dest("dist/css"));
}
function minifyJS() {
return src(["js/**/*.js"]).pipe(javascript()).pipe(dest("dist/js"));
}
exports.minifyCss = minifyCss;
exports.minifyImages = minifyImages;
exports.minifyJS = minifyJS;

Gulp provides us with a method called series() & parallel()

series()

  • Combines task functions and/or composed operations into larger operations that will be executed one after another, in sequential order. There are no imposed limits on the nesting depth of composed operations using series() and parallel().

Lets enhance our DX by applying the series method.


Your code should look like:

js

gulpfile.js

const { src, dest, task, series } = require("gulp");
const imagemin = require("gulp-imagemin");
const cleancss = require("gulp-clean-css");
const javascript = require("gulp-uglify");
function minifyImages() {
return src(["./images/**/*"]).pipe(imagemin()).pipe(dest("dist/images"));
}
function minifyCss() {
return src(["css/**/*.css"]).pipe(cleancss()).pipe(dest("dist/css"));
}
function minifyJS() {
return src(["js/**/*.js"]).pipe(javascript()).pipe(dest("dist/js"));
}
exports.minifyCss = minifyCss;
exports.minifyImages = minifyImages;
exports.minifyJS = minifyJS;
task("start", series(minifyCss, minifyImages, minifyJS));

Now you can execute all your gulp tasks with one command

$

bash

gulp start

Conclusion

This is just a small way that gulp can help us in the development of our applications.


You can find the code for this project in this repository on GitHub.


Thank you for reading, please feel free to ? and help others find it.

See you soon. ?