Gulp is available on Windows, Linux, and macOS. The installation process is very similar in any of these operating systems, and the only difference is that you need to run the installation command as administrator on UNIX-based platforms. You need to have already installed Node and NPM on your PC. To install, type the next command:
$ npm install –g gulp
Let's wait some minutes after the installation process finishes and then verify that all its okay:
$ gulp –v
CLI Version 3.9.0
That's all! We now have Gulp installed and ready to automate tasks!
First of all, you need to ensure that your web project is already configured to import npm modules; if no package.json file exists, you must create one with the npm init command. To start working with Gulp, just type the following command:
$ npm install --save-dev gulp
This will install gulp node module locally on your project. Remember that the --save-dev flag lets npm update its package.json file in the devDependencies section to be resolved only on development time.
The next step is to create the gulpfile. This file will act as manifest to define the tasks we want to execute. All of them should be defined in this file; let's go through an example:
// gulpfile.js
var gulp = require('gulp');
gulp.task('hello-world', function(){
console.log('hello world');
});
require is a node function to add a reference to a module. Since we are referencing the gulp module, we are able to use this task automation method.
Now, when we run the gulp hello-world command from the command line, the task automation tool will search on the gulpfile the task matching by name and execute it.
Gulp provides three primary task methods:
- gulp.task: To define a new task with a name, array dependencies, and the function to execute
- gulp.src: It sets the folder where the source files are located
- gulp.dest: It sets the destination folder where build files will be placed
Gulp can be configured to execute any task, such as image transformation, JavaScript files transpiling, concatenation, and case processing. Let's see some more advanced examples.