Writing Your First Gulp Task

The first step to using Gulp is to require it in the gulpfile.

var gulp = require('gulp');

The require statement tells Node to look into the node_modules folder for a package named gulp. Once the package is found, we assign its contents to the variable gulp.

We can now begin to write a gulp task with this gulp variable. The basic syntax of a gulp task is:

gulp.task('task-name', function() {
  // Stuff here
});

task-name refers to the name of the task, which would be used whenever you want to run a task in Gulp. You can also run the same task in the command line by writing gulp task-name.

To test it out, let's create a hello task that says Hello Zell!.

gulp.task('hello', function() {
  console.log('Hello Zell');
});

We can run this task with gulp hello in the command line.

$ gulp hello

The command line will return a log that says Hello Zell!.


Gulp tasks are usually a bit more complex than this. It usually contains two additional Gulp methods, plus a variety of Gulp plugins.

Here's what a real task may look like:

gulp.task('task-name', function () {

  return gulp.src('source-files') // Get source files with gulp.src

    .pipe(aGulpPlugin()) // Sends it through a gulp plugin

    .pipe(gulp.dest('destination')) // Outputs the file in the destination folder

});

As you can see, a real task takes in two additional gulp methods — gulp.src and gulp.dest.

gulp.src tells the Gulp task what files to use for the task, while gulp.dest tells Gulp where to output the files once the task is completed.

Let's try building a real task where we compile Sass files into CSS files.

Click here for For next Step:  "Preprocessing with Gulp"

Table of Contents:  "Table of Contents to learn"