Post
Ask Question

Introduction To Gulp

Introduction

 
Gulp is a JavaScript task runner. Gulp is very easy to learn and use. It favors code over configuration. You can easily automate your tasks, using Gulp.js.
 
Gulp is commonly used in front end task scenarios, as shown below.
  1. Spinning up Web Server
  2. Automatic reload of the Browser
  3. Optimizing CSS, JavaScript, images, etc.
Gulp APIs
 
Gulp provides 4 APIs to automate the tasks.
  1. src()
     
    Helps to load the required files.
  1. dest()
     
    It helps to write the output to the disk.
  1. task()
     
    Forms a logical wrapper around the .src(), .dest() and stream.
  1. watch()
     
    Helps to keep an eye on the file changes and acts accordingly
Example
 
The example given below is a very simple task that copies JS files from the source to the destination folder. 
  1. gulp.task('copyScripts', function() {  
  2.     // copy all javascript files from source/ to dest/  
  3.     gulp.src('source/*.js').pipe(gulp.dest('dest'));  
  4. });   
Gulp flow
 
Visualization in an easy-to-understand flow diagram is given below
 
References
  • http://gulpjs.com/
  • https://gulp.readme.io/docs
  • https://www.npmjs.com/package/gulp