Tools & Generators

Build Tools: Gulp Set Up

The idea behind build tools is to automate as much as possible the mundane and repetitive tasks in the production of software (such as a website).

Such tasks can include things like:

  • compiling SASS or LESS files into CSS on save
  • compressing images
  • reloading pages in browsers on save
  • adding vendor prefixes to CSS
  • linting (code checking) of JS, CSS, HTML, etc
  • minifying and concatenating JS files
  • uploading files to a test server
  • etc

The build tool I am going to focus on in this exercise is called gulp.js.

How to Set up Gulp on Your Own Computer

Gulp is built on Node.js and npm (node package manager), so to make gulp-based workflows on your own computer (ie not a lab one), you need to get both installed on your system.

You can get Node.js here.  Instructions for installing gulp on your own computer are available here.

How to Set up Gulp in a Langara Lab

In the B014 and A247 labs, Node.js is already installed. However, the gulp instructions in the link above will not work, because you do not, as a student, have admin permissions on a lab computer, and npm (node package manager) is installed in an area of the computer you are not allowed to write to.

However, by changing the npm default directory to one that you do have write permissions for, we can make it work.

To do that, follow these steps exactly. The bolded parts are what you will type. DO NOT COPY AND PASTE FROM THIS PAGE (the quotation marks will be wrong).

  1. Open Terminal (command-space, then type terminal)
  2. Make a directory for global installations (the period makes it “invisible”)
    mkdir ~/.npm-global
  3. Configure npm to use the new directory path:
    npm config set prefix ‘~/.npm-global’
  4. Open or create a ~/.profile file:
    nano ~/.profile
  5. Add this line to the .profile file you are editing:
    export PATH=~/.npm-global/bin:$PATH
  6. Exit nano by pressing control-o to save, then command-x to exit
  7. Update your system variables:
    source ~/.profile



npmjs Intro to Gulp

The wikipedia page on gulp is nice and concise :

Smashing Magazine article on Gulp