Gulp is one of the many build tools available that allows you to automate many of the repetitive or painful tasks.
To get started using gulp, you first need to install npm, you can install npm along with nodejs by following the official site.
You can check the version of npm by running below command in a terminal or command prompt.
npm -v
Next, you can change the directory (cd) to the directory where your project resides, then you can run the below command to create a package.json file
npm init
The cli will ask you a bunch of questions like the name of the project, once this is completed, you will find a package.json file in the current directory.
Next, you need to install gulp, you can install gulp globally using the below command, we install gulp globally, so that each project does not require its own copy of gulp.
npm install -g gulp
We can also save gulp as a dependency to our project using the below command
npm install --save-dev gulp
Start using gulp
To start using gulp, you first need to create a gulpfile.js file in the root directory of your project. The file can contain tasks which you want gulp to run.
Gulp uses npm modules to perform tasks and there are more than 3000 gulp plugins available that allows you to do a very wide range of tasks from minification of files to watching files for changes and creating web servers.
Lets take a look at an example to better understand how to use gulp and its plugins
For our example, we will create 2 tasks, one to minify and concatenate our javascript, one to minify our css
We will be using gulp-uglify and gulp-concat to minify and concat our javascript, next we will use the gulp-clean-css plugin to minify our css.
First we must install our gulp plugins
npm install gulp-concat gulp-uglify gulp-clean-css --save-dev
Next in our gulp.js file, we have to add references to the plugins
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var clean_css = require('gulp-clean-css');
Next we create a task, we will first create a task to minify and concatenate the javascript, we will call the task process_js
// Concatenate & Minify JS
gulp.task('process_js', function() {
return gulp.src('js/*.js')
.pipe(concat('start.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'))
});
In the above code, we first create a task using the gulp.task function, we then specify the input files using the gulp.src method, we specify the src files using “js/*.js” which denotes all the files in the js folder which end with .js
Next we use the pipe the output of the previous step to the concat plugin to combine all the javascript files into a single “start.js” file, next we pipe the start.js file to be uglified and minified and store the resultant file in the dist folder.
Similarly, we will create a task to minify the css call min_css
//minifu css
gulp.task('min_css', function() {
return gulp.src('css/*.css')
.pipe(clean_css())
.pipe(gulp.dest('dist/css'));
});
The above tasks creates a tasks, sets the source of the files as all the files that end with .css in the css folder and pass them through the clean_css plugin to be minified and then save the output in the dist/css folder.
In gulp we can also set default tasks which are tasks that will be run when you don’t specify any task
gulp.task('default', ['min_css', 'process_js']);
In the above line of code, by default both the min_css and process_js tasks will be run.
To run a gulp task, you can call it using the command “gulp task_name”
for example:
gulp min_css
Will run the min_css task
gulp
Will run the default task.