This post originally appeared on praveenpuglia.com

Lately, if something has totally changed the way I work, it’s Gulp – the streaming build system. There are quite a lot of cool things gulp can do with great flexibility. Let’s get started!

Installation

NodeJS and NPM must be installed.

Gulp needs to be installed both globally( for command line usage ) and locally into our project( for creating project tasks )

Global Installation

Local Installation

Hello World!

Assuming our project directory is my-project , create a gulpfile.js  file in it. All gulp tasks reside in this file.

Now, we create our first task that prints out Hello.

  • First, we require  gulp so we can use gulp’s API for creating tasks.
  • Next, we create a task using  gulp.task method with the task name being sayHello  and an anonymous function that defines what sayHello does. In this case, we just print out Hello

Executing a Task

Most of the work with gulp happens on the command line. To run a task, we navigate to our project directory( or the directory containing gulpfile.js  ) and ask gulp to run a specific task.

Did you see what happened? It might look something like this…

Following along? Great!

Dependent Tasks

It’s easy to make one task wait for another to finish. This is done by passing an array of tasks as the second parameter to gulp.task  method.

Move over to terminal and execute gulp world .

The Default Task

If we move over to terminal and execute gulp , without specifying a task name, it looks for the default  task. Go ahead! give it a try.

Exploring Gulp’s API

Gulp has 3 other methods  .src , .dest  & .watch apart from .task . We’ll look into those by trying to minify CSS, a real world use case for gulp.

Before we go ahead, we need to know a little more about how gulp works. Gulp generates a stream from the files we pass in via gulp.src  method. We then pipe  the stream through various processors like minify, uglify, sass, sourcemaps etc. Remember, all the processing done, is still on the generated stream and not written to disk. To do that, we use gulp.dest .

Minify CSS

Create a style.css in css directory and put the following content.

We will install gulp-minify-css plugin to do the minification.

In gulpfile.js, we require this module just like we did it for gulp.

So what did we do?

  1. We create a new task named css:minify  (namespacing is good).
  2. We tell gulp which sources to use to build the stream to process using gulp.src  and passing in the file path.
  3. We then pipe  the generated stream through the minify  process.
  4. Finally, we pipe the processed stream through gulp.dest which then writes the new, minified style.css  inside min  directory.

The last thing I want to mention is how to watch files for changes. In our example, we’ll setup a watch  task and look for changes in css files. Whenever that happens, we would want the css:minify  task to run automatically. Here’s how.

On terminal execute gulp watch . It may look like the the prompt has hanged but it’s actually watching for file changes. Let’s go ahead and add some new rules in style.css, save it and see what happens!

In the next post, I’ll write about file include patterns, various recipes for doing things like sass compilation, generating sourcemaps, cleaning directories before running tasks and more. Stay tuned!