hi chris, this post is super helpful, but I’m getting tons of errors when I run ‘npm install -g grunt-cli’ initially, so that when I try to run the ‘grunt’ command i just get the ‘command not found’ response. Any ideas why I’d be having this problem?

Thanks for this Chris! I had heard of Grunt but hadn’t given it much thought, mainly I didn’t know why I needed it. After reading this I have just added it to the ever-growing list of things I want to learn more about. Do you think there would be a way to throw some Jekyll build automation in there?

Thanks for the time and thought put into this article Chris. I’ve found it immensely helpful. Really appreciate it.

If anyone else was like me, typing out the commands verbatim and getting syntax errors, or even copying & pasting the commands and STILL getting syntax errors… you’re missing commas in a couple places. Apparently, Chris either failed to mention this, assumed everyone knew to do so, or the syntax has changed with new grunt releases. Idk. But here’s a stack overflow article explaining where to add the commas.

http://stackoverflow.com/questions/21590693/unexpected-identifier-error-in-grunt-js-file

Chris, you sir are an absolute dude :D
I was one of those apprehensive about Grunt before but I’ve got it doing all sorts now! A great, well written article.
Many thanks :)

This is the first time I could follow a tutorial on Grunt. Other tutorials assumed to much.
I have wanted to use LESS for a while now, but just seemed like an extra step but now that I can automate I think I will start learning.

Just curious how one handles race conditions in a grunt workflow, i.e. if I’m minifying assets and possibly renaming them for cache-busting how do I deal with visitors that might be requesting assets that aren’t fully in place until after the build is finished?

I thought I read of one person (forgot to bookmark) who symlinks a new build directory to the web root upon completion, so he can easily rollback just by symlinking to a previous build dir. Is there a plugin that can handle this?

Awesome post, thank you!!

I had barely started and got stuck on npm install. Definitely check this out if you get install errors: http://stackoverflow.com/questions/16151018/npm-throws-error-without-sudo

@Owen

Both yes and no.

There are a lot of grunt plugins that will help with various commands, and you can create your own tasks/plugins to do the commands that are explicitly command line. However, depending on what the exact usage is, you will probably still need to do something.

Look over the various plugins on http://gruntjs.com/plugins and see what can be found there. From the top of my head, you’ll want to look at contrib-coffee, probably contrib-concat for cat, shell for any commands that are native to the command line (such as ls), maybe git for your git commands.

In the end, if you really need to use actual shell commands, then no, it will not work equally on *nix and non-*nix systems, but if it can be mimicked by node scripts and such, then yes, it probably should be.

Personally I use GruntJS as a way to replace all the shell scripts that I tend to gather, but I also don’t work in a non-*nix environment.

Fantastic article Chris! I’ve also written a few Grunt related articles which people might find interesting/helpful:

A beginner’s guide to Grunt: http://blog.mattbailey.co/post/45519082789/a-beginners-guide-to-grunt
Grunt – Synchronised testing between devices: http://blog.mattbailey.co/post/50337824984/grunt-synchronised-testing-between-browsers-devices
Front-end process – Flat builds and automation: http://blog.mattbailey.co/post/52949597525/front-end-process-flat-builds-and-automation

It’s not so easy to get grunt up and going from a designer stand point but this article helps a lot! Thanks Chris!! This man is everywhere :)

I’m using apps like prepos (kind of codekit for poor windows users like me) that do a couple of things listed in the post but I guess adding Grunt to my workflow can only improve my deployment process.

One thing I find frustrating is that when I get comfortable with a tool the very next day come out a new super-duper tool better than the last one.

Anyway great post Chris!

@RaymondCamden you should use grunt-usemin to put the proper resources links in your dist HTML. A few comments in the source HTML will tell it what has to be changed, the documentation is pretty clear.

As usual Mr Coyier, another great article. It’s really helped me get to grips with Grunt, and I learnt a fair few other things along the way. I doth my hat to you sir, I really do.

You heard my class Chris! Great explanation and now I have another skill, many thanks for it. I wish official grunt documentation was as easy to follow as this one. Thanks man

Just one problem I had, when running grunt again and again, it kept on increasing the size of production.js file meaning contents were being appended everytime.

