Creating your first Gulp configuration file

Gulp tasks are defined by the contents of the project's gulpfile.js file. This is a JavaScript program, so the same skills you have with JavaScript will apply here. Furthermore, it's executed by Node.js, so if you have any Node.js knowledge, you can use it to your advantage.

Tip

This file should be placed in the root directory of your project and must be named gulpfile.js.

The first few lines of your Gulp configuration file will require the Gulp plugins you'll need to complete the tasks. The following lines will then specify how the various tasks need to be performed. For example, a very simple configuration might look as follows:

var gulp = require("gulp");
gulp.task("copy-files", function () {
  gulp.src(["./src/**/*"])
      .pipe(gulp.dest("./build"));
});

This configuration only performs one task: it moves all the files contained within src/ to build/. In many ways, this is the simplest form of a build workflow, but it's a bit too simple for our purposes.

Tip

Note the pattern we used to match all the files. If you need to see the documentation on what patterns are supported, see https://www.npmjs.com/package/glob.

To execute the task, you can execute gulp copy-files. Gulp would then execute the task and copy all the files from src/ to build/.

What makes Gulp so powerful is the concept of task composition. Tasks can depend on any number of other tasks and those tasks can depend on yet more tasks. This makes it easy to create complex workflows out of simpler pieces. Furthermore, each task is asynchronous, so it is possible for many tasks with no shared dependencies to operate in parallel.

Each task, as you can see in the prior code, is comprised of a selection of a series of source files (src()), optionally performing some additional processing on each file (via pipe()) and then writing those files to a destination path (dest()). If no additional processing is specified (as in the prior example), Gulp will simply copy the files that match the wildcard pattern. The beauty of streams, however, is that one can execute any number of transformations before the final data is saved. So, the workflows can become very complex.

Now that you've seen a simple task, let's get into some more complicated tasks in the next section.