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

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

  5. 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”?

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

  8. 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! :)

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

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

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

  12. 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!

  13. 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”.

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

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

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

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

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

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

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

  26. 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! :)

  27. 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!

  28. 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!

  29. 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!

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

  31. 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 ?

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

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

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

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

  38. Bill

    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.

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

    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.

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

  42. 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?

  43. Joel Overpeck

    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.

    Anyway, thanks for the informative walk through.
  44. Jonathan Beech

    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.

  45. Mats Svensson

    Thanks!
    Finally!

    This post alone, replaces about a dozen of completely useless sites for all these tools.

    They always assume that you automatically know how to use their stuff, just by landing on their site, and that all they need to do is tell you how great it is.

    Most of these idiots don’t even bother to explain WHAT the tool IS or what it does.

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

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

  48. 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!

  49. 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!

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

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

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

  53. Alasdair

    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…

  54. Chase Giunta

    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

  55. Dan Blundell

    Thanks Chris! This was just what I needed to finally get around to making use of Grunt.

    One thing I’ve since found is that there’s no need to use concat if you’re using uglify as uglify will concatenate files too, equally uglify has the option to generate a sourcemap so that Chrome Dev tools (any others) will still map console messages to the correct files – worth keeping it slimmer where we can plus sourcemapping is a huge help when splitting javascript over multiple files.

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

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

  58. Ian

    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?

  59. Jason

    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.

  60. 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!

  61. 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
  62. Pete Blakemore

    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.

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

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

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

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

  67. Stephanie

    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.

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

  69. VR Comrie

    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!

  70. Wendy Walsh

    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)

    defaults write com.apple.finder AppleShowAllFiles 1 defaults write com.apple.finder AppleShowAllFiles 0

    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!!

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

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

  73. 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
  74. 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
  75. 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