Other thing with watch stuff in place, I modified a js file and no tasks ran automatically :(

Chris Coyier, you are my hero.

@Brice: when you concatenate all the files you output them as “builtJs.js” or something (jquery, carousel & your js all together) then point your html script link to the builtJs- just one link. Building again updates buildJs.js and you don’t touch the HTML

@Owen: “The tasks typically run unix commands like git, cat, ls, coffee, and naturally the node functions .. exec all over the place.”

You should definitely be using Grunt- exec all over the place is a bad sign- there are node.js apis to do most of this. Alternately you could just update your cakefile to leverage the node apis (see: http://nodejs.org/api/ ) and keep using cake if it works for you. Grunt has the benefit of lots of plugins

Author: The gruntfile you link to as “the complete file” does not contain most of what’s in this article. Did you update the boilerplate gruntfile & remove stuff? Might be useful to link to the old, full version if so.

Chris you make Grunt not too difficult to understand, though I still find it too difficult to remember all the JSON settings. One thing which I simply don’t get is that if you get at great Gruntfile.js which you then need to reuse, it seems that Grunt cannot it self:
a) Download the required plug-ins, why?
b) Store the plug-ins somewhere globally in a shared folder. Do you really need to have the node_modules in each project you create? Seems not so smart – but I may not be getting it right :-)
/Sten

I know this is a relatively old post but you really don’t need Grunt to do all these things. With all the time spent configuring Grunt, you probably could have just written out the commands and created a Makefile.

For all those windows people struggling with no npm command, I did a registry hack.

Gives you a right click ‘open node.js command window here’ option.

Enjoy http://bit.ly/K8qV8A

Sten,

You can download the plugins with a single command if you have made sure to use the —save-dev flag when you first install each plugin.

The code you need is :

npm install.

As to your second question, I personally feel that storing these node modules makes sense because there will be instances where some projects require a helluva more modules compared to others. Since installing the modules are so simple, and you can gitignore them effectively, there really isn’t any problem for me.

Hope this helps!

By the way, I’ve expanded on Chris’s tutorial to allow live reload to work with MAMP PRO. Check it out if you’re interested at http://www.zell-weekeat.com/wordpress-with-grunt/.

Any thoughts on grunt-contrib-compass? I use many of the built in features of compass in my sass. and would like to still use them without writind a bunch of new mixins

“Grunt is one of those fancy newfangled things that all the cool kids seem to be using but at first glance feels strange and intimidating. I hear you. This article is for you.”

Yes!! Chris, this article is for me. I feel more alleviated knowing I’m not the only one that sees those garish tools with fancy names. Thank you!

That gave me a good perspective of the use of Grunt. I’ll give it a try on my next project, but I think the command line is too bureaucratic, you have to memorize several commands, install several things – and it’s not clear to me what is the utility of those directories, like @node_modules@ (absent on the github project).

As an idea for the next articles, I miss a better explanation of a workflow using Yeoman – one that goes beyond the simple running of commands, one that installs then interacts with the files in a real project, where to start, what commands should be run (the essential ones, not the theatrical ones used to impress your boss)

Thanks for this awesome guide! I have probably been needing Grunt for a long time, but until I stumbled upon this guide never dared to approach it. 5/5 walkthrough.

Thanks for this article, it kickstarted my usage of Grunt.

This is great. Thanks, Chris!

Grunt is good but these all can be done in Rails asset pipeline too.

Chris didn’t explicitly mention this in the article, and maybe it should have been obvious, but you need to run @grunt watch@ to actually begin watching files. This tripped me up big time.

I was initially getting frustrated with having to add sudo along with the appropriate password whenever I attempted to do an npm install which goes hand in hand with Grunt. However I found a good article on StackOverflow which helped me out a great deal. I’m not a confident command line user yet however I was able to change the permissions using the following commands:

sudo chown -R `whoami` ~/.npm

This basically changes recursively the ownership of the folder so that non root administrators dont need permission to access it.

You may also need this

sudo chown -R `whoami` /usr/local/lib/node_modules

It stopped the pesky sudo need from getting in the way for me at least.

Absolutely helpful. You made my day. Thanks, Chris.

