Gulp: Episode 1 - The Phantom Menace

the force will be with you. always

Today, I'll tell you about the task manager called Gulp and also I'll show you how to set it up for some basic front-end developer's tasks.

Gulp is a front-end oriented task manager. Basically, it's a system that manages all common tasks in the development process, such as style compilation (SASS, LESS), livereload, js files concatenation and compression, image sprites generation, etc. So far, there are 2641 plug-ins, which means that there are separate plug-ins written for most tasks. The particular feature of the Gulp approach explains this number: one plug-in – one task. As a result, we just have to initiate the plug-in with its configurations when describing the task.

Gulp is a successor of Grunt both are written in Node.js, but Gulp has many improvements, and the developers removed the unnecessary staff from it. Also, the users can set up streams that allow increasing the speed of the task performance.

Let's switch the topic and talk about streams. Supposing, we have the following tasks to do:

  1. Select all .js files in the project

  2. Detect errors in the code with JSHint

  3. Minify each file

  4. Compress all compressed files to app.js

  5. Save in the '/build' folder

If we use Grunt, the tasks for each file are performed in the following order:

  1. Select the file

  2. Detect errors with JSHint

  3. Create a new file with error-free code and save it.

  4. Take the created file

  5. Minify the file

  6. Create a new file and save it.

  7. ....

  8. ... repeat the steps above for each file

  9. ....

  10. Select all compressed files and merge them into one

  11. Create a new file and write it in the '/build' folder. 

So, Grunt uses the following principle:

select a file → perform operations → return the file

Seems logical, doesn't it?

Now, let's take a look at how these operations can be performed using workflows. We'll illustrate it a code fragment:

gulp.task('js', function () {
 return gulp.src('js/*.js')
   .pipe(jshint())
   .pipe(uglify())
   .pipe(concat('app.js'))
   .pipe(gulp.dest('build'));
});

We create a stream from one file or a group of files, perform the operations, and then return the output file. It looks pretty much the same as we did without using the workflow. The advantage is that we don't go to each file every time, but we work with all of them in the workflow

For instance, the task that we’ve had above can be done in the stream according to the following algorithm:

  1. Select all .js files – create a stream

  2. Check the stream with JSHint

  3. Compress the files of the stream

  4. Merge all files in the stream into one file

  5. Create a new file and write it into '/build' directory

As you can see, the processing speed is several times higher due to the decrease in initiating the file system. Below, we'll compare the processing speed in real tasks.

Let's move to Gulp installation and setup.

Above all, for the installation we need Node.js.
To install Node.js on Windows and Mac, select an installation package on the official website suitable for your system and install it as a standard program

To install on Linux, in the command line add: 
sudo apt-get install nodejs

Next, we install Gulp itself. First, it has to be installed globally (for the computer) and then locally (for the project). 

Run the following command in the terminal: 
sudo npm install -g gulp

-- g label stands for global, that is for the computer.

Sudo command is not needed for Windows; it's only for Linux.

Before installing the packages for our project, let's talk about the files that make up the stream – these are gulpfile.js and package.json files.

gulpfile.js files serve to describe all project tasks, they're the starting point for Gulp. 

It looks this way:

Another file is package.json. Unlike the first one, it is automatically created when initiating npm in the project, it keeps the information about the project – its name, version, as well as names and versions of the packages installed in the project by npm, these are so-called dependencies.

These two files allow us to apply Gulp to any project having only two files and without keeping in mind what modules and what versions were installed in the previous compilation. The necessary versions of packages are retrieved from package.json. For this, you just need to place the package.json file in the root of the project and run 'npm install' command in the terminal. Npm installs everything that was marked as required in package.json.

Let's go back to Gulp installation. In the terminal, move to the directory with the project, and save Gulp there. 
npm install --save-dev gulp

-- save label indicates that the installed package will be at once saved in package.json

-- dev label shows that dependencies of the package will be saved in  devDependencies and not in  dependencies.
Dependencies are the packages that your project directly depends on. Usually, these are libraries and frameworks (expressjs, jquery, backbone).

Once Gulp is installed, install the packages that will track changes in the files to process the mistakes and to work with browser prefixes -  gulp-sass, gulp-livereload, gulp-autoprefixer, gulp-util.

sudo npm install --save-dev gulp-sass gulp-livereload gulp-autoprefixer gulp-util

This is the end of the first part. In the next article, we'll create our first tasks and discuss them in detail. 

Let’s fill the brief, shall we?