A Mr Stewart Doxey requested a tutorial on installing Gulp.js on Windows.
Step 1 – Install Node.js
Head on over to http://nodejs.org and click install – this should use magic to figure out what OS and version.
Step 2 – Install Gulp.js
Open command prompt – (run cmd) then type ‘npm’ – if there is no error you’ve installed Node.js correctly yay! Otherwise make sure you close and reopen command prompt if it was open during install. Or try rebooting – reinstalling, the usual.
Now type ‘npm install -g gulp’ this will install Gulp.js globally on your system. It will enable you to run the ‘gulp’ command in your command prompt.
You will now need to go ‘npm install gulp’ to locally install Gulp to your project root directory. You’ll have to do this for each new project where you wish to use Gulp.
Type ‘gulp’ it should say no gulpfile found this means its installed correctly.
Step 3- Setup your project
You need two files in your project, package.json and gulpfile.js. If you doing a Node.js project already you know about package.json, otherwise read on.
What is package.json? It’s a file that tells npm what dependencies your code needs. It allows npm to install automatically all dependencies.
npm works on a system of not including your dependencies in your version control. So add node_modules to your .gitignore file. Simply add ‘node_modules’ to the bottom.
Plop these two files in the root of your project. Open your command prompt cd your way to there. Now run ‘npm link’. This will scurry away installing all your needed dependencies and using magical symlinks to link them into your project.
Step 4 – Configure your project
You must already have ruby-sass installed on your computer! if you don’t have this, you’ll need to google how to install ruby sass on Windows. I may make a tutorial on how to do that another time.
The directory to watch – in this example we are watching all files AND sub directories in the _scss/Site/ directory.
The master sass file, we compile from this file.
Output file name
Configure JS concatenation
We’re off to line 28 (in the original file, duh) to change the JS settings. Again you can watch multiple directories and output to multiple places.
Output filename minified
This creates two version of your JS, a minified and non-minified, good for debugging.
Why Sass? Because its better than CSS
Why JS concatenation? Because fewer requests are better, and minifiying is the way to go.
Step 5 – Run it!
You should be able to run ‘gulp’. It should then go off and start watching all your files.
All new files you create are automatically watched! – This is why we are using gulp-watch instead of the built in watch script. No need to restart gulp.
SASS errors will be displayed in your CSS, with a background colour and the error message. – Just refresh the page and you’ll see the error quickly and easily.
This script includes live reload so download the live reload extension to Chrome and once Gulp is running click the icon, it’ll change a tiny amount, so you’ll end up clicking it a lot and turning it on and off. But when its actually synced your SASS changes will auto load into your browser as you press save. Pretty cool.
You may notice that the example gulpfile.js file has the directory paths for CakePHP setup. If you’re using that, lucky you!
Why Ruby Sass? Why not libsass? Alas, libsass cannot compile bootstrap or inuit. Once it can I’ll be happy to remove the ruby dependency.
Updated 02/04/2014 Fixed some errors in package.json – Thanks to Sam