Hey Chris, great article … I love your tutorials, I’ve been listening to your podcasts / videos for a long time. Not related to grunt, but what app or process do you use to create your animated screen caps like the “drag-folder.gif” in this article? …

Thanks in advance for your answer, Chris!

Thanks for this writeup,
I’ve checked out Grunt before, but couldn’t always understand their documentation & getting started. This is the first understandable guide to grunt I’ve seen!

I’d rather tell people to learn rails and its assets pipeline…
Less focus but you get more in hands that just this complex — yet powerful — compiler which is grunt

Sorry – bit late in the day…

One claimed advantage is to reduce CSS & JS requests and I know Google favours sites which do this, but why?

If a browser already has a socket open to a site and the server is using a thread model for requests, there should be little extra overhead in using small CSS and JS snippet requests.

For a site with a large number of pages, it seems a distinctly bad idea to concatenate the CSS and JS – as it results in excessive duplication in the cache and overall slower load times; much better to keep things separate and the browser can then cache them quickly…

Thanks for the post Chris!

I was getting an error that said something about Bus 10 error when running the watch command. I ended up fixing it by upgrading to the latest version of Node.

Great tutorial. You definitely just opened my eyes!

P.s. – Here is my finished Gruntfile if anyone is interested. http://d.pr/f/B4m0

Thanks for this. I was intimidated a lot by Grunt and command line but now I think I’m ready to jump into this head first!!

For those who are especially newbies, how does one create a .json file? I just created a blank document with sublime text and saved it out as .json (with the code included in the snippet above), but terminal threw an error and asked me something to the effect of – is this really a json file or just a .js file renamed?

Thanks for the post Chris. I’m already working with Grunt but I’ve still found something new following your article =)

I’m a bit confused about command-line usage.

I’m building a fairly complex system and use coffeescript, thus cake for builds. The tasks typically run unix commands like git, cat, ls, coffee, and naturally the node functions .. exec all over the place.

Does grunt replace the unix command line? I.e. if I convert to grunt, will it be a bit more portable because I’ll no longer need the unix/bash cli? .. would work equally on Mac (unix) and Windows (non-unix)

Check out yeoman as well. Among other things, it’s is a standardized workflow and set of conventions to use on grunt projects. There’s a lot of grunt knowledge concentrated in yeoman generators.

Chris, I am getting a huge nerd crush on you! I have been watching your videos on CSS-Tricks and reading your articles for a couple of days now, and am perpetually amazed at how much information you are able to squeeze into a relatively short period of time, and most of all, you explain things at the exact level that works for me, anyway—somewhat complex but allowing for the learning curve.

Thank you thank you thank you!

This tutorial was awesome Chris. Thanks !

Excellent job Chris ! For the people who say i’ll stick to Codekit. It’s ok ! Codekit is excellent ! But Grunt give you more possibilities than codekit ! But yep Codekit is easier to “setup” :)

Chris, this is very good article to get started with grunt. I tried to use grunt once but was unable to understand the package file gruntfile etc. This article explains everything how to get started. Keep it up.

Thank you! It was great help for me! Just in the first code of Gruntfile.js uncomment the “grunt.initConfig({” because grunt throws an error :)

Excellent, excellent article.

Only factual error I found in there was that you do actually need to know C++ to use Microsoft Word.

Other than that – pure gold!

Nice article, made Grunt seem less intimidating :) I saw that you said

Are they all organized in one place, configured to run automatically when needed, and shared among every single person working on that project? Unlikely, I’d venture.

If all you need is asset pipelining (Jade to HTML, LESS/SASS to CSS, Coffeescript to JS), then HarpJS can be pretty useful.

PS: Forgive my horrible Textile skills, I’m more familiar with Markdown :)

I’m a bit confused about command-line usage.

I’m building a fairly complex system and use coffeescript, thus cake for builds. The tasks typically run unix commands like git, cat, ls, coffee, and naturally the node functions .. exec all over the place.

Does grunt replace the unix command line? I.e. if I convert to grunt, will it be a bit more portable because I’ll no longer need the unix/bash cli? .. would work equally on Mac (unix) and Windows (non-unix)

