Gulp

Gulp is a development automation tool. It's the successor to Grunt.

We configure gulp using a gulpfile. Our gulpfile contains a set of tasks that we would like to automate. Each task is a stream of activities, for example a js task might:

Validate your code using JSHint.
Concatenate your javascript.
Save it as app.js.
Reload your web browser so you can see the changes.
Minify.
Save the minified code as app.min.js.

Gulp streams

Gulp has a concept of streams. A stream is a set of files that can be transformed.

We create a stream using gulp.src, then pipe it through different functions which can transform the stream in a variety of ways. We can optionally pipe our stream back out onto the filesystem at any point using gulp.dest.

We use gulp for:

Validation
Compilation
Concatenation
Reformatting
Renaming
Wrapping content

Gulp modules

We extend the capabilities of Gulp using modules, which are installed using npm. Here are some useful ones:

jshint - JavaScript validation
tshint - TypeScript Static Code Analysis
sass - CSS precompilation
uglify - JavaScript minification
concat - Script concatenation
autoprefixer - Automatically add vendor prefixes to CSS
header - Adds a header to the file
size - Outputs the size of a minified file

Validating code

A common requirement is to validate our JavaScript. We can do this with a simple Gulp task:

var gulp = require('gulp'),
            jshint = require('gulp-jshint');
          
          gulp.task('assets:js', function () {
            return gulp.src(components.js)
              .pipe(jshint())
              .pipe(jshint.reporter('default'))
          }

We execute this task with:

gulp assets:js

Exercise - TSLint

We are going to install TSLint for static code analysis of our typescript files.

First Install Gulp and the gulp-cli using npm. Note that currently gulp has to be installed locally in your project, so we omit the -g flag.

npm install gulp --save-dev
          npm install gulp-cli -g

Test your installation:

gulp --version

Now we're going to set up gulp to validate our TypeScript. In our project root, install the dependencies using npm:

npm install --save-dev gulp-tslint
          npm install --save-dev tslint
          npm install --save-dev typescript

Now create a gulpfile containing something like the following:

var gulp = require('gulp'),
            tslint = require('gulp-tslint');
          
          gulp.task('tslint', function () {
            return gulp.src('app/**/*.ts')
              .pipe(tslint())
              .pipe(tslint.report("verbose"))
          });

tslint.json

You will also need a tslint.json file to tell the linter how to behave, something like the following:

{
              "rules": {
                  "class-name": true,
                  "curly": true,
                  "eofline": false,
                  "forin": true,
                  "indent": [true, 4],
                  "label-position": true,
                  "label-undefined": true,
                  "max-line-length": [true, 140],
                  "no-arg": true,
                  "no-bitwise": true,
                  "no-console": [true,
                    "debug",
                    "info",
                    "time",
                    "timeEnd",
                    "trace"
                  ],
                  "no-construct": true,
                  "no-debugger": true,
                  "no-duplicate-key": true,
                  "no-duplicate-variable": true,
                  "no-empty": true,
                  "no-eval": true,
                  "no-string-literal": false,
                  "no-trailing-whitespace": true,
                  "no-unused-variable": false,
                  "no-unreachable": true,
                  "no-use-before-declare": true,
                  "one-line": [true,
                    "check-open-brace",
                    "check-catch",
                    "check-else",
                    "check-whitespace"
                  ],
                  "quotemark": [true, "single"],
                  "radix": true,
                  "semicolon": true,
                  "triple-equals": [true, "allow-null-check"],
                  "variable-name": false,
                  "whitespace": [true,
                    "check-branch",
                    "check-decl",
                    "check-operator",
                    "check-separator"
                  ]
              }
          }

Now run gulp tslint to execute the task:

gulp tslint

Any errors? You may need to introduce an error to see the effect.

Automatic execution

We can tell gulp to watch our filesystem for changes, and execute a task whenever a file is modified.

gulp.task('watch', function() {
            gulp.watch('app/**/*.ts', ['lint']);

Now we might create a default gulp task:

gulp.task('default', [
            'watch'
          ]);

We can now set our gulp task running simply by typing gulp at a command line.

gulp

Exercise - Automatic Watching

Set up Gulp to automatically watch all your TypeScript files and execute the linter