What is Gulp ?

Gulp is a command line tool that you run at various points in your build process and chain tasks together. Gulp depends on Node.js and uses a “pipe” based streaming process. So Gulp allows you to chain tasks together in memory and won’t load into disk until you tell it to do so.

Why Gulp?

Task runners such as Gulp and Grunt are powerful when it comes to automating tasks and this thing increase our overall development time. It easily perform optimization tasks that you might not and also running it during each iteration of your build.It’s optimizing task are Image minification, JS & CSS minification, linting, compiling Sass, copying or deleting assets etc.

The Basics

You need some few basic things to start with Gulp. Most important thing is Node.js – you’ll need this to install it first for installing Gulp. Once Node.js (and it’s associated npm libraries) is installed, open terminal and run the following command:

npm install -g gulp

This command is telling node(NPM) to install Gulp globally(-g ) on your system .

Then you’ll need to install gulp to your local project. In terminal, navigate to your project’s directory and run the following:

npm install gulp --save-dev

Next step is to install some Gulp plugins(child_process,gulp-saas) to give it the functionality you want.

Read more: Know more about Node.JS

Gulpfile.js

This is the config file where you’ll define tasks for Gulp to perform. Below is basic introductory gulpfile that initializes Gulp

var gulp = require('gulp')

gulp.task('default', function(){

     // Default task

     console.log(“Hello World”);

});

Now run `gulp` through terminal produce a message “Hello World”.

Here’s an example of gulpfile:

 

var gulp = require('gulp'),

   spawn = require('child_process').spawn,

   node,JS_PATH = "server/";

/**

* $ gulp server

* description: launch the server. If there's a server already running, kill it.

*/

gulp.task('server', function() {

   if (node) node.kill()

   node = spawn('node', ['server/app.js'], {stdio: 'inherit'})

   node.on('close', function (code) {

      if (code === 8) {

          gulp.log('Error detected, waiting for changes...');

      }

   });

})


/**

* $ gulp

* description: start the development environment

*/

gulp.task('default', function() {

   gulp.run('server');

   gulp.watch(['./server/**/*.js', './app/**/*.js'],function() {

       gulp.run('server');

   });

});


// clean up if an error goes unhandled.

process.on('exit', function() {

   if (node) node.kill();

});

You can run any of these tasks individually by running gulp {taskname} in the command-line. For instance, if we just wanted to run the ‘watch’ task, we could simply run: “gulp watch”.

 

Additional Info

Gulp have some PHP permalink

Want to work with us? We're hiring!