Building with Gulp

## What is Gulp?
Gulp is a build tool built on node.js. Usually you use Gulp in a JavaScript project where you want to run tests, package your files into a single file etc.

## Installing
As Gulp is running on node.js we need to install it with npm.
`npm install gulp –save-dev`

And that’s it! Now you can run Gulp on your command line.

## Plugins
You use Gulp plugins to do different tasks. The most common build steps I have in a standard JavaScript project are linting, running unit tests, concatenating and compressing. Let’s install plugins for these tasks:

For linting we use **gulp-jshint**
`npm install gulp-jshint –save-dev`

For unit test I like to use mocha so let’s install **gulp-mocha**
`npm install gulp-mocha –save-dev`

For concatenation **gulp-concat** is the most common
`npm install gulp-concat –save-dev`

And for compressing we can use gulp-uglify
`npm install gulp-uglify –save-dev`

## Creating tasks
Now that we have installed our plugins we need to actually use them. When running Gulp, Gulp searches for a file named **gulpfile.js** and executes it. Create this file in the root of your project.

In gulpfile.js we can start configuring our build tasks, and the first step is to load Gulp and our newly install plugins.

“`
var gulp = require(‘gulp’),
jshint = require(‘gulp-jshint’),
mocha = require(‘gulp-mocha’),
concat = require(‘gulp-concat’),
uglify = require(‘gulp-uglify’);
“`

That was easy enough. Now we need to create tasks that uses these plugins. I usually divide a project like this into three different tasks: lint, test and build. We start with the lint task.

“`
gulp.task(‘lint’, function () {
return gulp.src(‘src/**/*.js’)
.pipe(jshint())
.pipe(jshint.reporter(‘default’));
});
“`

What’s happening here is that we create a task called lint and what we do inside this is first reading our source code with gulp.src, pipe it to jshint and finally pipe this to the jshint reporter.

For testing it’s similar.

“`
gulp.task(‘test’, function () {
return gulp.src(‘test/*.js’)
.pipe(mocha({reporter: ‘nyan’});
});
“`

Again we use gulp.src but this time we read our tests instead of our source code and then pipe this to mocha that takes a configuration.

And finally we have the build task left that is going to use both the concat plugin and the uglify plugin.

“`
gulp.task(‘build’, function () {
return gulp.src(‘src/**/*.js’)
.pipe(concat(‘main.js’))
.pipe(uglify())
.pipe(gulp.dest(‘build’));
});
“`

Here we read our source code, pipe it to concat that concatenates all files and names the new file to main.js, we pipe the result to uglify that compresses our file and then we pipe this to gulp.dest that saves our new content to a desired location.

At the end I like to add a final default task that does all of these three tasks at the same time.
`gulp.task(‘default’, [‘lint’, ‘test’, ‘build’]);`

And that is it! Now you can run you tasks on the command line. Running gulp lintwill run your lint task, gulp test will test your project and gulp build will build your source code. And when only running gulp Gulp will execute your default task that executes all of our tasks as we have configured it to.

All at once
“`
var gulp = require(‘gulp’),
jshint = require(‘gulp-jshint’),
mocha = require(‘gulp-mocha’),
concat = require(‘gulp-concat’),
uglify = require(‘gulp-uglify’);

gulp.task(‘lint’, function () {
return gulp.src(‘src/**/*.js’)
.pipe(jshint())
.pipe(jshint.reporter(‘default’));
});

gulp.task(‘test’, function () {
return gulp.src(‘test/test.js’)
.pipe(mocha({reporter: ‘nyan’}));
});

gulp.task(‘build’, function () {
return gulp.src(‘src/**/*.js’)
.pipe(concat(‘main.js’))
.pipe(uglify())
.pipe(gulp.dest(‘build’));
});

gulp.task(‘default’, [‘lint’, ‘test’, ‘build’]);
“`

There are more to dig into with Gulp and there are a lot of plugins. If you have questions or want to know more, don’t hesitate to leave a comment!