#130: First Moments with Grunt

There are all these tasks that we need to do as front end developers. Concatenate and compress our files. Run our preprocessors. Optimize images. Run tests. The list goes on and on. Using different tools for all of them is getting increasingly difficult. Running them manually makes it worse, and easy to screw up.

Grunt is perfect for reining all this in. Maybe you are familiar with tools like CodeKit (covered in this screencast) for doing this kind of thing. CodeKit is great. You might think of it like really specific Grunt setup with a nice interface. Grunt would be a replacement for CodeKit if you need to do more with your build process than CodeKit offers.

In this screencast we cover getting Grunt up and running on a simple project. This is meant to be an accompanying video to a more comprehensive article over on 24 ways.

Relevant Links:

Note: I know I'm a Grunt newb. Got some great Grunt information to share? I'd love to hear in the comments. Annnnnd I know the video is kinda messed up at the end. Will fix.


  1. User Avatar
    Lamin Sanneh
    Permalink to comment#

    Hi Chris,
    Thanks for the screencasting. I really like your intro video, did you create that yourself?

  2. User Avatar
    TJ Fogarty
    Permalink to comment#

    Hey Chris, cheers for this :)
    Just a tip for saving having to do ‘loadNpmTask’ on each dependency, you can use the ‘matchdep’ package.

    You just end up doing:

    I’ve a gist here if you want a look.

  3. User Avatar
    Permalink to comment#

    Hi Chris,

    I’ve been using ant-build (from h5bp setups), but Grunt seems to have a smaller foot-print (not MacPorts-Xcode dependent), and Watch options look more productive… Do you think it’s a better process? Is it an either/or option?

  4. User Avatar
    Teo Dragovic
    Permalink to comment#

    Hi Chris,

    in your grunt boilerplate you can use compass and then run both autoprefixer and minify code via config.rb file. (Autoprefixer docs). Allegedly, csso offers better compression than sass and cssmin.

  5. User Avatar
    Olivier Puraye
    Permalink to comment#

    Sadly the imagemin plugin isn’t that great. It just saves just half as much as ImageOptim on my Mac. Even tried around the different optimization levels, but without success. Does anyone have a solution to this?

  6. User Avatar
    Toine Kamps
    Permalink to comment#

    Wow, this screencast helped me a lot understanding Grunt better. Thanks!

  7. User Avatar
    Permalink to comment#

    Do you guys use Grunt alongside apps like Codekit?
    If so, why? I currently use Codekit w/ compass and don’t see much point in using Grunt at the moment.

    Perhaps a real newb question, but a lot of people seem to love Grunt so I’m curious.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      I talk about that in the short article above and in the video as well. Short answer: They are both great. Grunt is offers way more flexibility, customization, and abilities at the cost of needing to up your nerd game.

    • User Avatar
      Permalink to comment#

      Yes, I brought it up because you began to speak about it but didn’t really delve into it much, which is cool since it’s a Grunt screencast :)

      I was just curious if Grunt totally replaces Codekit. Seems like it would. And more. It’s also free and has a large user-base it seems.

      Grunt has a lot more to offer, although it comes at a price with setup time and the way I store my files (directory structure, etc) would need to be modified.

      Anywho, this screencast was awesome. I enjoy your work on this site.

    • User Avatar
      Permalink to comment#

      i don’t think grunt replaces codekit. i think they’re great for complimenting to each other.

      codekit is great to work locally, when you need to do basic stuff with sass, like imports and compressing. i feel like it’s more for prototyping.

      grunt.js feels more aggressive and hardcore, like going into production.

    • User Avatar
      Richard Dale
      Permalink to comment#

      If you were using Grunt properly and fully I can’t see why you would need to use Codekit.

      I personally use Codekit.

      I have tried Grunt and I did get it working ok but it is a pain in the ass to get in to if you’re not a command line type of person. Although once it is set up you do just run grunt.

      The massive benefit of Grunt as I see it is that its platform agnostic, you can use it on Windows, Mac OS and Linux so it would be great for teams and projects when you want to work with other folks unlike Codekit that only runs on Mac.

      I’m a single freelancer though so this doesn’t matter to me.

      I can see Grunt being great if you put the time in to get it working just so.

      For me for the time being its Codekit.

    • User Avatar
      Permalink to comment#

      I personally love CodeKit because I’m still a command line newb, the thing that stood out most to me is that your project’s Gruntfile.js actually lives within the project’s root directory.

      As Chris mentioned in the video, this is super handy for other Dev’s (or even yourself on a new machine) assuming they have Node/NPM and Grunt installed. This way they can grab your source, cd to the root directory and run ‘grunt’. All of the required grunt packages are installed and they’re off to the races. You don’t get the same value out of CodeKit in this case.

      I’ll be spending some serious time moving to Grunt, thanks for the awesome screencast Chris!

  8. User Avatar
    Chris Sumner
    Permalink to comment#

    Thanks Chris for this great video!

    I wish i had watched it before i delved into Grunt last month. It has definitely cleared up a few thing’s i wasn’t too sure about.

  9. User Avatar
    Todd Gallimore
    Permalink to comment#

    Thank you so much Chris! I’ve been trying to get into this for ages but couldn’t get my head around it. You explain it really well, thank you.

  10. User Avatar
    Permalink to comment#

    Cheers Chris, very useful and concise (as usual!)

  11. User Avatar
    Permalink to comment#

    Is there a possibility to make the watch plugin work like a daemon?

  12. User Avatar
    Richard Dale
    Permalink to comment#

    I wish someone would great a nice GUI for Grunt that would be really nice.

  13. User Avatar
    Harry Pujols
    Permalink to comment#

    Thanks to this post, I am able to scratch the surface of what Grunt can do. Unfortunately, to get it to do most of what Codekit does, is time consuming and error-prone. The only disadvantage with Codekit, other than the price barrier, is that it’s not platform agnostic. If a colleague -or me sometimes- uses a computer running Windows or Linux, my Codekit setup will not matter.

    I tried to fix a Grunt setup that does at least 70% of what Codekit does, but it’s been a nightmare. Maybe a person smarter than me could be so kind of showing us a gruntfile that has a similar setup. I have tried some Yeoman generators, but they’re too opinionated for the kind of projects I would like to work with.

  14. User Avatar
    Permalink to comment#

    hmm. weird. i still have my global.js on top in the minified file even though i put js/build/*.js before my js/global.js in the array…

    now why is this happening?

  15. User Avatar
    Permalink to comment#

    When you set up sass in the Gruntfile.js you set the source file as css/global.scss but in the file structure it is at css/libs/global.scss (The source file is in the subdirectory named libs). I was waiting for an error because te path looks wrong – but it compiled! Does Grunt look for the source file in all the subdirectories?

  16. User Avatar
    Permalink to comment#

    Nice one Chris ! Very useful

  17. User Avatar
    Permalink to comment#

    Thanks for this intro, been trying to get into grunt for a little while and this has tipped me over the edge!

  18. User Avatar
    Permalink to comment#

    Thanks, I’ve used this on a few projects already and will be on quite a few more!
    I’ve also tried Prepros, but it didn’t have all the features I wanted, and besides, it isn’t free.

  19. User Avatar
    Rick H
    Permalink to comment#

    Another great video Chris. I really appreciate the details you go through and the background information as to what you are doing, and why.

  20. User Avatar
    Permalink to comment#

    If Grunt (and node.js) can run on Unix then is it possible to set this up on the webserver where your site is hosted? That way any time someone (of a team) updated a file all the tasks get done to the live files. It seems redundant set up the grunt environment on each developers machine.

  21. User Avatar
    Permalink to comment#

    He Chris,

    Thank you for this great screencast, now i understand what Grunt really is.

    It was at first sight a little complicated.

  22. User Avatar
    Peter G
    Permalink to comment#

    Great screencast – thanks Chris. Just what I needed to open the door to something I knew I really should look into a bit more but now I’m converted.

    I use(d) Codekit too and loved it but for more serious development the flexibility of Grunt, the ability to version control the build process, the range of tasks it can look after and more makes Grunt well worth the learning curve.

  23. User Avatar
    Permalink to comment#

    Chris, Such a great vid, mate. I wish you had made this when I started checking out the documentation. It would have saved me a few hours or so.

    I’ve just created my own boilerplate with grunt.
    It’s far from taking everything into account, but it does some neat stuff (including a full minimalistic build process and a templating system without the need of mamp and php).

    if anybody’s interested.


    So long girls and guys.

  24. User Avatar
    Permalink to comment#

    Really nice video. I am going to use it and try it with stylus.

  25. User Avatar
    Scott Lesovic
    Permalink to comment#

    If you are a Sublime Text person, like Chris is using in the video, there is a Grunt plugin in Package Control that can remove some of the command line need.

    You still need to hit the terminal to run npm install *whatever* --save-dev and other setup tasks, but once you have the project set up, you can run all the Grunt tasks from the Command Palette.

  26. User Avatar
    Permalink to comment#

    Hi, thanks for the video, really makes grunt more accessible…
    Although I’ve got a question if anyone can help…
    I am using imagemin, so I have a task for it, and I want this task to be run under ‘watch’, cool.
    But I would like to run the compression engine/algorithm/whatever only for the image that has been modified or added, not for all the image in my project each time that I save some change in a single file…
    any help…?

    • User Avatar
      Permalink to comment#

      Hi Jordi,

      you must have a shit load of pictures for thinking you defo need this.

      Is it because you ran into problems with imagemin? Just wondering since I personally had some issues and ended up with empty files while running the task repeatedly. Just in case, I am letting you know that I solved that issue with options: {cache : false}…

      as in:

      imagemin: {
        dist: {
          options: {
            cache: false
          files: [{
            expand: true,
            cwd: 'images',
            src: ['*.{png,jpg,gif}'],
            dest: 'build/images/'

      If you really want that task to run for new pics only, maybe you could use grunt-rename right after imagemin to rename the processed files to a defined pattern and have it excluded from the imagemin task.

      Not sure it would work though.

  27. User Avatar
    Permalink to comment#

    And by the way, yet another one,
    grunt-contrib-less sucks working in a project which uses Bootstrapv2.1.0, does not allow to minifi, ‘yuicompress’ the easiest fix looks like upgrade Bootstrap to a newer V, but hat happens if some of the core files have been customized/modified? I tried to change manually and do not use the interpolation selector but still not working…
    anyone know how to solve it?

  28. User Avatar
    Permalink to comment#

    Thanks for this screencast. I read/watched some much longer documentation a while back, and didn’t get half as good an idea of Grunt as you provided since I usually follow the same process of get something, google options, try it out. Thank you!

  29. User Avatar
    Rodrigo Ibarra
    Permalink to comment#

    So… question, I see you got a .gitignore file and you mention it and even that grunt added a task to it so it wouldn’t send it up to git… how exactly did that happen? Grunt has never done this for me, is it a configuration thing or something?

  30. User Avatar
    Fotis Koutoupas
    Permalink to comment#

    Thank you very much for making things clear Chris.

  31. User Avatar
    Permalink to comment#

    I did a little testing with Grunt and ran into something I’m not sure has a solution.
    It seems that if you run a task such as uglify along with watch, it will uglify all your JS files when you make a change in one file.

    How do you get around this? Am I missing something super-obvious?

  32. User Avatar
    Permalink to comment#

    It’s too late and I’m dead tired to get technical but before I call it a day I just wanted to say great work Chris and thank you for the time and effort you put into it. It’s a great help to me personally and I think I’m liking Grunt. It took me awhile to get the hang of it, but I’m up and running now because of your really good tutorial. Thanks again and you have a great attitude. I’ll be back!

  33. User Avatar
    Permalink to comment#

    Awesome screencast Chris ! For quit some time I try to work with Grunt but I was a newB, it was a good intro which make to re-think to use Grunt in my daily workflow Thanks a lot.

  34. User Avatar
    Nicky Christensen
    Permalink to comment#

    Thx for the video Chris, really enjoyed it, and learned alot – Think it’s time for me to try to use grunt for my next project :)

  35. User Avatar
    Enok Madrid
    Permalink to comment#

    Hey Chris, thank you for this video.. I been researching about grunt for a while but didn’t really see the big picture of how this works. You explained it so easy to understand, definitely going to be using Grunt for my next projects and start getting used to this workflow.

  36. User Avatar

    Great! what’s the app you have to organize the desktop to float windows to left, right bottom, etc..

    • User Avatar
      Permalink to comment#

      Did you ever find out what this app was? I’ve used Cinch for years, but I think I like this one better since it has keyboard shortcuts.

  37. User Avatar

    Thanks Chris for this great video!

    I wish i had watched it before i delved into Grunt last month. It has definitely cleared up a few thing’s i wasn’t too sure about.

  38. User Avatar
    Permalink to comment#

    I think I may have found it. It looks like it might be https://www.irradiatedsoftware.com/sizeup/

  39. User Avatar
    Permalink to comment#

    Thank you for this. Even more so than your 24ways article, this got me seriously interested in starting down the Grunt path.

  40. User Avatar
    Jonathan Beech
    Permalink to comment#

    Really good post, I would be curious to find out a clear method of getting a local server to work with Grunt with the nice to have features like livereload? I currently use Mamp or DesktopServer to run a local copy of WordPress and would like to use Grunt in conjunction with that, watching files concatenating and compiling and so on. Maybe a bit of Googling might help. I found this link which might be useful. Chris gets a mention at the beginning.

    Your text to link here…

    Codekit 2 does this sort of stuff out of the box so I may stick with that for now. I do find the nerdy set up type thing to be cumbersome but investing a bit of time leveraging the power may really help in the longrub

  41. User Avatar
    White Wolf Wizard
    Permalink to comment#

    This was very helpful. Thank you very much.

  42. User Avatar
    Jimba Tamang
    Permalink to comment#

    Chris Rock as always! [though grunt changed some process in the newer version]

  43. User Avatar
    Permalink to comment#

    thanks for the video chris! i was hoping someone could tell me the plugin/ app he is using on the mac to rearrange the windows as i’ve only just moved over to the mac myself!

    • User Avatar
      Permalink to comment#

      just noticed the app is called sizeup when he looks at the menu!

  44. User Avatar
    Permalink to comment#

    First of all thanks for this post. It really help for me. I have small problem about css or js concatenation and compression. When we used lots of 3rd party plugins for our project and concatenation those file together, most of the time images (mainly in css files) not loaded because of the file location change. Can any one can help me to overcome with this issue.
    This issue i face when i used.

  45. User Avatar
    Permalink to comment#

    Hi guys this is my first time with Grunt. I did download Grunt Boilerplate from github, and when i try to run grunt, in the folder from the github i get this error:

    > Error: Cannot find module ‘glob’
    Warning: Task “default” not found. Use –force to continue.

    Can someone help me?
    Thanks in advanced.

  46. User Avatar
    Håkon Underbakke
    Permalink to comment#

    I keep having to “sudo” grunt. With uglify and sass installed if I type grunt it would run uglify, but when it comes to sass it stops and says Warning: Unable to write "js/build/global.min.js" file (Error code: EACCES). Use --force to continue.. It does however work if I use sudo grunt but I’m afraid this will become a problem when I start using watch…

  47. User Avatar
    Bryn Howlett
    Permalink to comment#

    Can you do a screencast like this but with Gulp. That would be really nice to see and hear your opinions because you are familiar with Grunt. If not, no worries and thanks for all your amazing free tuts and docs.

  48. User Avatar
    Permalink to comment#

    Thanks Chris, very helpful tutorial. good on you!

  49. User Avatar
    Permalink to comment#

    Love this site

  50. User Avatar
    Permalink to comment#

    Five years later even, can you do a tutorial like this for literally everything? Every. thing. thankyou.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.