Take a gulp of Gulp

Written by: Matic
Published on: 8.9.2016

Web developers are constantly looking for tools, which will optimize their work and make their lives as easy as possible. When they come to Gulp they often, accidentally or not, mixed it with Grunt. These two cause confusion all the time, but be careful, they are not the same. To avoid any misconceptions we present you Gulp.

Gulp is a streaming build system, which means that you can use it to automate common tasks in the development of a website. These tasks are often front-end ones, like spinning up a web server, reloading the browser automatically, whenever a file is saved, using pre-processors like Sass or LESS and optimizing assets like CSS, JavaScript and images. But this is not a comprehensive list of things Gulp can do. With it you can even build a static site generator.

Gulp is built on Node.js, and both the Gulp source and your Gulp file, where you define tasks, are written in JavaScript. You can write tasks to lint your JavaScript and CSS, parse your templates, and compile your LESS when the file has changed. All that in a language that you’re probably already familiar with. Gulp can also be used to automate bundling and minification or the cleansing of a development environment before a new build.

 

gulpfile.js


Installation

Installing Gulp is nothing special really. To install it, you need to have Node.js (Node) installed into your computer first. Then, you have to Install Gulp Globally:

npm install -g gulp

Then you have to install it in your project. You create a folder named project, run npm init from inside directory, because npm init command creates package.jason file for your project, which stores information about the project, like the dependencies used in the project. Once you have your package.json, you can install gulp into project with:

npm install --save-dev gulp

And finally you’ll need a gulpfile.js in your project root that contains your tasks. Gulpfile.js defines a set of Gulp tasks which can be run from the Task Runner Explorer window in Visual Studio. These tasks delete and minify the CSS and JavaScript files.

Working with Gulp

After that you can start working with Gulp and writing your tasks. Like in any different tool, the deeper you get, more functions you explore. For a start you can put the following in your gulpfile.js:

 

var gulp = require('gulp'),

   uglify = require('gulp-uglify');

gulp.task('minify', function () {

   gulp.src('js/app.js')

      .pipe(uglify())

      .pipe(gulp.dest('build'))

});

 

gulpfile.js2

 

With that we first loaded the gulp and gulp-uglify modules. Then we defined a task named minify, which, when running, will call the function provided as the second argument. And finally we defined what our task should do. This task is very complex one. Therefore, for a start, you can write a simpler one like:

gulp.task('hello', function() {

   console.log('Hello neighbour');

});

However, real task, as showed above, takes in two additional gulp methods. Gulp.src tells the Gulp task what files to use for the task, while gulp.dest tells Gulp where to output the files once the task is completed.

One missing piece of api

Besides gulp.task, gulp.src and gulp.dest Gulp’s api contains one level function more. It’s called gulp.watch. Gulp.watch has two main forms. First one takes a glob, an optional options object, and an array of tasks as it’s parameters and second one takes the glob, an optional options object, and an optional callback that will run, when a change is picked up. There we came to the first comparison with Grunt, which we will more deeply analyse in one of our next blog posts. While Gulp has its watch feature built right in, Grunt requires a secondary package to have it.