Grunt for People Who Think Things Like Grunt are Weird and Hard

73 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Tyler Lesperance

    Chris…YES! This was the post I wish had existed 2 months ago when I decided to try Grunt. Literally everything that I wanted for my set up (and figured it out on my own/different articles) is in this post, and it’s all in plain English. This should be page 1 in the Grunt documentation. A++

  2. Christian Krammer

    Like always, great article Chris. It finally convinced me to give Grunt a try, since every time I wanted to install it so far, I was scared by the guides. But now, after some hassles and tweaks, it runs like a charm and I’m very glad that I gave it a try. Especially LiveReload finally works properly for me. Before I have used Sublime Text’s LiveReload package, but unfortunately it is pretty buggy and crashed my editor regularly.

    However I ran into a few problems, which I’d like to share here:
    - If you use Compass (e.g. you use mixins like border-radius, which you really should), install grunt-contrib-compass instead of the mentioned grunt-contrib-sass. It’s basically the same with the same configuration variables.
    - If you want to minify multiple JS files, use this syntax:
    bc.. files: { ‘js/script.min.js’: ‘js/script.js’, ‘js/modern.min.js’: ‘js/modern.js’ }
    p. – If you want to use SASS in combination with LiveReload and need style injection, which means that the CSS gets updated without a page reload, than you need to do it like described here: draftingcode.com/2013/06/subtle-live-reloading-with-grunt-and-compass

    Hope that helps.

  3. Pat O'Callaghan

    For people wondering why you’d use Grunt over Codekit, Grunt does a whole lot more than just what is described in this tutorial. Have a look at the mountain of plugins which you can just drop in to your configuration http://gruntjs.com/plugins.

    Examples are:
    * Run JS Tests
    * Build CSS/JS documentation from comments
    * Deploy to Github Pages, FTP, Amazon etc
    * Spin up headless Webkit browsers and take screenshots (good to regression testing)

  4. Antonio

    Thanks so much, just the article I need right now.

    Just one little thing that might confuse beginners:

    When you describe installing concat, after the line
    “npm install grunt-contrib-concat —save-dev”

    when you describe what gets added to package.json, you write:
    “grunt-contrib-uglify”: “~0.2.2”

    Shouldn’t that be
    “grunt-contrib-concat”: “~0.3.0”?

  5. Martin de Lima

    Just a tip, if you’re using ImageOptim, there’s a Grunt plugin for that. Works much better than the default image optimizer.

    https://github.com/JamieMason/grunt-imageoptim

  6. matthewbeta

    Awesome post. It will be my point-people-to-post for getting started.

    Before I got into Grunt, I was a terminal/cmd virgin. I didn’t really get what “running a command” was (Its just typing the words and hitting enter in case you’re as dumb as me)

    I have a few posts on my blog about setting this stuff up from scratch (Mac and Windows).

    Setting up Grunt from scratch:
    http://matthew-jackson.com/notes/development/setting-up-grunt-from-scratch

    Installing Sass and Compass (Mac and Windows)
    http://matthew-jackson.com/notes/development/installing-sass-and-compass-mac-windows

    Designers: Don’t be afraid – The Command Line is the GUI : )

  7. Gabriella

    Thanks to your article and this one by Philip Brown , I finally got grunt up and running with my custom settings. Couldn’t be happier.

    A tip I picked up from Brown’s article was to use matchdep to automatically load in your Grunt plugins. So instead of loading each plugin manually as so:

    @grunt.loadNpmTasks(‘grunt-contrib-uglify’);@

    you would have matchdep do it for you…

    to set up matchdep run this command in the terminal:

    @npm install matchdep —save-dev@

    then replace your grunt.loadNpmTasks with this line instead:

    @require(‘matchdep’).filterDev(‘grunt-*’).forEach(grunt.loadNpmTasks);@

    and you’re good to go! :)

  8. Marie

    I wrote a post a while back on using git hooks with Grunt which might be useful.

    http://mariehogebrandt.se/articles/automating-tasks-grunt-git-hooks/

  9. Nico

    I wrote a blog post on how to do “spritesheets”: http://blog.ponyfoo.com/2013/10/16/spritesheets-grunt-and-you, you might find it helpful

    Also:

    - “continuous development”: http://blog.ponyfoo.com/2013/09/26/continuous-development-in-nodejs
    - deploying to Amazon AWS

  10. Raymond Camden

    I wonder if you could speak to URL handling. That may not be the best way to describe it, but consider this. You have Grunt automatically concating and minimizing your JS files. So I assume that your HTML file than just has one script tag – pointing to the nice minimized file.

    But(!) – if you are working on your JS, it is going to be difficult to debug a minimized, concatted file. (Yes, Chrome Source Maps can help, but ignore that for now.)

    So do you just ignore the .min file while you are working? If so, does that mean you have you to edit your HTML before going to production to change the 3 script tags to one? Can you show an example of that?

    Ditto for images. If you are optimizing them on the fly, do you then just point to the optimized version when writing IMG tags?

  11. Henriette

    Yes, i was also wondering,

    i am using a local server, wamp, in combination with Prepros (or Mixture/Codekit) to do all the compiling, image optimization, css injection live reload stuff, cross device testing and other necessary project processing. I use Chrome developer and IDE tools for code inspection etc. Then i commit it to the project repository and it updates the live server.

    Maybe somebody could explain why to use the Grunt style process workflow instead of a gui precompiler/process tool like Codekit, Prepros or Mixture? Perhaps i don’t understand why to use Grunt because of my lack of knowledge, so please, let me know.

    Thanks in advance, kind regards!

  12. Josh Rives

    FYI: I got an error installing Grunt CLI that said “Please try running this command again as root/Administrator.”

    To fix that I ran this instead and it worked

    sudo npm install grunt-cli -g

    Link to where I learned that
    http://www.codebelt.com/javascript/install-grunt-js-on-a-mac/

  13. Andrew Solomon

    This is awesome but we should address the elephant in the room… GUARD!

    In my experience as a front-end dev I still find it a bit difficult to get backend developers to use Grunt because they find the javascript syntax a bit confusing. As frontend developers Grunt is a perfect paradise, but the problem I always run in to when introducing this to backend or non javascript developers is, “Why not just use guard?”.

    Of course we all should be using some sort of task runner, but how do we convince folks to use Grunt instead of Guard.

    In defense of the Grunt haters, Guard is able to:
    $ gem install guard-sass
    $ gem install guard-coffeescript
    $ gem install guard-livereload
    $ gem install guard-concat
    $ gem install guard-uglify

  14. Jack zelig

    I ran into the following error when running the imagemin task:

    @Fatal error: spawn ENOENT@

    I solved it by doing the following:

    Add “jpegtran-bin”: “0.2.0” before the reference to imagemin in package.json,
    Delete the node_modules folder from project
    Run “npm install”
    Run “grunt”

  15. Josh Compton

    I’ve actually been using Grunt for a lot of my projects at work. The installation work for Grunt is the most annoying part of the process, given that it’s so repetitive and tedious. This is especially true If you’re running with Grunt as part of your repo and you have to set it up every time you make a build for a project. I found a couple of things pretty early on that this can be made much smoother for your fellow project members:

    - Ignore the node_modules/ dir, it doesn’t belong in the repo, makes a mess, and can cause strange Grunt bugs
    - Make a shell script to install Grunt and your dependencies so someone can easily pull down your branch, run the shell script and be ready to contribute:

    grunt-deps.sh: npm install grunt —save-dev npm install -g grunt-cli # Above is nice because even if the user already has these installed, it won’t do anything unnecessary. echo “grunt installedn”

    echo “grunt-contrib-concat” npm install grunt-contrib-concat —save-dev

    You call this script by going to your project root (same place you’d want to run Grunt from) and running sh grunt-deps.sh. So each time you add a new plugin to Grunt, just add a new line to this file. Boom, easy, painless project init.

    - Set your source and destination files as a module and call those in your subsequent config blocks: dirs:{ // To be more future-minded, we’ll move sass under // tools, which will house our js in the future. sass: ‘sass’, dest: ‘wp-content/themes/internap_2’, jsDest: ‘<%= dirs.dest %>/lib/js’, jsSrc: ‘’, }, watch:{ sass: { files: ‘<%= dirs.sass %>/**/*.scss’, tasks: [‘sass:normal’, ‘sass:ie’] }, }

  16. Steven Grant

    Running

    @npm install grunt-contrib-concat —save-dev@

    also doesn’t add

    @“grunt-contrib-uglify”: “~0.2.2”@

    to package.json, it adds:

    @“grunt-contrib-concat”: “~0.3.0”@

  17. Vitor Britto

    Excellent, Chris! Some people fear GruntJS due to the terminal/cli, but the ways to configure these guys becomes more friendly through some practical procedures.

    Also:

    * We can use “npm init” to create a file “package.json” based on some answers;
    * and conduct a preliminary search to find out which plugins are needed and then run “npm i (alias for install) grunt-contrib-sass grunt-contrib-uglify grunt-contrib-jshint grunt-contrib-watch —save-dev” to install these guys more efficiently and list them into “package.json”.

  18. Brice Hennelly

    I get that concatenating js files makes sense. But then I’d need to change the html files to look for my new “global.js”, right? Grunt can’t change my html files for me can it? Perhaps I’m not understanding something in the workflow that would accommodate for this.

  19. Paul

    Hmmm… I think I’ll stick to Codekit… you’re saying it’s not complicated, however it looks pretty complicated compared to a tool such as Codekit :) Not sure what the advantages of this are?

  20. Cindy Dykstra

    I agree with Tyler Lesperance, this post should be included in the documentation. It would have saved me literally hours and given me a greater understanding of what I was doing with all those commands.

    The most important thing I found lacking from any docs anywhere, was that “command line” means the NodeJS command line. It took me most of the set up time trying to do things in either the windows command line or Git bash, and nothing was working for me. Once I noticed that Nodejs had its own, I was off and running (well,almost).

    Great post, bookmarking and linking to from my own blog post on Node. Thanks!!

  21. Corey

    Great post Chris! Thanks for the guidance. I’d also like to note for the SASS users out there that want to use autoprefixer to also include grunt-csso.

    I also found it helpful to move grunt-contrib-watch to the bottom of your devDependencies! After you dive in adding others.

  22. Daniel Furze

    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 :)

  23. Krish Dholakiya

    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 :)

  24. Sivan

    Nice article.

    after
    @npm install grunt-contrib-concat —save-dev@

    You’ll see a new line…

    should be
    @“grunt-contrib-concat”: “~0.3.0”@

  25. Jochim

    For designers who don’t like the command line, use Prepros! It’s free (but also has a pro version which is only $25) and does all of these things for you with a beautiful UI. And it works on all platforms, go check it out! :)

  26. Noor

    Chris,

    As someone who has recently moved from a ‘lone wolf’ situation, developing with Codekit, to developing a suite of 20 sites in a team environment, this post is invaluable.

    I love Codekit (and its PC equivalent – Prepros) but they aren’t great for team situations. The ability to save a repo with the Grunt config so that anyone with a computer and command line can dive right in is essential.

    I always finish your ‘lets learn this’ posts ready to do actual work. Thank you!

  27. Stijn D

    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!

  28. Andrew Lee

    I finally get Grunt. I thought I had known what it does and that I didn’t need it, but being able to manage project settings via a JSON file is pretty great. And then being able to share a project with someone else who also uses Grunt and having it ready-to-go is awesome. Thanks Chris!

  29. Heinz

    Hannenz, already pointed at the usage of the unix make command, and I also wonder why it
    is not mentioned. It is around for decades and working.
    Why inventing the wheel again ?

  30. John Locke

    This article came along at a good time. I too will take a GUI when I can, but this makes me a bit less “scurred” about trying Grunt. Thanks Chris for breaking it down and making the process less intimidating.

  31. Mannie Schumpert

    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

  32. Marie

    @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.

  33. Matt

    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

  34. Rob Wierzbowski

    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.

  35. Sten Hougaard

    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

  36. Todd Smith-Salter

    @Erik Woods, as someone who used CodeKit for a long while and switched to Grunt, I can tell you that the time and effort was worth it, especially in a team environment. Providing identical compilation, generation, and concatenation environments for all your members is awesome. That being said, most of the projects I do are just me from start to finish, and I still use Grunt. I found that once I switched, I didn’t want to go back to a GUI. The utter customizability and glut of possibilities with Grunt opens a lot of doors as a designer/developer.

    But, if I only ever did projects by myself, I would consider using CodeKit full-time.

  37. Zell Liew

    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/.

  38. Alan

    “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)

  39. Bryce Johnson

    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?

  40. Harry Pujols

    My workflow includes constantly working with Codekit, MAMP, Gitbox and Transmit. I was hoping Grunt would be a neat replacement for all of it, but the advantages of working with a GUI outweigh the platform-agnostic, extremely customizable features of Grunt.

    Grunt is a great idea, but it needs a GUI. Codekit is no longer the only game in town. There is Prepros (which, I wish, didn’t look so Windows 8-ish on a Mac), Mixture, Hammer, and simpler ones like Crunch and Compass App. They are only getting better, and I’m sure that future IDEs are going to support similar features.

    Thanks to a few tutorials like this, I was able to start a simple project with Grunt, but for complex setups, I find Codekit much faster, and easier.

  41. Jason Hodges

    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?

  42. Maxisix

    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” :)

  43. Peeela

    The timing of this article is perfect, almost like swiss clockwork, or swiss chocolate? Anyway, while free is good, there is so many features and so much margin for error for simple front-end devs like me.

    While not free, and this is not a plug, as using it is not trouble free, but I’m trying to explore the performance optimisation features of PHPStorm. I’m only new to it, but having it Watch .scss and output to .css is one great feature. I’d be interesting to know if it concats or minifies.

    The other feature I like about this particular IDE is integrated (and visibly manageable ) git integration. I realise this isn’t unique, but not having to switch apps, or install loads of modules to get it working is worth the $100 to me.

    Thanks for the article 24ways and Chris.

  44. Peter

    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!

  45. Rowe Morehouse

    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!

  46. Salman Javed

    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.

  47. Sotiris

    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 :)

  48. Steve W

    As somebody who hates command line, I appreciated this article and then I saw the comment. I have now discovered CodeKit and in turn PrePros.

  49. Donovan

    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.

  50. Eric Binnion

    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

  51. Nicola

    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!

  52. Owen Densmore

    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)

    — Owen
  53. Owen Densmore

    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)

    — Owen
  54. Owen Densmore

    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)

    — Owen
  55. Philip

    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.

  56. Sarfraz Ahmed

    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 :(

  57. Sequoia McDowell

    @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.

  58. Steve Sweetland

    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

  59. hannenz

    Well, while this whole grunt-thing sonuds nice indeed, i simply just don’t have the time to bother with every new tool and dive into it. When I read this:

    I have other ways to do the things Grunt could do for me

    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.

    i thought: Well, I use good old Makefiles which are around for 30 years now and they do exactly the same but allow for much higher flexibility. I wonder why it isn’t more common among web developers to use the existing and tried software development tools. But that’s just my two cents and the article is nice though — maybe someday i’ll have the time ot dive into grunt.

  60. bbnnt

    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

  61. Erik Woods

    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.

Impress us

Be friendly / use Textile