Getting Started with gulp

While working on a project, one is bound to have a bunch of repetitive tasks such as testing, minification, compiling less/sass/templates, etc., because we are humans, we are bound to make mistakes at one point or another (one can forget to minify some files, or recompile after some changes, etc.), and a build tool that can automate these things could be incredibly useful. There are plenty of options available like Grunt, Broccoli and Brunch.

The one that I prefer is gulp. It’s a streaming build system and utilizes node.js’ streams. Thus all the file manipulation is done in memory, making it very fast. It has a very fluent API for defining tasks which is usually called “piping”.

Installation

Gulp is very easy to install. (Only prerequisite it has is node.js and npm to be installed. And since your are reading this, I assume that you already have done so.). You can get started in just three steps.

1. Install gulp globally.
2. Include gulp in your devDepenedencies.
3. Create a gulpfile.js file

First, we need to install gulp globally by running the following command

npm install -g gulp 

Next, we need to add gulp to devDependencies of one of your projects. Make sure you have a package.json file, either created manually or by typing npm init. Once you have a package.json file, run the following command:

npm install --save-dev gulp 

And finally, we need a gulpfile.js file, where we can define our tasks. Make sure you have this file in the root of your project and add the following code to it.

var gulp = require("gulp"); 

gulp.task("default", function(){ 
    // The task definition will go here 
}); 

Now run gulp command in your terminal and you must see something similar to this.

[14:28:19] Using gulpfile ~/projects/gulp/gulpfile.js
[14:28:19] Starting 'default'...
[14:28:19] Finished 'default' after 116 μs

Nothing actual is happening here, because the task is empty, but everything seems to run fine.

The API

Gulp’s API is very lightweight and simple. It just has 4 top level functions

1. gulp.task: Defines your task

   gulp.task(name: String [, deps: Array], callback: Function)
   

2. gulp.src : Points to files we want to use. It’s parameter path takes a glob expression. .pipe can be used to chain it’s output into other plugins.

   gulp.src(path: String[, options: Object])
   

3. gulp.dest: Points to destination for the output files.

   gulp.dest(path: String)
   

4. gulp.watch: Can be used to watch files for changes and run the tasks accordingly.

   gulp.watch(path: String[,options: Object], task: Array|Function)
   

Running tasks

Running a task is simple. In your command prompt type gulp [task name]. When you omit the task name, gulp will look for a task named default and try to run it. Thus it is good idea to have your most used task named as default.

Simple Copying

Let’s say you want to copy all .html files from source folder to public folder. You can simply write the following code:

gulp.task("copy", function(){
    gulp.src("source/*.html")
       .pipe(gulp.dest("public"))
});

Now running gulp copy in your terminal will copy all the .html files. You must see something similar:

[14:32:32] Using gulpfile ~/projects/gulp/gulpfile.js
[14:32:32] Starting 'copy'...
[14:32:32] Finished 'copy' after 16 ms

This must be enough to understand basics of gulp. In the next post we will have a look at compiling LESS files to CSS, Watching files for changes and running multiple tasks.

Best Open Source Business Intelligence Software Helical Insight is Here

A Business Intelligence Framework

Free
Download