What is gulp.js?

gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow. It is a task runner built on Node.js and npm, used for automation of time-consuming and repetitive tasks involved in web development like minification, concatenation, cache busting, unit testing, linting, optimization etc.

Getting Started

1) Install 'nodejs'
2) Create 'package.json'
3) Create 'gulpfile.js'
4) run 'gulp' command

Install 'nodejs'

After installing go to the project directory through 'Node.js command prompt' and check the version first

node --version
npm --version

Install the gulp command

npm install --global gulp-cli

Create a package.json

npm init

If you don't have a package.json, create one. If you need help, run an 'npm init' which will walk you through giving it a name, version, description, etc.
A sample file look like this

{
  "name": "PROJECT_NAME",
  "version": "PROJECT_VERSION",
  "description": "PROJECT_DESCRIPTION",
  "main": "",
  "dependencies": {
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-uglify": "^3.0.0",
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "AUTHOR",
  "license": "ISC"
}

Install gulp in your devDependencies

npm install --save-dev gulp

Create a gulpfile

In your project directory, create a file named gulpfile.js in your project root.
A sample file look like this

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
var paths = {
  scripts: ['client/js/**/*.js']
};

gulp.task('clean', function() {
  return del(['build']);
});
gulp.task('scripts', ['clean'], function() {
  // Minify and copy all JavaScript (except vendor scripts)
  return gulp.src(paths.scripts)
      .pipe(uglify())
      .pipe(concat('all.min.js'))
    .pipe(gulp.dest('build/js'));
});

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

Run gulp

gulp

run 'gulp' command in 'Node.js command prompt'

After run gulp command all your 'js' files minimized and compressed to a single file 'all.min.js.' A folder 'build' will create in your project directory. It has another folder 'js'. This 'js' folder contains a single js file 'all.min.js'.