What exactly is Gulp?
There was an increase in the complexity of websites and web applications in the last few years, and it caused the huge development of all kinds of frontend tools. Meanwhile, we’re still restricted to HTML code, CSS, and JS, which can be interpreted by a web browser. Currently downloading one or two plugins and adding them to the code isn’t enough to be sure everything will work smoothly. The bigger the project, the faster we get lost in all these lines of code that we develop.
At the same time, we want our code to be simple, modular, easy to implement and painless for further development in the future. This is why we decided to use a particular collection of tools which are meant to simplify and speed up the work. That set includes Gulp. What it is and what it does?
Based on Node.js platform, Gulp.js is a system designed for work automation.
How does Gulp work?
Its main job is to automate many actions which a programmer has to do manually otherwise. Gulp wraps up and integrates the project on a basis of earlier predefined tasks and code files divided into even very small bits.
A few tasks Gulp is responsible for in our projects:
- starts up developers’ server for a project preview
- refreshes our web browser’s window every time we make a change in the editor (on every device currently displaying the page)
- simplifies using such tools as Sass, Swig or Browserify
- minifies and concatenates into one style files and scripts
Getting started with Gulp - step by step
Since Gulp is based on Node.js, it is necessary to have it installed because Gulp won’t work otherwise.
The another advantage is the fact that all the tasks we write in JavaScript. Together with Node.js, we get npm – node package manager that will install all packages we need. We have the access to Gulp via console and to install it we type a command:
npm install gulp -g
The –g flag means that we install Gulp globally.
The next step we may take is to install Gulp for every project. To do this, we type a command from the Gulp folder’s level:
npm init
This will create a package.json file which stores a variety of data about our project like, among other things, what packages installed via npm we use.
To install the very Gulp locally we use a command:
npm install gulp --save-dev
thanks to which Gulp will be added to devDependencies in package.json.
Every time a new person joins the project all he/she has to do is to, from package.json folder’s level type a command:
npm install
var gulp = require('gulp');
gulp.task('default', function() {
console.log('Hello!');
});
As a gulp variable we load a previously installed – via npm - package (the syntax is exactly the same as in requiring in Node.js) and for default, we add a function that will execute an ordinary console.log. Now when we type:
gulp
in the folder that has gulpfile.js in it, we will receive such a result in the console:
λ gulp [16:58:03] Using gulpfile D:\test\gulpfile.js [16:58:03] Starting 'default'... Hello! [16:58:03] Finished 'default' after 357 μs
The task named default is added to the gulp command by default, while any other task may be used via typing its name after the gulp command.
Useful functions of Gulp
Gulp.js is very simple and it’s based on four functions. Our data is read by it and then it is passed through installed plugins and saved in the place we chose.
The main functions:
- gulp.task – it is used for defining our tasks and for parameters it takes: task’s name, an array with tasks’ names which will be executed and the function which has the code; the array is optional, but if it is used as an argument it’s realization precedes the function’s execution
- gulp.src – it shows what files we will be working with, and it allows to modify them via plugins and usage of .pipe() function
- gulp.dest – points to the place where we want to save our modified files
- gulp.watch – it works as a changes’ listener in our files and starts defined tasks automatically; for parameters, it takes: the observed files’ path, the array of tasks and optionally, the function which will be executed after changes occur
Gulp in practice
To sum up and present the capabilities of Gulp we will write a simple task that will add to our CSS rules suitable prefixes. We will use gulp-autoprefixer that we install via already known for us command:
npm install gulp-autoprefixer --save-dev
In our gulpfile.js we type:
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('default', ['styles'], function () {
gulp.watch('styles/main.css', ['styles']);
});
gulp.task('styles', function () {
gulp.src('styles/main.css')
.pipe(autoprefixer())
.pipe(gulp.dest('build'));
});
After executing the gulp command our output files will be saved in build folder. Additionally, Gulp will monitor for changes in main.css file and every change found the data task would be executed. The list of plugins available for Gulp may be found on the official Gulp site.
Gulp vs. Grunt
Of course, you can find more task runners, e.g. webpack, brunch, broccoli and the biggest - Grunt. What is the difference between Gulp and Grunt?
At first, the big difference is the way of tasks define. Tasks for Grunt are set by the configuration of the object that is passed to the function grunt.initConfig. Unlike writing features that are in the line with Node.js, it can be a little more difficult (but it is also largely a matter of personal preference). Gruntfile (equivalent for gulp file) can become very long and difficult to read very quickly. The sample of configuration file for Grunt taken from the official website:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
qunit: {
files: ['test/**/*.html']
},
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint', 'qunit']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('test', ['jshint', 'qunit']);
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
};
Another difference that is worth to mention is the speed of the tasks. Gulp works better in this case because all of the operations are executed in memory and the final files are saved only once. However, Grunt uses temporary files what increases the amount of save and read files from disk. It doesn't really matter when it comes to small projects - time differences oscillate at a few hundred milliseconds.
When choosing the tool, developing environment and plugins development are also really important. Grunt has much more plugins because it is older than Gulp (5236 plugins at the official Grunt website and 1879 plugins at Gulp website). If the number of plugins is an important factor for you, it should be borne in mind that Gulp has a plug that allows using these from Grunt, and vice versa. Google Trends shows statistics of interest to specific tools. At the time of writing, Gulp slightly outrivals Grunt.
To sum up, to choose between these tools depends on your own preferences. If you've already used some of them and it works for you, I think there is no greater reason to persuade you to change that. However, if such a choice is still ahead of you, I recommend Gulp - mainly because it is easily and quickly tool to configure tasks and saves time that you can spend on writing proper code.