News

A beginners guide to Gulp.js

Explore the many benefits of using the Gulp.js task runner in your projects to help streamline your workflow and optimise your code

Unclouded 11

Get started with Gulpjs

The chances are quite high that during any one project, you have dealt with or written more than one CSS or JavaScript file. These have network overheads when we end up delivering them to the end user and can cause latency and loading issues if they are too large. They may also not be as well optimised as they could be, perhaps leading to console errors or slow performance in general.

Enter Gulp.js, a free open source JavaScript task runner powered by Node.js, which has quickly gained traction in the web development community as a fast, powerful alternative to existing task runners on the market. But what are the benefits of creating and implementing a task runner tool into your workflow?

Using a task runner you can make the most of CSS preprocessors such as SASS or LESS to streamline how you write stylesheets, as well as coffeescript for your JavaScript files. The task runner can compile these into the desired formats for final delivery. It can then iterate over your directories and combine pre-selected files into one larger file, minifying it in the process, while still keeping an unminified version.

The additional benefit of a task runner is that it will watch your directories and files and only run selected tasks when a file or structure has changed. This removes the necessity to manually run any task each time an update has been made.
Let’s also add in the ability to run code validation and tests against your code, automatically run as you save the file and now you should start to see the power behind implementing a task runner procedure into your projects.

If you have some prior exposure to JavaScript, you can get started with Gulp.js in a matter of moments and add it into your projects quickly. Let’s have a look at how easy it is to work with and create your own task definitions.

INSTALLING GULP

It’s easy to get up and running with Gulp. Installing it is a matter of typing a few commands and away you go!

1. Install Node

Before you can begin exploring Gulp.js, you will first need to satisfy the most important requirement, which is to install Node. Simply head over to nodejs.org and download and install the application onto your development machine. This is all a very quick and painless process., taking no time at all.

2. Install Gulp

With Node installed, you now have access to the Node Package Manager (npm), which we will use to install Gulp as a global package onto our system. With your Terminal or command prompt window open, run the code (available on the Web Designer website) to install Gulp as a globally available package.

3. Save as dependency

Now you will need to create a ‘package.json’ file within your project directory. A skeleton file can be created for you using the npm init command from the Terminal. Once created, you need to install Gulp as a dev dependency for your project, which will update the package.json file for you.

4. Ready to gulp

After the Node Package Manager has obtained and installed Gulp as a dev dependency, the reference to the dependency is also automatically added to the package.json file as a requirement. Any user or development machine with shared access to this json file can install the same dependencies quickly and easily.

GULP.JS v GRUNT.JS

GULP PROS

Streaming and piping for speed
Similar to Unix pipes, Gulp and its various plug-ins use streams to read in and output data. All file manipulation and management can be processed in memory and removes the need to create temporary file locations or directories. This has a distinct performance benefit compared to traditional IO methods.

Code over configuration
Although both Grunt and Gulp need a specific file to contain and manage tasks and processing order, Gulp’s file is written in pure JavaScript without any duplicated configuration values such as source and destination directory values. This means less to write and more control over the processes as a whole.

GULP CONS

Still early adoption
Although Gulp has taken the task runner community by storm and has garnered a large amount of interest since its release, it is still a relatively young product in terms of community adoption. There aren’t as many plug-ins available to use with Gulp when compared to Grunt, which may end up hindering some processes.

JavaScript
experience required
Gulp makes use of Node streams to manage file manipulation in the memory and enhance speed. Couple this with writing the ‘configuration’ file in JavaScript with Node elements and some developers may hit a potential learning curve that could impact the benefit of implementing a task runner in the first place.

GRUNT PROS

Sub Tasks
Grunt has the added benefit of being able to nest tasks based upon a parent type. For example, an over-arching task to concatenate may have subtasks for running the concat process against JavaScript and CSS files. In Grunt you can run the parent task (grunt concat, for example) or any child using a selector (grunt concat:js, for example).

Configuration clearly defined as JSON
The Gruntfile configuration file contains the complete task configuration. Written as a JSON structure, some developers may find this easier to read and understand from a direct visual standpoint compared to trying to read chained methods within Gulp’s task code declarations.

GRUNT CONS

IO speed issues
Grunt does not use any data streaming (yet – this may change in future revisions). As a result there are some performance issues, as it needs to write temporary files and directories into which manipulated files are placed instead of feeding data into the next requested task. This can also leave users with unwanted files if not cleaned up.

Configuration over code
The issue of configuration over code is a double-edged sword for Grunt. While the JSON configuration may be easier to read and manage for several developers, having to define multiple references to source and directory locations as well as having to duplicate a lot of code can be both problematic and unnecessary for users.

INSTALL AND MAINTAIN DEPENDENCIES
Manage your Gulp plug-ins and dependencies in your project with another Gulp plug-in. Let’s see how the gulp-load-plug-ins extension can help save you some valuable time

Install chosen plug-ins

As with any Gulp project, you will first be required to install your plug-ins as dev dependencies to have them automatically added to the ‘package.json’ file. You are also able to install multiple plug-ins in one command – just make sure to use the –save-dev command. Install the gulp-load-plugins plug-in as well, which will help manage the references when we code.

001    
002    npm install gulp-concat gulp-jshint gulp-bump gulp-load-plugins
--save-dev
003    

Reading package contents

