Getting started with Grunt


Currently I’m studying new development process for my project and I’m learning the Grunt automation tool for this purpose. I want to share some basic knowledge about Grunt configuration. I’ll assume Windows OS, but you can use Grunt on Linux-based OS as well. Let’s start:

  1. You need to install node.js as a first step. Node.js – is a platform, which executes JavaScript code. Node.js is required for Grunt. Grunt is just a JavaScript task runner and it needs interpreter to work. If you are using windows installer – the npm (node package manager) will be installed as well and you’ll need to reboot your system to apply new environment variables;
  2. Then you need to create a new empty folder for your solution;
  3. To work with Grunt you need also to install Grunt Command Line Interface (Grunt CLI). Flag “-g” means, that CLI will be installed globally, to Node.js directory. Open command line (for example, Windows PowerShell) and execute next line:

  4. Then you need to create valid package.json file. The easiest way to do it, just type into command line:

    After several questions you’ll get package.json file in the root directory of you project. Something like that:

  5. Then you need to install Grunt itself:

    This command will download all required components for Grunt to working directory. “–save-dev” flag will also add Grunt to package.json file as a development Dependency. It’s very important to add all plug-ins to dependencies list, because when other developers will checkout the source code and execute “npm install” – they will get all required dependencies for work (“node_modules” directory should not be committed to repository);

  6. To complete installation of Grunt you need to create a Gruntfile.js in the root directory of your project:

    This is an empty grunt configuration and it’s doing absolutely nothing. But now, if you type “grunt” into command line – you should see “Done, without errors.”

  7. That’s all about installing Grunt. But let’s add one plug-in to our Grunt configuration:

    This command will add require.js plug-in for grunt. Require.js is a very powerful and easy-to-use JavaScript module loader;

  8. I will not enter the details of working with Require.js itself, you can just see attached example of demo page with 3 modules. Let’s discuss Grunt plug-in and change the Gruntfile.js:

    In this configuration you should set correct ourput file name (“out”), name of seed module (“name”), configuration file (“mainConfigFile”) and base URL for modules (“baseUrl”). Also, I’ve added “requirejs” task to default grunt tasks list. If I will run “grunt” command in command line – the new “optimized.js” file will be created. It will contain all minimized and concatenated modules, starting from seed.

Please, take a look at the source code for require.js demo: Demo.
At the end, I want to share some useful links, tutorials and specifications, which helped me to install and configure Grunt for custom project:

Summary
Of course, Grunt is much more powerful and flexible, than I’ve demoed, but I just wanted to create a starting point for you. You can find a lot of useful plug-ins, create different Grunt configurations: one for development, one for production, etc. Or you can try to write you own plug-in using your JavaScript knowledge and experience.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s