Gulp JS provides facility to deal with static resource files, usually, processes files before outputting it to the browser. In this article, You will learn how to use Gulp JS to change the development process, so that the development is more efficient and easy.
What is Gulp JS?
Gulp JS is basically an open source task runner for JavaScript application. Gulp is a task/build runner for JavaScript based architectures. Gulp is npm module which is easy to use, easy to manage. There are few ready tasks which you can find in GitHub repositories.
You can plug Gulp with any web application as it goes with all like Angular JS, React JS or any Javascript architecture.
Gulp JS is a Nodejs automatic task runner for building code in front-end development and is a builder of automation projects. Gulp is not only optimizing website resources but also help to automatically complete a lot of repetitive tasks. Also, It greatly improves work efficiency.
Gulp JS is not a library or frameworks like ReactJS or AngularJS. It is just a toolkit for building Javascript applications.
Why Gulp JS needed?
There are some issues developer find while developing an application in Javascript.Gulp is mainly used for time-consuming and repetitive tasks. Gulp take care of all annoying task by plugins and tasks very easily.
Features:
This is basic features Gulp JS provide:
- Easy to learn
- Efficient
- Easy to use
- High Quality
How to Install Gulp
You can install Gulp command line. There is one npm(Node Package Manager) command which used to install Gulp. Here I am doing global installation gulp in which gulp is globally available for all application in your server.
Prerequisite
Most important is that you need to setup Node environment and for that install node js and npm in your server to use Gulp.
1 2 3 | $ npm install -global-gulp-cli |
After executing above command, if you want to see whether the gulp installed correctly, you can execute the following command.
1 2 3 | gulp -v |
This command will return the version number of gulp if installed.
Next, You need to install gulp locally into the project
1 2 3 | npm install —-save-dev gulp |
Here, —-save-dev is used to update the package.json file and update the dev-dependencies value to indicate that the project needs to depend on gulp.
Directory Structure Requirement
This ideal directory structure when you are using Gulp but it is not necessary that you have to follow this structure only. You can do changes in structure as per your requirement.
Let’s look at the directory structure.
dist
|__ app.css
|__ app.js
src
|__ app.css
|__ app.js
gulpfile.js
The main idea is to use gulpfile.js to distribute the tasks in separate documents. This is the easiest way to manage each task in one file.
Src folder will have the source code of the application before it compiled. After compilation done using Gulp, all the task and code will be put into the dist directory. You need gulpfile.js file in the root directory and it is the only file you need to use Gulp. This file describes all of the tasks and everything you want gulp to do.
How Gulp works?
Gulp is built on node streams. Node stream is the continuous flow of data that can be manipulated asynchronously. These streams facilitate the connections of file operations through the pipeline. The pipeline is basically a chain to process element and they are arranged in a manner that output of one element will be the input of next element and all this done using pipe operator or pipe() function.
What are the Gulp Common Tasks?
Gulp and grunt are very similar, but to write task in Gulp is very easy that’s why people are moving from grunt to Gulp. If you check task in Grunt, it is very complex to understand and write. Let’s understand Gulp tasks:
- Clean
- Concat
- Uglify
- Watch and Browser sync
Let’s start to understand task one by one.
1. Clean
Clean task is basically used to clean the files and directory using Gulp.
1 2 3 4 5 6 7 | var gulp = require('gulp'); var clean = require('gulp-clean'); gulp.task('clean', function(){ return gulp.src('build', {read:false}).pipe(clean()); }); |
Here, included two modules, one is gulp and another is gulp-clean. gulp.task allows you to define the task. Gulp clean is used to clean your directory. Clean is the task name in gulp.task. Instead of clean, You can clear as well. There is a function gulp.src in which you need to pass the directory path. Pipe return those gulp files which are in mentioned directory and run the clean command.
gulp.src is used to point the source files. There is one more function gulp.dest which is for the destination folder to output files.
2. Concat
Concat task is mainly available for concatenation of files or code.
1 2 3 4 5 6 7 | var gulp = require('gulp'); var concat = require('gulp-concat'); gulp.task('vendor', function(){ return gulp.src('vendor/*.js').pipe(concat('vendor.js')).pipe(gulp.dest('build/vendor.js')); }); |
Here, gulp.src take the file from the source directory and combine all the files in vendor.js and put it into destination folder which is in the build.
If you have changed your dependencies, you need to make changes in vendor files. You can use a concat command to attach your new dependency files in vendor.js. Otherwise, you can do gulp.clean first and then do gulp.build, it will do the same thing but it is a tedious task because takes few minutes to takes all javascript files and put it into one file. So concat command is a better option.
3. Uglify
Uglify is the uglification of your code. It is minification of scripts and styles. Uglification removes all the spaces, newlines and comments from the files and making it much lighter which internally makes your application faster. So, Gulp takes care of that very easily using gulp.uglify.
1 2 3 4 5 6 7 8 9 | var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); gulp.task('vendor', function(){ return gulp.src('vendor/*.js').pipe(concat('vendor.js')).pipe(uglify()).pipe(gulp.dest('build/vendor.js')); }); |
gulp.dest() is used to write stream using the src file. It also creates the file and after creating the file, it continues to transfer the stream for other operations.
Here, first define the source path using gulp.src and then pipe to uglify files and put it into the destination using gulp.dest.
4. Watch
1 2 3 4 5 6 7 8 9 10 | var gulp = require('gulp'); var watch = require('gulp-watch') gulp.task('serve', ['watch'], function(){ browserSync.init({ path.join(conf.paths.tmp, '/serve'), conf.paths.src); }); }); |
A watch will continuously watch the files so if you change any file which is in a watch, will go and list out changes and perform the action. Serve is the task name in this. browserSync will sync the watched file to the destination if any change made.
That’s it for now!! Hopefully you guys learn something from this article about gulp and hopefully, you will use Gulp in your upcoming project.
