Month: March 2014

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.

Grab your package.json and gulpfile.js files, ready made for your convenience. A special mention has to go to Myke for his SASS error display code in the gulpfile.js. – More on that later.

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.

Install Complete

Step 4 – Configure your project

Open up gulpfile.js on Line 14, you configure your SASS directories you wish to watch. You may only want one, or ten, its all in JavaScript go mad.

Configure SASS

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.

watch: '_scss/Site/**/*.scss',

The master sass file, we compile from this file.

sass: '_scss/Site/site.scss',

Output folder

output: './www/app/View/Themed/Site/webroot/css',

Output file name

name: 'site.css',

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.

Watch JavaScript files for changes

watch: '_assets/admin/*.js',

Output folder

output: './www/app/View/Themed/Admin/webroot/js/',

Output filename

name: 'admin.js',

Output filename minified

nameMin: 'admin.min.js'

This creates two version of your JS, a minified and non-minified, good for debugging.

Why Sass? Because its better than CSSWhy JS concatenation? Because fewer requests are better, and minifiying is the way to go.

All set!

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.

What happened?We were transferring registrars, and the transfer seemed to get stuck in no-mans land. It seems the domain was in a transfer out status, so no reminder emails were sent and the domain didn’t appear in the control panel.
I managed to get through to UK2 second line support and they swiftly sorted it out. If it happens again, know to ask for second line straight away.