Gulp Usage

What is gulp.js and why use it?

There’s no point in investing your time into learning a new tool if you don’t even know what problem it solves. Gulp solves the problem of repetition. Many of the tasks that web developers find themselves doing over and over on a daily basis can be simplified by becoming automated. Automating repetitive tasks = more time to do non repetitive tasks = more productivity.

Gulp is a javascript task runner that lets you automate tasks such as…

1. Bundling and minifying libraries and stylesheets.
2. Refreshing your browser when you save a file.
3. Quickly running unit tests
4. Running code analysis
5. Less/Sass to CSS compilation
6. Copying modified files to an output directory

The gulp workflow

Below is a common workflow for performing certain build operations.

• We start by defining a task that we would like to accomplish.
• Within that task, a desired set of files are loaded into the gulp stream to be processed. (Optional) Once files are in the stream, one or more modifications can be made to the files. Because the streams are processed in memory, no file - system writes to temporary directories between modifications are required.
• Send the new (possibly modified) files to a specified destination

So first, the original files go in, we optionally process modifications to the input files, then we copy the result of our stream to a destination directory.

The simple gulp API
Using gulp is super simple because you don’t have to figure out how a complex API works in order to be productive with it. There are only 4 api’s in gulp!

API                     Purpose
gulp.task             Define a task
gulp.src             Read files in
gulp.dest             Write files out
gulp.watch     Watch files for changes

Installing gulp via npm
The npm package manager comes installed with Node.js. While node.js isn’t a requirement to use gulp, it does make demonstrating it a lot easier. I will be installing gulp from npm locally into my project. Make sure that you’re in your project’s root folder before running the command, otherwise your node modules will be downloaded into the wrong folder.

cd myproject
npm install --save-dev gulp

This will install the gulp node module locally to the project (as opposed to globally). The --save-dev argument lets npm know to update it’s package.json file with a new devDependencies record. devDependencies will need to be resolved at development time, where as dependencies will need to be resolved at run time. Because gulp is a tool to aid us in development, it needs to be resolved at development time.

Creating a gulpfile
A gulpfile is a file that will act as a manifest to define our tasks. Tasks that we want to execute will be found within this file. Whenever we run the command gulp hello-world from the command line, we are telling gulp that we want to run the hello-world task within gulpfile.js.

After creating gulpfile.js within the root of your project, add a basic tasks.

var gulp = require('gulp'); gulp.task('hello-world', function(){ console.log('hello world'); });

require is a function implemented by node (which is an implementation of the CommonJS spec) that will add references to node modules that we have installed. Once we make a reference to the gulp module, we can use it to create a task. Here, our task simply writes to the console window, but you could have it do any number of automated tasks.