Introduction

You know the drill.

Write HTML code, save. Write CSS code, save. Write JavaScript code, save. Use minifier tools to compress your code, save.

Oh S**t! You forgot to change a variable in your code.

Lather, rinse, repeat.

This process gets old fast. What if there was a better way to automate the entire process?

Gulp to the rescue!

No, it is not a beverage.

Let's imagine for a moment that you have a button.

Upon hitting the button, a robot prepares all the raw ingredients for your famous Char Kway Teow recipe; fries them individually; removes all the greens; adds your favourite sauce; mixes everything together and serves to you piping hot on a plate.

The premise is simple.

First, we write functions that perform tasks. Then we chain the functions together and execute them in sequence.

And that, in a gist describes what Gulp is capable of. A 'bot' that helps to automate tedious and time-consuming tasks in your development workflow.

I'm going to assume that you have some rudimentary knowledge about JavaScript task runners.

Otherwise, see the Gulp quick start guide to familiarise yourself with the concept first.

Requirements

• Node.js
• npm
• Gulp

Initial Setup

1. Install Node.js. Node.js comes with npm aka Node Package Manager and is required to install our Gulp packages.
2. Install the gulp cli.

$ npm install gulp-cli -g

3. Create a directory and navigate into it.

$ mkdir my-project && cd my-project

4. Create a package.json file. Leave all the options as default for now.

$ npm init

What is the package.json file used for?

The package.json file is a manifest of the project identifiers and its packages.

When this file is present in the directory, npm will automagically install all the packages of the project when running the command $ npm install.

See the official package.json documentation for configuration options.

5. Install Gulp

$ npm install gulp -D

What do the different flags like -g and -D do?

These are flags that tells npm where to install the packages.

-g installs the package globally. Global packages can be instanced by all applications.

-D is a shortcut for --save-dev. This means that the package installs for the directory that contains package.json.

See the official npm cli documentation for different flag options.

Domo Arigato, Mr Roboto

This is what we will achieve.

1. Start a development server and launch the browser when we trigger the gulp command.
2. Reload the browser whenever we save changes to our files.
3. Compile all our Sass files and rename the extension to .css.
4. Compile and minify all our JavaScript files.
5. Inject our CSS and JS files into the HTML.
6. Move all the build files into its own folder.

Create a gulpfile.js file in the project root.

$ touch gulpfile.js

The current directory will look similar to this.

├── gulp.js
├── node_modules
├── package-lock.json
└── package.json

When we installed Gulp, npm generated a node_modules folder inside the project directory. By default npm stores all the required packages for the project inside here.

npm also generated a package-lock.json. It is used to track any modifications to the node_modules folder.

Let's start writing some code.

Open gulpfile.js and add this function.

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

function defaultTask(done) {
    console.log("It Works!");
    done();
}

exports.default = defaultTask

Run the gulp command.

$ gulp

You will see the results of the default task.

[17:11:13] Using gulpfile ~/Desktop/my-project/gulpfile.js
[17:11:13] Starting 'default'...
It Works!
[17:11:13] Finished 'default' after 2.45 ms

When we ran the command, the defaultTask function executes and printed the result in the terminal.

As each gulp task runs asynchronously, we need to return a signal to decide whether to continue on success or to terminate on failure.

This pattern is known as an error-first callback.

We do that by passing an argument named done() in the example above.

Let's expand further. Create two folders src and dist in the root folder.

$ mkdir src dist

Create three more folders in src.

$ mkdir src/img src/js src/scss

Create a basic HTML file in src/index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>A Gulp Bootstrap Sass Boilerplate</title>
</head>
<body>
    <div>
    <h1>Hello World!</h1>
    </div>
</body>
</html>

Download the Sass version of Bootstrap 4 here. Unzip the file and copy all the files in bootstrap-4.2.1/scss/ to src/scss/.

In a short while, we will write scripts that will perform different gulp tasks to the files in the src folder.

Before we do that, we need to install a couple of packages namely:

• del
  Delete files and folders
  
  
• gulp-uglify
  A JavaScript minifier plugin for gulp
  
  
• gulp-rename
  A gulp plugin for renaming files
  
  
• gulp-cache
  A gulp caching task so that we only build files that have changed
  
  
• gulp-sass
  A Sass plugin for Gulp
  
  
• gulp-sass-partials-imported
  A package to import scss partials files
  
  
• gulp-clean-css
  A gulp plugin to minify CSS files
  
  
• gulp-inject
  A gulp plugin that adds CSS and JavaScript links into your HTML code
  
  
• gulp-connect
  A gulp plugin to run a local development server
  
  
• gulp-livereload
  A gulp plugin to triggers browser refreshes whenever you save your code. Download the Chrome LiveReload extension if you are using Chrome otherwise this plugin will not work.
  
  
• gulp-open
  Launches a web browser and opens a URL

Installing Gulp Packages

We could install the packages one by one via the terminal but that’s boring and tedious.

Let’s supercharge our installation by declaring the dependencies in package.json and installing them at one go.

{
    "name": "my-project",
    "version": "1.0.0",
    "description": "",
    "main": "gulpfile.js",
    "dependencies": {
    "bootstrap-scss": "^4.2.1",
    "gulp-cache": "^1.1.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass-partials-imported": "^1.0.7",
    "del": "^3.0.0",
    "gulp-clean-css": "^4.0.0",
    "gulp-connect": "^5.7.0",
    "gulp-inject": "^5.0.2",
    "gulp-livereload": "^4.0.1",
    "gulp-open": "^3.0.1",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.1"
    },
    "devDependencies": {
    "gulp": "^4.0.0"
    },
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
}

Run the install command from the terminal and all the packages will be in node_modules folder. How cool is that?

$ npm install

We have finished the initial set up. Continue to part 2 of the tutorial where we will begin to write gulp tasks.