Configuring Grunt
Grunt has already been configured for app-tb2, so for a new web project all we need to do is load our app specific pods into Thunderbird 2, or specifically, change all references of 'app-tb2' to the new project/app name within the source. But below is an explanation of how it's initially been setup and whats under the 'Thunderbird 2 bonnet':
Initialise Grunt
In the root of your new foundation project, create one file called package.json and another called gruntfile.js. Populate the package.json file with the following:
Note: The project name and version can be changed but the dev dependencies should be left alone
{
"name": “project-name-goes-here“,
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1"
}
}
In the command line, go to the root folder of your project where the package.json file is and run the command npm install which will create and populate the node_modules folder in the root of your project.
Configuring Grunt
To make Grunt work, you need to configure the gruntfile.js file to instruct Grunt what to do. There are many plugins for Grunt available on Github and can be found via the Grunt JS website
Node modules are shared across applications and the node_modules directory is at the root of the front-end development structure. New node modules MUST only be added after review and agreement. Updates to existing node modules should not overwrite existing installs and should be installed to version named folders e.g. grunt-contrib-compass-v2. For more information on upgrades see the 'upgrades' section within the documentation.
When you've identified the plugin you want to use, go to the command line at the root of your project and enter
npm install grunt-contrib-file ––save-devReplacing ‘grunt-contrib-file' with the name of the plugin you want to install.
The new plugin will have been added automatically to the package.json file under the devDependencies. Usage of the plugin needs to be configured in the gruntfile.js file. The syntax will vary between plugins but documentation on plugin usage will be found on Github or npmjs.org
Standard plugins should include:
https://github.com/gruntjs/grunt-contrib-uglify
https://github.com/gruntjs/grunt-contrib-compass
Usage
Having configured gruntfile.js as required, Grunt can be run from the command line at the root of your project. Simply entering grunt will run the default configuration tasks. With watch, uglify and compass installed, this can minify and concatenate your javascript, compile your SASS files through Compass and will watch for any changes to your files, running the default Grunt configuration again whenever one of the component files changes.
References
http://24ways.org/2013/grunt-is-not-weird-and-hard/
http://css-tricks.com/video-screencasts/130-first-moments-grunt/
http://www.smashingmagazine.com/2013/10/29/get-up-running-grunt/