Grow your CSS skills. Land your dream job.

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

Comments

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

  2. 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:
    require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

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

  3. neil
    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. 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. 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. Wow, this screencast helped me a lot understanding Grunt better. Thanks!

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

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

    • Erik
      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.

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

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

    • eBreuers
      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. 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. 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. Matt
    Permalink to comment#

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

  11. Koopa
    Permalink to comment#

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

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

  13. 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. twincy
    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. Pete
    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. Maxisix
    Permalink to comment#

    Nice one Chris ! Very useful

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

    http://shoogledesigns.com/blog/blog/2014/01/14/grunt-js-boilerplate/

    So long girls and guys.

  24. Permalink to comment#

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

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

    • 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. 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. Jess
    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. 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. Fotis Koutoupas
    Permalink to comment#

    Thank you very much for making things clear Chris.

  31. Erik
    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. 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. 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. 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. 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. Great! what’s the app you have to organize the desktop to float windows to left, right bottom, etc..

    • 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. 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. Permalink to comment#

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

  39. 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. 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. This was very helpful. Thank you very much.

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

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".