Installing Gulp

Installing Gulp is easy, but is actually a two-step process. The first step is to install Gulp globally. This installs the command-line utility; but Gulp won't work without also being installed locally within our project. If you aren't familiar with Node.js, the packages can be installed locally and/or globally. A locally installed package is local to the project's root directory, while a globally installed package is specific to the developer's machine. Project dependencies are tracked in package.json, which makes it easy to replicate your development environment on another machine.

Assuming you have Node.js installed and package.json created in your project directory, the installation of Gulp will be very easy. Be sure you are positioned in your project's root directory and then execute the following:

$ npm install -g gulp@3.9.0
$ npm install --save-dev gulp@3.9.0

Note

If you receive an error while running these commands on OS X, you may need to run them with sudo. For example: sudo install -g gulp.

You can usually ignore any WARN messages.

Notice that we're specifying version numbers here – these are the versions that I used while writing the code for this book. You can try later versions if you want, as long as they are minor revisions. Major revisions may work, but you may also have to make modifications to the code in this book in order to support them.

Tip

It's a good idea to be positioned in your project's root directory any time you execute an npm or gulp command. On Linux and OS X, these commands generally locate the project's root directory automatically; but this isn't guaranteed on all platforms, so it's better to be safe than sorry.

That's it! Gulp itself is very easy to install, but most workflows require additional plugins that work with Gulp. In addition, we'll also install the Cordova dependencies for this project.

Note

If you're working with the code bundle for this chapter, you can install all the following dependencies by executing npm install.

First, let's install the Cordova dependencies:

$ npm install --save-dev cordova-lib@5.4.1 cordova-ios@3.9.2 cordova-android@4.1.1

cordova-lib allows us to programmatically interact with Cordova. We can create projects, build them, and emulate them—everything we do with the Cordova command line can be done with cordova-lib. cordova-ios and cordova-android refer to the iOS and Android platforms that cordova platform add ios android would add. We've made them dependencies for our project, so we can easily control which version we will build it with.

Tip

While starting a new project, it's wise to start with the most recent version of Cordova and the requisite platforms. Once you begin, it's usually a good practice to stick with a specific platform version, unless there are serious bugs or security issues that require updating to a newer platform version..

Next, let's install the Gulp plugins we'll need:

$ npm install --save-dev babel-eslint@4.1.1 cordova-tasks@0.2.0 gulp-babel@5.2.1 gulp-bump@0.3.1 gulp-concat@2.6.0 gulp-eslint@1.0.0 gulp-jscs@3.0.2 gulp-notify@2.2.0 gulp-rename@1.2.0 gulp-replace-task@0.10.1 gulp-sourcemaps@1.3.0 gulp-uglify@1.4.0 gulp-util@3.0.6 merge-stream@1.0.0 require-all@1.1.0 rimraf@2.4.3

These will take a few moments to install; but when you're done, take a look at package.json. Notice that all the dependencies we added are also added to the devDependencies section in the file. This makes it easy to install all the project's dependencies at a later date (say, on a new machine) simply by executing npm install.

Before we go on, let's quickly go over what each of the earlier mentioned utilities do. We'll go over them in more detail as we progress through the remainder of this chapter:

• gulp-babel: Converts ES2015 JavaScript into ES5. If you aren't familiar with ES2015, it has several new features and an improved syntax that make writing mobile apps easier. Unfortunately, because most browsers don't yet natively support the ES2015 features and syntax, it must be transpiled to the ES5 syntax. Of course, if you prefer other languages that can be compiled to ES5 JavaScript, you could use those as well (these would include CoffeeScript and so on).
• gulp-bump: This small utility manages the version numbers in package.json.
• gulp-concat: This concatenates streams together. We can use this to bundle files together.
• gulp-jscs: This performs the JavaScript code style checks against your code. It supports ES2015.
• gulp-eslint: This lints your JavaScript code. It supports ES2015.
• babel-eslint: This provides ES2015 support to gulp-eslint.
• gulp-notify: This is an optional plugin, but it comes in handy, especially when some of your tasks take a few seconds to run. This plugin will send a notification to your computer's notification panel when something of import occurs—perhaps an error or a completion message. If the plugin can't send it to your notification panel, it will be logged to the console.
• gulp-rename: This renames the streams.
• gulp-replace-task: This performs text searches and replaces within the streams.
• gulp-sourcemaps: While transpiling ES2015 to ES5, it can be helpful to have a mapping between the original source and the transpiled source. This plugin creates them automatically for you.
• gulp-uglify: This uglifies/minifies your code. While useful for code obfuscation, it also reduces the size of the code.
• gulp-util: This provides additional utilities for Gulp, such as logging.
• merge-stream: This merges multiple tasks.
• require-all: This lets us import an entire directory of code into an object at once.
• rimraf: Easy file deletion. Akin to rm on the command line.