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:
- Then you need to create a new empty folder for your solution;
- 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:
- 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:
- 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);
- 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.”
- That’s all about installing Grunt. But let’s add one plug-in to our Grunt configuration:
- 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:
- Node.js official site – official node.js site. All required documentation can be found on this site;
- Interactive package.json guide – if you don’t remember some fields in package.json – this guide will help you;
- Grunt official site – getting started tutorial;
- Requirejs plug-in for Grunt.