Categories
Tools & Generators

Build Tools: npm and gulp.js 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 or application).

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, PHP, etc
  • minifying and concatenating JS files
  • uploading files to a test server
  • etc

There are a number of widely used build tools, including Gulp, Grunt, Webpack, and others. The one I am going to focus on in this exercise is gulp.js.

How to Set up Gulp on Your Own Computer

Gulp is built on node.js and installed via npm (node package manager, which is installed as part of the node.js intallation). Therefore, to make gulp-based workflows on your own computer (ie not a lab one), you need to get node.js installed on your computer.

You can get node.js here.

Instructions for installing gulp on your own computer are available here.

How to Set up Gulp on a Lab Computer

In the Mac labs at Langara and Emily Carr, 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) tries to put some installs into an area of the computer you are not allowed to write to.

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

To do that, follow these steps exactly.

First open Terminal.

Type or copy the commands listed below. Ignore the comments (they start with a # symbol).

At the end of each instruction, please return.

# Make a directory for global installations that you are allowed to write to.
# The dot in the file name makes it invisible
mkdir ~/.npm-global

#Configure npm to use the new directory path:
npm config set prefix '~/.npm-global'

#Open or create a ~/.profile file
nano ~/.profile

# Add the new directory to the .profile file you are editing:
export PATH=~/.npm-global/bin:$PATH

# Exit nano by pressing control-o to save, then control-x to exit

# Update your system variables:
source ~/.profile

source: https://docs.npmjs.com/getting-started/fixing-npm-permissions

 

npmjs Intro to Gulp

The wikipedia page on gulp is nice and concise : https://en.wikipedia.org/wiki/Gulp.js

Smashing Magazine article on Gulp