Getting Started With Gulp.js


guide to gulp.js

In this article we’ll look at the basics of using Gulp — from installation to basic syntax and a couple of examples. By the end of the article you should be able to find, install and use packages that others have created for Gulp to compile SASS, optimize images, create sprites, concatenate files, and more!

Installing Gulp

Don’t worry, installation is very easy. We’ll need to use the terminal in OSX and Linux, or the command prompt for title=”View all articles about Windows here”>Windows. I’ll be referring to it as Terminal from now on.

Open it up and type npm -v and press enter. If you see version number displayed you have Node installed already — this is a dependency for Gulp.

If you get a “command not found” (or a similar error), head on down to the Node.js downloads page and select the appropriate package for your system. Once installed, the npm command will be available in the terminal.

Installing Gulp is just as easy. Paste the following command into the terminal, that’s it:

npm install --global gulp

This will install the Gulp command which will be available globally on your system.

Adding Gulp To A Project

Gulp is now installed, but we’ll need to add it to each project we need it for, separately. Create an empty folder now and navigate to it in your terminal. While in the folder for the project, use the following command:

npm install --save-dev gulp

This should create a node_modules folder and an npm-debug.title=”View all articles about log file here”>log file in your project folder. These are used by Gulp to do its thing to your project, you don’t need to think about them at this stage.

The reason we need to add Gulp to each specific project is that each project has different requirements. One may call for SASS, another for Less. One may use Coffeescript, the other may not, and so on.

The Gulpfile

The Gulpfile is where the magic happens, it’s where you define the automations you require and when you want them to happen. Let’s create an empty default task by creating a file named gulpfile.js and pasting the following code into it.

var gulp = require('gulp');

gulp.task('default', function() {
  // This does nothing for now, we'll add functionality soon
});

Once this file is saved you can go back to your terminal and run the gulp command on its own. Gulp detects which project it is in and runs the default task — the one we just created. You should see something like this:

Freebie Release: 15 Valentine’s Day Patterns by Freepik

Nothing really happens here, since the task is empty, but it is working fine. Now, let’s get going with some proper examples!

Copying A File

This is a boring one, I’ll admit as much, but it will help you understand what’s going on easily.

In your project folder create a file named to_copy.txt , and a folder named dev. Let’s go into our Gulpfile and create a new task named copy.

gulp.task('copy', function() {
  return gulp.src('to_copy.txt')
    .pipe(gulp.dest('dev'));
});

The first line defines a task that is named copy. Within this we use gulp.src to specify which files we are targeting with this task — in this case it is a single file named to_copy.txt.

We then pipe these files to the gulp.dest function which specifies where we want to put these files — I’ve used the dev directory.

Go back to your terminal and type gulp copy to run this task, it should copy the specified file to the specified directory, something like this:

Freebie Release: 15 Valentine’s Day Patterns by Freepik

The pipe command is at the heart of Gulp. It is an efficient way to move data between commands. The src command specifies the files which are piped to the dest command. In more complex scenarios we would pipe our files to other commands before specifying a destination.

You should also be aware that the source can be given as a single file, or multiple files. If we have a folder named production and we want to move all files from our development folder into it, we could use the following command:

gulp.task('copy', function() {
  return gulp.src('development/*')
    .pipe(gulp.dest('production'));
});

The star character will match anything within the directory. You could also match all files within all subdirectories, and do all sorts of other fancy matching. Take a look at the node-glob documentation for more info.

Compiling SASS

Compiling a stylesheet out of SASS files is a common task for developers. It can be done with Gulp pretty easily, we’ll need to do some preparation though. Apart from basic commands such as src, dest and a number of others, all functionality is added via third party addons. Here’s how I go about using them.

I type SASS Gulp into Google, the first result is usually what I need, you should find the page for the SASS package. It shows you how to install it (npm install gulp-sass). Chances are you’ll need to use sudo to install it as an administrator, so it will probably be (sudo npm install gulp-sass) .

Once done, you can use the syntax the package dictates to compile your code. To do this, create a file named styles.scss with the following content:

$primary: #ff9900;
body {
    background: $primary;
}

Now create the following Gulp task in the Gulpfile.

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

Before running the command, don’t forget to ‘require’ the package at the top of the Gulpfile like this:

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

When you run grunt sass, all files with the scss extension will be piped to the sass function, which will convert them to css. These are then piped to the destination function which places them in the css folder.

Watching Files And Folders

So far this is all handy, but we still need to type a command each time we want to run a task, which isn’t very efficient, especially when it comes to stylesheet changes. Gulp allows you to watch files for changes and run commands automatically.

In the Gulpfile, create a command named automate which will use the watch command to watch a set of files for changes, and run a specific command when a file changes.

gulp.task(‘automate', function() {
    gulp.watch('*.scss', ['sass']);
});

If you type gulp automate into the terminal, it will start and finish the task, but it won’t return to the prompt because it is monitoring for changes. We’ve specified that we want to watch all scss files in the root directory and if they change, we want to run the sass command that we’ve set up previously.

If you now change your style.scss file it should be compiled to the css file within the css directory automatically.

Freebie Release: 15 Valentine’s Day Patterns by Freepik

Running Multiple Tasks

There are many situations where you might want to run multiple tasks. When watching your javascript folder you may want to compile concatenate two files and then proceed to minify them. There are two ways you can get this done.

If tasks are related, I like to chain them. A good example would be the concatenation and minification of javascript files. We first pipe our files to the concat action, then pipe them to gulp-uglify, then use the destination function to output them.

If tasks are unrelated you could call multiple tasks. An example would be a task where we want to concatenate and minify our scripts and also compile our SASS. Here’s he full Gulpfile of how that would look.

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var sass = require('gulp-sass');

gulp.task('scripts', function() {
  gulp.src('js/**/*.js')
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('.'))
    .pipe(uglify())
    .pipe(gulp.dest('.'))
});

gulp.task('styles', function() {
  gulp.src('/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./css'));
});

gulp.task('automate', function() {
    gulp.watch(['*.scss', 'js/**/*.js'], ['scripts', 'styles']);
});


gulp.task('default', ['scripts', 'styles']);

If you type gulp scripts into the terminal, all javascript files within the js directory will be concatenated, output to the main directory, then uglified and saved to the main directory.

If you type gulp sass, all your scss files will be compiled and saved to the css directory.

If you type gulp (the default task), your scripts task will be run, followed by your styles task.

The gulp automate task watches multiple folders for changes in our scss and js files and will perform both tasks we’ve defined, if a change is detected.

Overview

Using Gulp is not difficult, in fact, many people prefer it over Grunt because of its simpler syntax. Remember the steps to take when creating a new automation:

  • Search for plugin
  • Install plugin
  • Require plugin in your Gulpfile
  • Use the syntax in the documentation

The five commands available in Gulp (task, run, watch, src, dest) are the only ones you need to know, all third party addons have great documentation. Here’s a list of some things I use which you could get started with right now:

One Response

  1. DeCrys

Leave a Reply