Getting Started With Gulp Build System -Tutorial Savvy

Gulp is new build system is capable of automate minification, file copy, watching file changes and rerun tasks.
In this demo, “We will learn to getting started with Gulp system”.
To install Gulp we need to have NPM installed in the machine.Considering NPM is installed in the machine Let’s continue with the example.
We have created a directory named HelloWorldApp for this demo.Let’s initialize package.json file using npm init command.The following screenshot shows the terminal with initialization of package.json file.

Gulp can be installed as local development dependencies using npm install gulp –save-dev command.The following screenshot shows the terminal with the installation of Gulp build system.

After successful installation of Gulp, the next task is to create gulpfile.js file.The gulpfile.js file contains the code to define the Gulp task.We can call the gulp using require() function and create a task using task() method.Let’s create a task named sayHello which is a sample task and prints a text message in console.We can make this task as default task using default key word.The code content of gulpfile.js are as follows:-

var gulp = require('gulp');
gulp.task('sayHello', function() {
    console.log("Hello Developers!!!");
});
gulp.task('default',['sayHello']);

Now we can run the default Gulp task using Gulp command.The following screenshot shows the terminal with gulp task in execution.

We can also execute the sayHello task using gulp sayHello command.The following screenshot shows the terminal with gulp task in execution.

We can also call gulp though NPM by adding an entry to package.json using script property.The code content of the package.json file are as follows:-

{
  "name": "HelloWorldApp",
  "version": "0.0.1",
  "description": "Getting Started With Gulp",
  "scripts": {
    "startGulp":"gulp"
  },
  "author": "Sandeep",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.0"
  }
}

Now we can execute the gulp task using npm run startGulp command.The following screenshot shows the terminal with Gulp task in execution using NPM module.