Setting up an SPA web app build pipeline with Gulp

  Javascript, Tutorial

Our first step - Minifying HTML

Contents

Lets start with the first and most likely file type we encounter in a web application, the index.html. What you see here is a very basic HTML5 file, probably the starting point for every html development.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Build Pipeline Demo</title>
</head>
<body>
    Hello World!
</body>
</html>

The tool responsible for shrinking (minifying) the file runs under Node.JS, like all others described in this tutorial.

We add two dependencies to package.json, which are gulp and the gulp tool gulp-minify-html. The easiest way to add such dependencies is to use the node package manager tool npm. For minifying html files, we need gulp and the gulp plugin gulp-minify. We can add these dependencies to the package.json file and download/install  them at the same time by entering following commands:

c:> npm install -g gulp --save-dev

c:> npm install gulp-minify-html --save-dev

After entering these two commands, the project folder now contains the new folder node_modules where the tools have been downloaded to. In addition, the package.json now looks like this:

{
  "name": "buildpipeline",
  "version": "1.0.0",
  "description": "",
  "main": "Gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "Gulp"
  ],
  "author": "sgoemans",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-minify-html": "^1.0.6"
  }
}

Now that NodeJs and Gulp are in place, we can start writing our first Javascript build script for Gulp. The file must be named Gulpfile.js !

var gulp = require('gulp');
var minifyHtml = require('gulp-minify-html');

gulp.task('minify', function() {
    gulp.src('index.html')
        .pipe(minifyHtml())
        .pipe(gulp.dest('dist/'));
});

Line 1 and 2 correspond to the <script> tag in a browser if we used one, but since we want to get the browser out of the way when setting up a build pipeline, we use Node’s module architecture. Main reason for this is, that we might end up using dozens of build modules which were possibly written by many different developers. Using a modularization mechanism helps us avoiding variable and function name conflicts.

Line 4 to 7 defines a task that can be started by the gulp application. In order to be able to use Gulp on the command line, we globally installed gulp on the developer workstation by using the -g command line parameter during installation. NodeJS will now find and run Gulp and gulp will take the argument we provide as the task to run.

Finally, we arrived at the point where we can shrink/minify the HTML file which was listed at the beginning of this chapter. Open a terminal in your project’s folder and enter

c:> gulp minify

The output from this command will look similar to this:

[14:29:36] Using gulpfile ~\WebstormProjects\BuildPipeline\gulpfile.js
[14:29:36] Starting 'minify'...
[14:29:36] Finished 'minify' after 5.22 ms

The resulting output file is a minified html file which still consists of valid html code:

<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>Build Pipeline Demo</title></head><body>Hello World!</body></html>

Note how we prevented index.html file from being overwritten by the minified version. In Gulpfile.js, we defined the source of the to-be-minified files by using the function gulp.src, and the destination where the minified files were to be stored by the function gulp.dest. In our case, the destination folder was ./dist. In between, Gulp streams the files from src to dest using pipes. It’s these pipes through which most of our building takes place.

LEAVE A COMMENT