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
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.
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).
- Open Terminal (command-space, then type terminal)
- Make a directory for global installations (the period makes it “invisible”)
- Configure npm to use the new directory path:
npm config set prefix ‘~/.npm-global’
- Open or create a ~/.profile file:
- Add this line to the .profile file you are editing:
- Exit nano by pressing control-o to save, then command-x to exit
- Update your system variables:
The wikipedia page on gulp is nice and concise : https://en.wikipedia.org/wiki/Gulp.js