How to Install Gulp.js on Windows

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

gulp-2x 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.

logo-235e394c

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',

JavaScript-logo

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 CSS
Why 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.

Updated 02/04/2014 Fixed some errors in package.json  – Thanks to Sam

mz-hosting.com is back up

mz-hosting.com is back up. Sorry for the inconvenience. You can continue download the Prestashop Amazon payments module free for European users.

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.

Prestashop 1.6

Prestashop 1.6 has been released!

I’ve upgraded my demo shop –http://mz-design.co.uk/testshop1.5/ to version 1.6 which does somewhat contradict the domain name. First problem though!

Prestashop 1.6 needs more memory for the backend to function. I have my FCGI PHP set to a default maximum of 32mb which gets exhausted. You will get an error such as..

Allowed memory size of 33554432 bytes exhausted (tried to allocate x bytes)

You will need to increase the maximum memory size, 32mb is quite low now-a-days. Increasing it to 64mb works nicely.

The admin interface is very nice, responsive and modern. A much needed upgrade. Its very rare for an open source eCommerce solution to have such a nice interface.

I will be testing all modules and making sure they all work nicely on Prestashop version 1.4 – 1.6

ifvisible.js

Some cool code to pause videos, ajax requests, and other things unnecessary when the page is inactive. ifvisible.js – Such as when the user is on another tab or goes AFK

Easy to hook onto events such as going idle and waking up. Would definitely recommend for projects, great to reduce processing overheads and lower bandwidth use when ajax calls are not needed.

Post2China Beta Signup available

I’ve just launched Post2China. Its online for beta customers now. If you’d like to be involved signup and you’ll get a login shortly.

Post2China is a service for UK based shops and ecommerce sites who’d like to post their items to China.  Cheap rates and no need to worry about the language, for more info head over to the site.

It’s built with Angular JS, Node.js and Express.js. You’ll only get to see the fancy cost calculator when you login, so you’ll have to signup or wait for the public launch.