An introduction to gulp.js

gulp.js is the new build system on the block. In this post, I hope to give you a brief overview of gulp, and talk you through how to create a simple gulpfile to compile some LESS. I do assume that you already have npm installed on your system.

Installing gulp (new gulp project)

  1. Open terminal, and navigate to the root of your project.
  2. Create package.json with an empty JSON array ({}) and save.
  3. Enter npm install gulp --save
  4. That's it! If you check your package.json, you'll see that it now includes gulp (you can change the gulp version number here, if required).

Using git? You should add the node_modules/ directory to your .gitignore before you commit.

Installing gulp (existing gulp project)

If you're working in a team environment (and even if you're not), you should be using some form of version control. All you need to do, is ensure your package.json file is committed. Then all your team members need to do is navigate to the projects root (in terminal), and run npm install.

Compiling LESS

I'm going to assume that we want to compile <project_root>/main.less to <project_root>/main.css.

gulp.js does very little by default, so for every task, we will need to add additional modules. The one for LESS is called gulp-less, so lets install this first.

  1. Open terminal, and navigate to the root of your project.
  2. Enter npm install gulp-less --save
  3. Done.

Now we're making some progress. It's time to move onto writing the gulpfile!

  1. Create a file called gulpfile.js and open it in your favourite editor.

  2. At the top of this file, we need to load the the gulp modules and assign them to variables (so we can use them).

     var gulp = require('gulp'),
         less = require('gulp-less);
    		
    

You'll need to add a line for each module you add via npm.

  1. Next, we need to create the task. We'll call the task "styles", and the following code will need to be below the code we added in step 2.

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

This code defines the task that gulp will run. As you can see, it's called styles, you can call your tasks anything you want.

  1. Now, lets write the code that'll actually compile the LESS. This code will go in the function above.

     return gulp.src('main.less')
         .pipe(less())
         .pipe(gulp.dest('.'));
    

Here, we're telling gulp to use main.less as the src (source) file. Pipe the contents of that file to less() (remember we set the less variable to require('gulp-less') in step 2). Finally, we're piping the output from the less() to the destination .. Gulp will automatically use the original filename, but will use the correct extension. So in this case main.css.

Remember: Paths in gulp are relative to gulpfile.js.

  1. And that's it. When you run gulp styles from your <project_root>, you should see output similar to the following. file

You should also notice a main.css file with the compiled CSS.

Hopefully, I've managed to give you brief introduction into gulp.js. If you have any questions, post a comment below.