Idiot Note: Gulp

10 February 2019

Today we're going to talk about Gulp, a web development tool for automating tasks, similar to Grunt.

Why use it?

Just like Grunt, Gulp helps you automate small repetitive tasks, such as minification, testing, and optimization.

But what makes Gulp different from Grunt?

They're very similar with each other. Both of them use separate plugins to run the tasks. We can also define the configuration of each task in a configuration file. The only difference is probably the syntax and the way you use it.

How to use it?

In my post about Grunt, we created a simple web page that display the current time and a button that changes its color when it's clicked. In this post, we'll make the same web page and automate these tasks using Gulp:

  1. Checking Javascript files' syntax and best practices.
  2. Concat all the Javascript files into 1 file.
  3. Minified the concatted Javascript file.

Here's the project structure:

.
    ├── dist
    │   ├── index.html       # main page
    ├── src
    │   ├── main.js          # main page's script
    │   ├── button.js        # button events' script
    ├── package.json         # 
    └── gulpfile.js          # Gulp's configuration file

dist/index.html

Here's the main page. Notice that we include a file named bundle.min.js here. This file is not yet exist and is the final Javascript file that we will create using Gulp.

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <div id="time"></div>
        <button class="toggle-color">Toggle color</button>

        <script src="./bundle.min.js"></script>
    </body>
</html>

src/main.js

document.getElementById('time').innerHTML = new Date();

src/button.js

var buttons = document.getElementsByClassName('toggle-color');

for(var i=0; i<buttons.length; i++) {
    buttons[i].onclick = function() {
        this.style.background = 'red';
    };
}

gulpfile.js

This file is where we configure Gulp. Similar to Grunt, we imported the plugins that we want to use, defined the tasks, and register them. 

const { src, dest, series, watch } = require('gulp');
// 1. import plugins
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const jshint = require('gulp-jshint');

// 2. define tasks
function task_jshint() {
    return src('./src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'));
}

function task_concat() {
    return src('./src/*.js')
        .pipe(concat('bundle.js'))
        .pipe(dest('dist/'))
}

function task_uglify() {
    return src('./dist/bundle.js')
        .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
        .pipe(dest('dist/'));
}

function task_watch() {
    watch('./src/*.js', task_jshint);
}

// 3. register tasks
exports.default = series(task_jshint, task_concat, task_uglify);
exports.watch = task_watch;

Here's what each task will do:

  1. task_jshint will check the syntax of all Javascript files in the src folder. This task uses gulp-jshint plugin.
  2. task_concat will concat all Javascript files in the src folder into one file (bundle.js) and put it in the dist folder. This task uses gulp-concat plugin.
  3. task_uglify will minify the bundle.js and name it bundle.min.js. This task uses gulp-uglify plugin and gulp-rename plugin. We need gulp-rename, because gulp-uglify doesn't rename its output file. 
  4. task_watch will run Gulp's watch API and run the task_jshint task everytime there's any change in Javascript files in the src folder.

And then we registered two tasks that we can use default and watch:

  1. You can use default by typing gulp to your console. It will run task_jshint, task_concat, and task_uglify in that order.
  2. You can use watch by typing gulp watch to your console. It will run task_watch and check your Javascript files' syntax in real-time.

Don't forget to install these following packages:

  1. gulp and gulp-cli.
    npm install gulp gulp-cli --save-dev​
  2. All of the plugins that we use.
    // for checking syntax
npm install jshint jshint-stylish gulp-jshint --save-dev

// for concatting files
npm install gulp-concat --save-dev

// for minifying files
npm install gulp-uglify gulp-rename --save-dev

Now, we can try running each registered task:

  1. Try running gulp in your console to concat and minify your Javascript files. Open index.html to see your web page.
  2. Try running gulp watch in your console and try making a mistake in your Javascript files. Gulp will notify you right away.

That's it for now!

Idiot Note Javascript
· Similar posts ·