Introduction To Gulp

In this blog, you will learn about 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.

2. dest()
    
   It helps to write the output to the disk.

3. task()
    
   Forms a logical wrapper around the .src(), .dest() and stream.

4. 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. 

gulp.task('copyScripts', function() {
    // copy all javascript files from source/ to dest/
    gulp.src('source/*.js').pipe(gulp.dest('dest'));
});

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