Update: I wrote this article a month ago, and I was hesitating about publishing or not, finally I’ve decided for doing it. I keep this more like a guide of really nice tutorials and as exercise for my self. I’ve decided that I’am going to continue testing Grunt.js for a couple of months before changing/trying Gulp.js, I think it deserves a really good experimentation for having a good comparison parameter.
I’ve been hesitating for a while about using Grunt but finally I have a bit of time and I’ve faced all my fears. Yes, I admit it, every time anyone says anything about command line I make that face. Fortunately, I’ve been practicing a bit with Github, between their app, tutorials and the command line, I’m starting to feel more comfortable.
Now It’s time to try Grunt and understand why everyone is talking about it. At first, I said, I have Codekit, I don’t need another Task runner, but since I started working under windows environment I thought: “I have to move”. I’ve tryed Prepros, and I think it is a very good alternative, but It is still in progress and now you have to pay for Sass and almost everything. So, why not give it a try?
Get Grunt Installed
The first thing you have to do is to install Node.js, you just download the installer and run it. You don’t need to know Node.js, you just need to install it in you machine, like Ruby for Sass.
Then you have to run the following command from your terminal,
$ npm install -g grunt-cliThis is only one time command, and if you are having some errors messages try :
$ sudo npm install -g grunt-cli
If you want to check that everything is ok, just run:
$ grunt --versionIt should show you your Grunt version.
Now we have to create a package.json file in our folder directory, it should have something like this :
{ "name": "example-project", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-concat": "~0.6.3", "grunt-contrib-cssmin": "~0.7.0" } }
We are pretty close to have the basic set established. Now we have to do something a little bit new-different (at least for me). We have to go to our folder directory and install npm. In mac, the easier way is just do type cd and then drag our folder finder into the command line, and bang, now, we are in our project folder with the terminal. Once it’s done: we run :
npm installThis is going to create a node_modules in our project with the concat and Cssmin installation that we are going to need.
That’s it. This is the basic installation.
Defining tasks in the Gruntfile
The previous steps were focused in preparing and installing all dependencies we needed to have Grunt running. Now we are going to prepare our Gruntfile.js in order to determinate our configuration,
Our Gruntfile.js should have something like this:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
// 2. Configuration for concatinating files goes here.
},
uglify: {
// 2. Configuration for concatinating files goes here.
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'cssmin']);
};As we can see in detail, it has a wrapper function that is necessary to Grunt to understand the file
module.exports = function(grunt) {
// Configuration, Tasks and Plugins.
};The pkg: grunt.file.readJSON(‘package.json’), line imports the json information that we’ve created earlier.
And then, we have to configure our tasks.
For this section, I’m going to suggest you to read Chris Coyer article in Grunt for People Who Think Things Like Grunt are Weird and Hard published in 24.ways, wich I think he does ten thousands better than me.
I’m going to focus in those gotchas that I had when I was doing this and other Grunt tutorials.
My Gotchas
As you can see, what we have been doing is pretty basic:
1. Install node.js
2. Install grunt-cli with the terminal.
3. Create a package.json file in our folder with all dependecies we are going to use.
4. Create a Gruntfile.js with our tasks configuration.
5. Run npm with the terminal in our folder.
6. Run grunt watch and start coding (yes, I know, I haven’t said anything about it, but as I told you, if you read Chris article, you will figure it out how to install this dependency and what it is useful for.
One of the problems I had doing this was: how to call every little dependency. First I tought, I have to call them one by one in my Gruntfile, and yes, this is going to work, but if you have followed Chris article, you will see in the json file (and of course, in the gruntfile) that he use another dependency that makes it easier:
"dependencies": {
"load-grunt-tasks": "~0.2.0"
}Anotther approuch use in an Smashing magazine’s articles is to use:
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);I haven’t use, but I think it should work properly.
After that, I think It is most about how you configure your tasks: paths, files…
I know that it is scary to make the first step, but every time you do it, you say, does it? I have been moving to Grunt for 6 months and finally I made it and it is awesome. I feel like the first time I used Sass.
Well, I hope it was helpful for anyone but if it is not, you should read this:
Grunt for People Who Think Things Like Grunt are Weird and Hard