Thank you. This was extremely helpful. I had been thinking about trying out grunt, but kept putting it off. I think this will greatly speed up my process.

Im testing some of my front-end solutions on exactly the same owl picture with horned owl. WooHoo

Or you could just buy CodeKit and not have to worry about lots of installing and setup.

What are the benefits of using Grunt over CodeKit, exactly? I suppose it would be good to use in a team environment when not everyone has CodeKit since Grunt is free. Too bad Grunt doesn’t have a similar GUI… or it would blow CodeKit out of the water for me.

Someone convince me otherwise to use Grunt.

Thanks for the insight Chris, a great tutorial. I have been using Codekit for a while now, I have been aware of node and grunt for sometime, but not really taken them up till today! What a great move, I am now going to build some kind of boilerplate for my Wordpress projects.

I’m a bit confused about command-line usage.

I’m building a fairly complex system and use coffeescript, thus cake for builds. The tasks typically run unix commands like git, cat, ls, coffee, and naturally the node functions .. exec all over the place.

Does grunt replace the unix command line? I.e. if I convert to grunt, will it be a bit more portable because I’ll no longer need the unix/bash cli? .. would work equally on Mac (unix) and Windows (non-unix)

Chris, thank you so much for this article. I love scss and am fine with the command line, but for some reason they don’t explain certain things on Github or on the Grunt site. I’d get an error message that says the Gruntfile.js has to be “next to” grunt…. where?

Thanks for explaining how the package.json and Gruntfile.js and npm work together, especially in resolving my confusion between which goes on the project root and which goes in the user root.

I could install everything with sudo without having to resort to chown. Since I don’t really know Unix, I don’t want to mess around. And really, you don’t have to.

For the other cautious and successful noobs out there:
I was more successful on Mac Mavericks when installing node and npm the old-fashioned way, as if they were Adobe apps or something, instead of git clone which despite X-tools paths didn’t put them in the right place.

This is the best way to toggle your files between showing and hiding the invisible dot files, so you can see what’s in npm in the first place!:

LikeABausEnterprise discussions. apple.com
Re: How do I show hidden files on Mavericks (10.9)
Jan 15, 2014 9:00 AM (in response to Toubinator)

Naturally 1 is ‘on’ and 0 is ‘off’ . And RESTART

For some reason the Ghost blog has the best documentation for the install of node and npm as a package instead of git clone:

http://docs.ghost.org/installation/mac/
http://nodejs.org/download/

Happy cause I am optimizing all my webfiles on the fly — big ups for mobile speed on w3c validator mobile ok.

Thanks again Chris, you rule!!

Finally learned grunt. Thank for the great article Chris.

This is a great resource and I definitely learned a bunch from it. I know Codekit is very similar and isn’t free ($28), what are your thoughts on Codekit? It seems like you can do more with Grunt with all the plugins. Thanks!

Nice try but I think Grunt is a solution to a problem I don’t have.

For those developers who pump out site after site in a sausage factory environment, where everything you do goes through an identical process, then I’m sure it’s useful for you.

I’m a frontend developer who works on a range of dev projects and bits and pieces. I prefer minimal, clutter-free workflows and tools.

Command line anything sounds like something to actively avoid. I don’t need it, don’t want it.

I don’t see the point of minifying CSS and JS files when the server already compresses those files. Most web servers I work with use HTTP compression (GZIP), so any files such as HTML and CSS are heavily compressed anyway. The extra compression you’d get from minifying would be negligible and I bet you could never measure a performance increase on the site between minified and unminified CSS or JS.

As for the other tasks it can do… great. Knock yourself out making yourself feel better about using Grunt. While you’re messing around with all that stuff, I’m busy coding and creating websites and making them look and perform better because I’m giving them direct attention, not leaving it up to an external process to tell me I have an error.

I won’t be installing Grunt or anything like it any time soon. Been developing for many years, and there’s no bottlenecks I can identify that would be resolved with tools like this. On large sites with content management systems, the images are optimised by content editors, not my the developer. Only the site furniture graphics are optimized by developers, and that takes no time at all and is best done when cutting up the graphics in photoshop. Sometimes you need more compression on an image than other times to avoid banding and so on. You don’t want to automate your image compression unless you have a large number of images to compress.