Gulp.js is a free , open source , javascript based task runner which automate our tasks using plugins and runs on node.js . There are all kinds of plugins available @ NPM related to gulp such as gulp, gulp-if , gulp-uglify gulp-sass, gulp-typescript , etc . We generate tasks in the gulpfile.js and gulp runs it . The first task gulp looks for in task runner is default ( This is the name of the task ) , if your gulpfile.js have the default task then its not necessary to mention the name of the task , It will automatically look for the default task and execute it and if the default task is non-existant then it will throw an error message.

• In gulp, Piping is there for speed
• It is Easy to understand and use
• We can create sub-tasks or can give priority to a task
• It reduces efforts as we can automate minification of files

We need node.js in order to use gulp. Once node.js is there Use the following command to install gulp globally

							
$ npm install gulp -g
							 
						

After installing gulp we need to create package.json

							
$ npm init
							 
						

Now add the gulp dependencies to the package.json file using the following command :

							
$ npm install gulp --save-dev
							 
						

In order to check whether it is installed properly let's follow the ritual and write code for Hello World example. We are writing a task here which will print " Hello world " on the console : Note : Save this in the file gulpfile.js , It is the default file where all the gulp tasks are saved.

							
// gulpfile.js
var gulp = require('gulp') 	// Requiring the module

gulp.task('default' ,function(){
		console.log('hello world');
});
							 
						

As we only have default task so we can run it using the command :

							
$ gulp
							 
						

The output of the above code will be :

									
*\gulpfile.js
[02:41:43] Starting 'default'...
hello world
[02:41:43] Finished 'default' after 565 �s

							 
						

Now Let's create the same task with a name hello :

							
// gulpfile.js
var gulp = require('gulp') 			//  require the module

gulp.task('hello' ,function(){
		console.log('hello world');
});
							 
						

Now in order to run the task, write the name of the task after the gulp command as done below :

							
$ gulp hello
							 
						

output will look something like :

									
*\gulpfile.js
[02:50:13] Starting 'hello'...
hello world
[02:50:13] Finished 'hello' after 560 �s

							 
						

• gulp.task : It is used to define the task. It takes the name of the task or the array of name of the tasks and the function to be executed as parameters. However the array of task is optional depending upon requirements.
• gulp.src : It points to the location from where we can get the access of the files to be executed or used to perform operations.
• gulp.dest : It points to the location where we will store the file after performing operations.

1. gulp.task :
   

   								
   // Single task
   gulp.task('task_name' ,function(){
   		// function_logic
   });
   
   //Array of tasks
   gulp.task('default', ['task_1'], ['task_2'],function () {
   	// function_logic
   });
   
   gulp.task('task_1', function () {
   	// function_logic
   });
   
   gulp.task('task_2', function () {
   	// function_logic
   });
   
   								 
   							

   
   
2. gulp.src :
   

   								
   gulp.src('Address of your source file')
   
   								 
   							

   
   
3. gulp.dest :
   

   								
   gulp.dest('Address of your destination file')
   
   								 
   							

   
   

Example of 2 tasks running in gulp.js is shown below :

							
gulp.task('coffee' , function() {
	return gulp.src('source/*.coffee')
	.pipe(coffee())
	.pipe(gulp.dest('source'));
});
// Here coffee will get priority over scripts and coffee will run first
gulp.task('scripts',['coffee'] , function() {
	return gulp.src('source/*.js')
	.pipe(concat('min.js'))
	.pipe(uglify())
	.pipe(gulp.dest('destination3'));
});

							 
						

Run the task using :

							
$ gulp scripts
							 
						

Output will look something like :

									
*\gulpfile.js
[03:13:49] Starting 'coffee'...
[03:13:49] Finished 'coffee' after 640 ms
[03:13:49] Starting 'scripts'...
[03:13:49] Finished 'scripts' after 217 ms

							 
						

This is the introductory part of Basic Gulp Plugins Series in which we learn about what is gulp.js and it's features, Installations and some basics , basic gulp functions, basic gulp syntax and lastly basic gulp tasks.