While developing any JavaScript project it includes processes such as testing, minification, concatenating files, compiling templates. This is most error prone and tedious task. What if you have a build tool to automate all these repetitive tasks for you. One of such tools is Gulp.

What is Gulp ?

In one word: AUTOMATION.

Gulp is a stream build system which automates common tasks such as:

1. Compiling your pre-processed CSS.
2. Minifying JavaScript.
3. Reloading your browser.
4. Compile LESS files into CSS.
5. Refreshing your browser automatically when you save a file.
6. Optimizes all assets (CSS, JS, fonts, and images) for production

Gulp is publicly available on npm: https://www.npmjs.com/package/gulp and can also be found on Github: https://github.com/gulpjs/gulp.

Installing gulp:
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

You need to have Node.js (Node) installed onto your computer before you can install Gulp.

Install gulp globally:
$ npm install –global gulp

Install gulp in your project devDependencies:
$ npm install –save-dev gulp

Writing your first gulp task:

Step 1:
Create a gulpfile.js at the root level of your project.

Step 2:
Require gulp in your gulpfile.

var gulp = require(‘gulp’);

Step 3:
Write your task with this gulp variable.

gulp.task(‘task-name’, function() {
// Stuff here
});

task-name refers to the name of the task, which would be used whenever you want to run a task in Gulp. You can also run the same task in the command line by writing – gulp task-name

To test this, let’s create a hello task in your gulpfile that says Hello World!

gulp.task(‘hello’, function() {
console.log(‘Hello World!’);
});

Now run this task in the command line with: gulp hello
The command line will print a log that says Hello World!

So any problem as a JavaScript developer during automation? Just GULP it.