I have a question, I want to start using GruntJs to help automate as much as possible and I was wondering if there were any good tutorials / guides / courses etc.

 

I've looked on Treehouse but couldn't find anything.

 

I've Google'd it and found a couple of bits, but I was wondering if there was a hidden gem that I've missed.

This is a good introduction by Chris Coyier https://css-tricks.com/grunt-people-think-things-like-grunt-weird-hard/

 

It will help if you have a good handle on Javascript, especially objects which is how most of your Gruntfile is structured.

Edited July 6, 201511 yr by rbrtsmith

Thanks for that, I'll will take a look and see how I get on

Leading on from that rbrtsmith which is better, Grunt or Gulp?

It depends, Gulp runs faster, but Grunt has a larger number of available tasks. To be honest in my machine Grunt runs in around 2-3 seconds max. If you're using Sass then the bottleneck is actually more the Ruby Sass compiler rather than Grunt/Gulp, so if you're after a speed increase look to something like libsass which is a C++ compiler.

 

Some say Gulp is easier to read, for me the readability is about equal. I don't think it matters really which one you use. just go with whatever you prefer.

Edited July 6, 201511 yr by rbrtsmith

I'd also look into Browser Sync if you want automatic browser re-loading, instead of Live Reload. It's significantly faster, and comes with more features like remote debugging, network throttling ect. You can also use your browser dev tools to debug on remote devices. The changes sync across all browsers on any device automatically. There's a clip of that here https://twitter.com/Browsersync/status/577763901946867712.

Jack did you know you can simulate network throttling within Chrome dev tools? Never had an issue with speed with live reload to be honest, but the remote debugging sounds good

Jack did you know you can simulate network throttling within Chrome dev tools? Never had an issue with speed with live reload to be honest, but the remote debugging sounds good

 

Yeh I've seen it in Chrome. There's also something in Mac system preferences that does it. I've used that a few times.

 

For me Live Reload would take a few seconds to refresh the screen, Browser Sync is instant. It's all the other stuff that comes with it though, like being able sync form field values across all devices, it makes testing a breeze.

 

Yeh I've seen it in Chrome. There's also something in Mac system preferences that does it. I've used that a few times.

 

For me Live Reload would take a few seconds to refresh the screen, Browser Sync is instant. It's all the other stuff that comes with it though, like being able sync form field values across all devices, it makes testing a breeze.

 

That last part sounds good

Thanks,

 

I'm probably going to go with using grunt if there is more that I can automate. performance isn't an issue.

Thanks,

 

I'm probably going to go with using grunt if there is more that I can automate. performance isn't an issue.

 

I'd say it's about equal now. There didn't use to be as many tasks for Gulp, but now you will generally find everything that you can on Grunt. I've used Gulp for well over a year and haven't ran into a situation where something isn't available.

 

It's more of a preference thing now, people just use whatever they like the look of, or are used to developing with. Both are so similar that there's not really much of a difference between the two.