Victor Queiroz

gulp.js: Using It for the First Time

gulp javascript build-tools

Hail, brothers! Today I’m here to introduce gulp.js, the task runner that works exactly as its name suggests — a GULP. It’s fast, efficient, simple to use and configure, and today you’ll see why it’s way better than Grunt.

My name is gulp

Installing gulp.js

We install gulp via npm:

npm install -g gulp

After that, just proceed to the next step without any fear of the truth.

Configuring the gulpfile.js

Just like Grunt, with gulp you need to create a file called gulpfile.js or Gulpfile.js in the root directory where you want to run your tasks. The first thing you need to do is… Okay! I’ll let you guess:

a) Import gulp

b) Export a function with a gulp parameter using Node.js’s module.exports to later be picked up by gulp-cli

That’s right, option a! Just import gulp like this:

var gulp = require('gulp');

Creating a task

Creating a task in gulp is very simple, because unlike Grunt, we don’t have to shove all tasks into a massive Object — we have gulp.task. Take a look at the syntax:

gulp.task('taskName', function () {
  // operations here
});

Understanding gulp.js

gulp.js is a Node plugin that is reeeeeally simple — really simple, SERIOUSLY. If we read the source code, we’ll see several functions. The most commonly used ones are gulp.task, gulp.src, gulp.dest, and gulp.watch. We already know what gulp.task does, so I don’t think there’s any need to explain that. As for the rest, I’ll explain what each function does below:

gulp.src(paths[, options])

As we saw in the gulp.js source code, gulp.src is simply a wrapper for one of the functions in vinyl-fs. It works as follows: it receives a String or an Array through the paths parameter (with regex support), and you can also pass some options through the next parameter, which should be an Object. Check out the options you can add here: https://github.com/isaacs/node-glob#options.

gulp.watch(paths, tasks)

Used to watch files. Every time any of those files change, all tasks (which must be an Array, even if it contains only one task) are executed.

gulp.dest(path)

Simply directs the file being read from the stream to the specified path. (We’ll understand this shortly.)

Example

This is the best part — EXAMPLES of tasks. Here we can see just how simple the task runner is.

Compiling our SASS styles

First, we install the plugins we’ll use (all plugins below are npm registry packages):

We import our dependencies at the top of our gulpfile.js, which will look something like this:

var gulp = require('gulp');

var sass = require('gulp-sass');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');

We create a new task:

gulp.task('stylesheets', function () {
});

Now that we have a task, let’s use gulp.src and pass the paths we want to put into the stream:

gulp.task('stylesheets', function () {
  gulp.src('src/scss/**.{scss,sass}')
});

From here on, we start using .pipe() right after gulp.src(), and we just need to attach our plugins inside the pipe — and that’s it, they’re running. See how simple it is:

gulp.task('stylesheets', function () {
  gulp.src('src/scss/**.{scss,sass}')
    .pipe(sass())
    .pipe(cssmin())
    .pipe(rename({
      basename: 'style',
      suffix: '.min',
      extname: '.css'
    }))
});

Now all we need to do is add gulp.dest at the end to give our new file — which is currently wandering alone in our computer’s temp folders — a destination:

gulp.task('stylesheets', function () {
  gulp.src('src/scss/**.{scss,sass}')
    .pipe(sass())
    .pipe(cssmin())
    .pipe(rename({
      basename: 'style',
      suffix: '.min',
      extname: '.css'
    }))
  .pipe(gulp.dest(path.join(__dirname, 'public', 'css')));
});

Since we used gulp-rename, we don’t need to worry about the file name.

Well, I hope you understood that gulp is way better than Grunt everything. Any questions, complaints, etc. — leave your comments and see you, buddies. ;)

Comments