As I mentioned at the beginning of the chapter, Gulp is the most popular JavaScript task runner at the time of writing this book and that's the main reason why we chose it. Gulp and Grunt work in a similar way, they both use third-party plugins to work. Keep in mind that Gulp is more like a framework, it does not make too much by itself.

Gulp acts as the glue that coordinates the build workflow; it has some basic functionality and an API, which the Gulp plugins can use to do their work. The plugins use the compilers and utility programs that make the real file processing, such as the CoffeeScript transpiler. The plugins connect these programs to the Gulp workflow:

Figure 7.3 Relationship between Gulp plugins and libraries

The preceding figure shows the relationship that was described earlier, you can get a better idea of how Gulp connects with its plugins; notice how the plugins delegate the file processing to the utility programs that they connect to.

Gulp is composed of several named tasks where each task can have dependencies on other tasks. A typical Gulp task opens a stream of files at the beginning and applies transformation to each file in the stream with the installed plugins.

A stream is opened with the gulp.src() method. It starts a stream that you can connect to several pipes in order to apply the necessary transformations. When you open a stream, you need to specify the target files that will be used in the stream. You will select these files using the node-glob format:

// get only the index.html file
gulp.src('app/index.html');

// get all the files with .html extension
gulp.src('app/*.html');

// get all the .js files available 1 path depth in 
// the app directory
gulp.src('app/*/*.js');

// get all the .js files in every subdirectory available
gulp.src('app/**/*.js');

It is easy to specify the files for the stream, it is similar to what you do in the command line. The figure below shows how the stream and pipes are connected. The files that are selected are streamed into the Gulp plugins, they make the transformations and put the output back in the stream, the next plugin can then make its work, and put the result back in the stream:

Figure 7.4 Using node-blob to select files

At the end of the pipe, you will normally write the result in a file that is ready to be used. You can put as many Gulp tasks as you need and each task can have as many dependencies as it needs.