The top of Gulpfile.js requires the core Gulp library as usual. Directly below this, instead of calling in each plug-in individually we can load them dynamically by using just the gulp-load-plugins library. This will read the dependencies in the package.json file and inject each of them for us.

001    var gulp = require(‘gulp’);
002    var gulpLoadPlugins = require(‘gulp-load-plugins’);
003    var plugins = gulpLoadPlugins();

Adjust references

The dynamically loaded plug-ins have been assigned and required into the project via the gulp-load-plugins extension. They will now be available for use in your Gulpfile.js by referencing them from the plug-ins object variable. For example, any reference to concat() would become plugins.concat().

001    
002    gulp.task(‘lint’, function() {
003        return gulp.src(‘js/*.js’)
004            .pipe(plugins.jshint())
005            .pipe(plugins.jshint.reporter(‘default’));
006    });
007

Further options

This plug-in has a number of configuration options which you can pass into the gulpLoadPlugins() method. These include which file to read, which keys in the selected file are read to obtain the plug-in name, and whether or not the plug-ins are lazy loaded. For more information, make sure you check out the official repository page at github.com/jackfranklin/gulp-load-plugins.

001    gulpLoadPlugins({
002        pattern: “gulp-*”,
003        config: “package.json”,
004        scope: [“devDependencies”],
005        replaceString: “gulp-”,
006        camelize: true,
007        lazy: true,
008    });

SET UP  PROJECT
Be careful not to overload your project with too many processes at once – in many cases, less is more

One thing to be mindful of is to try and not overload your Gulp configuration file in any way. This could be through the structure of your task definitions or the general formatting of the code within.
Your tasks should be written in a clean manner that is simple to understand and maintain or manage should you need to. Your Gulpfile may potentially be distributed amongst a team of developers working on the same project. Should any one individual wish to amend or revise the file, it shouldn’t take too much time to do so.
There are a vast amount of plug-ins available to download, implement and use within your projects. Thanks to the high engagement level of the development community, more are being added on a continuous basis. Gulp focuses on allowing one plug-in to handle one task and to handle it well. Although rather unlikely, it is possible to saturate your Gulpfile with too many plug-ins and tasks that are not necessarily of any relevance to your project. Consider the structure of your team (solo or a larger group of people). Think about the requirements for the application itself. Do you need minification? The live reload is useful but does it really fit in to your workflow at the moment?
Think about the bare minimum tasks you need in order to achieve your optimum Gulp workflow, and build upon that as and when necessary.  Start with the ‘less is more’ principle. Task runners are here to make your life easier and more productive.

APPLY GULP TO A PROJECT
Building Gulp tasks for use within your project requires nothing more than a single file and some JavaScript – so let’s create a Gulpfile

Create gulpfile.js

When you run Gulp via the command line, it will look for the existence of the ‘gulpfile.js’ file. This file informs the task runner which plug-ins to load and defines the available tasks to perform as well as setting the order of any chained tasks. Create Gulpfile.js in the project root and ensure it requires Gulp at the very top.

001    
002    var gulp = require(‘gulp’);
003    

Reference plug-ins

Any plug-ins that have been installed as dev dependencies and are to be used within the Gulp process will need to be defined and made accessible. To do so, simply require each plug-in by name and assign to a variable that can be called and used throughout the configuration.

001    
002    var jshint = require(‘gulp-jshint’);
003    var concat = require(‘gulp-concat’);
004    var uglify = require(‘gulp-uglify’);
005    var rename = require(‘gulp-rename’);
006    var header = require(‘gulp-header’);
007    

Code Linting

The first task will check any JavaScript code for errors by passing it through the default linting engine. Simply register the task by providing a name and the associating function. Here the source directory is set and all files within it will be piped to the jshint() method for parsing and validation.

001    
002    gulp.task(‘lint’, function() 
003    {
004        return gulp.src(‘js/*.js’)
005    
006            .pipe(jshint())
007    
008
009            .pipe(jshint.reporter(‘default’));
010    });
011    

Minification and concatenation

To streamline network resources let’s also make sure any JavaScript files are combined into one file and then a minified version of each created. Once more, set the source directory from which to pull the files, which are then concatenated and injected with a header value before being placed into the destination directory.

001    gulp.task(‘scripts’, function() {
002            var headerValue = “Evaluated by
gulp.
”;
003            return gulp.src(‘js/*.js’)
004                .pipe(concat(‘combined.js’))
005                .pipe(header(headerValue))
006                .pipe(gulp.dest(‘dist’))
007                .pipe(rename(‘combined.min.js’))
008                .pipe(uglify())
009                .pipe(header(headerValue))
010                .pipe(gulp.dest(‘dist’));
011    });

Always watching

One major benefit of any task runner is having the ability to watch a directory of files and to be able to react to any changes that are made to them. Here another task is created to manage this very simple but powerful aspect of the workflow. Once a change is detected, Gulp will pass those files through to the lint and scripts methods for processing.

001    gulp.task(‘watch’, function() {
002        gulp.watch(‘js/*.js’, [‘lint’,
‘scripts’]);
003    });

Default tasks

When starting Gulp from the command line you can optionally pass in the name of the task to run. If this is omitted, Gulp will run a default task if one is available. You can easily ask Gulp to run a series of tasks in order as part of the default task.

001    gulp.task(‘default’, [‘lint’, 
‘scripts’, ‘watch’]);



Improve your web design skills with Web Designer. Download issues direct from GreatDigitalMags.com or buy print issues from ImagineShop

×