Gulpjs: automate your web development workflow

By definition Gulpjs is a task automating tool when it comes to web development and it runs on different platforms, those task could be used for transforming source files into production files, such as but not limit to minifying and compressing source javascript files into one minified output file, which could help reducing page load time.

Before creating your first Gulp tasks, we need to make sure that you have a gulp installed on your device, to do so, first you need to install nodejs, we need the NPM package manager to make sure everything is working correctly, run the command in the terminal.

$ npm -v 

and you should get the npm version that runs on your device.

Now we are ready to install globally glup, to do so run the following command in your terminal

$ npm i -g gulp-cli

Note: if you are using Mac you might get an error while installing, so you probably need to run the command with sudo.

You can also install gulp locally for a single project, and to do so run the following command in your project directory.

$ npm i --save-dev gulp

To make sure the installation was successful, run the following command in your terminal and you should get the gulp version

$ gulp -v

If everything is working, now we are ready to create our first gulp task.

Create a A task

Before creating your gulp task, in your project directory you need to create Gulpfile.js file, and this name is important, because when you run gulp tasks, gulp will look for this specific file name.

Now inside Gulpfile.js, we need to import series() or parallel() from and to do so we need to use Nodejs require function, both functions as their names implies, will run the tasks either sequentially or in parallel.

const { series } = require('gulp');

Then we are ready to create our first task, we will simply create a function, let's call it minifyCSS, and a second function minifyJS

function minifyCSS(cb){
  //TODO: create task
  console.log("minifyCSS")
  cb();
} 

function minifyJS(cb){
  //TODO: create task
  console.log("minifyJS")
  cb();
}

Now it's time to inform gulp about the teaks, and here we have two ways of doing so, first way is public task:

exports.minifyCSS = minifyCSS

The other way is private tasks, and here we will use series():

exports.default = series(minifyCSS, minifyJS);

Some might ask what is the difference between public and private tasks, will public tasks can be executed directly by gulp command.

It's time to make sure if everything is working correctly, navigate to your project directory and using the terminal run gulp, and this will trigger the tasks exported by the default export in your gulpfile, you should be able to see the output of the console.log().

$ gulp

To try the public task, just run the following command

$ gulp minifyCSS

If you try to run minifyJS you should get an error, because it's not exported a public task

$ gulp minifyJS

MinifyJS

We will create a simple task to manage js file files, we just need to minify our source files and prepare them for our production environment, to do so we need to follow these steps:

1. read the files from the source directory
2. minify them
3. write them in the intended output directory

First, we need install the minify plugin, and it's called gulp-uglify.

npm i --save-dev gulp-uglify

after the installation is done, we are ready to complete our task, in the gulpfile.js import gulp-uglify, and also we need two more function called src and dest, src will read specified file/files type while dest will write the files into a folder.

const { series, src, dest } = require('gulp');
const uglify = require('gulp-uglify');

The following function will read all files with .js extension inside the src/js folder, minify them, then write the results in a folder called public/dist/js.

function minifyJS(){
  return src('src/js/*.css')
     .pipe(uglify())
     .pipe(dest('public/dist/js'));
}

The .pipe() method is used to chain transformation command.

MinifyCSS

We will follow the same steps we used in the previous task, we need to install clean-css plugin.

npm i --save-dev gulp-clean-css 

Then import the plugin inside our gulpfile.

const cleanCSS = require('gulp-clean-css');

Finally, we modify our css task, this task will load .css file from src/css folder, minify and write to public/dist/css directory.

function minifyCSS(){
 return src('src/css/*.css')
    .pipe(cleanCSS())
    .pipe(dest('public/dist/css'));
} 

Our final product should look like this

const { series, src, dest } = require('gulp');
const uglify = require('gulp-uglify');
const cleanCSS = require('gulp-clean-css');

function minifyCSS(){
 return src('src/css/*.css')
    .pipe(cleanCSS())
    .pipe(dest('public/dist/css'));
} 

function minifyJS(){
  return src('src/js/*.js')
    .pipe(uglify())
    .pipe(dest('public/dist/js'));
}

exports.minifyCSS = minifyCSS
exports.default = series(minifyCSS, minifyJS);

In the next article I'll be talking about integrating gulp with liveRealod server, meanwhile you can read more in gulp official docs.