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:
- Make sure you’ve done first: Install Node
- Grunt site: getting started
- My Grunt Boilerplate – which does what we did in this screencast plus more stuff.
- Grunt plugins we talked about: Uglify, Sass, Watch
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.
Hi Chris,
Thanks for the screencasting. I really like your intro video, did you create that yourself?
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.
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?
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.
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?
Wow, this screencast helped me a lot understanding Grunt better. Thanks!
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.
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.
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.
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!
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.
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.
Cheers Chris, very useful and concise (as usual!)
Is there a possibility to make the watch plugin work like a daemon?
I wish someone would great a nice GUI for Grunt that would be really nice.
Love learning something new…
I like doing the commands as they are mentioned in the video.
When I got to the command ->
npm install -g grunt-cli
, I got an error. I am not a seasoned command line guy, but I read a little and on the gruntjs.com site it says ‘you may need to use sudo’. So the command that worked for me was
sudo npm install -g grunt-cli
. Just thought I would share. Thanks Chris for your ‘elegant organization’ and your gift to explain and teach.If you install Node through Homebrew, I’m sure you don’t have to use sudo. It is not as easy as just running the Node installer, but after I did it, I noticed I have never have to use sudo to install dependencies.
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.
hmm. weird. i still have my global.js on top in the minified file even though i put
js/build/*.js
before myjs/global.js
in the array…now why is this happening?
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?
The other files were sass includes – they got included in the CSS when it compiled.
Read all about it here – http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import
Thanks dvesh. That makes sense now. Haven’t tackled sass yet as everyone else on my team would need to also. Cross that road someday. :) Thanks for the explanation.
Nice one Chris ! Very useful
Thanks for this intro, been trying to get into grunt for a little while and this has tipped me over the edge!
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.
Another great video Chris. I really appreciate the details you go through and the background information as to what you are doing, and why.
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.
He Chris,
Thank you for this great screencast, now i understand what Grunt really is.
It was at first sight a little complicated.
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.
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.
Really nice video. I am going to use it and try it with stylus.
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.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…?
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:
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.
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?
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!
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?
Thank you very much for making things clear Chris.
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?
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!
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.
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 :)
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.
Great! what’s the app you have to organize the desktop to float windows to left, right bottom, etc..
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.
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.
I think I may have found it. It looks like it might be https://www.irradiatedsoftware.com/sizeup/
I use Spectacle for that :)
Thank you for this. Even more so than your 24ways article, this got me seriously interested in starting down the Grunt path.
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
This was very helpful. Thank you very much.
Chris Rock as always! [though grunt changed some process in the newer version]
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!
just noticed the app is called sizeup when he looks at the menu!
Hi,
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.
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:
Can someone help me?
Thanks in advanced.
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 saysWarning: Unable to write "js/build/global.min.js" file (Error code: EACCES). Use --force to continue.
. It does however work if I usesudo grunt
but I’m afraid this will become a problem when I start using watch…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.
Thanks Chris, very helpful tutorial. good on you!
Love this site
Five years later even, can you do a tutorial like this for literally everything? Every. thing. thankyou.