Grunt...is installed on a per-project basis. Grunt...needs Node and NPM. Install it first!
The package.json file in the repo installs grunt for us. Simply navigate to the project folder in Terminal and run the command:
npm installWe should also install the Grunt CLI (command line interface) to give us global access to the grunt command from within Terminal.
npm install -g grunt-cli(NOTE: -g just means install the command for access globally!)
The bower.json file in the repo contains a list of frameworks and libraries we want to include in our project. Initially it contains:
- Bootstrap
- jQuery
- Modernizr
Feel free to add whatever other bower dependencies you wish to include here.
Once bower.json has everything you want, simply run:
bower installGrunt makes development easier by running seemingly mundane tasks for you. (That is what it is after all by definition...a task runner) Grunt knows what "plug-ins"(?) to load and what to do with them via the included Gruntfile.js already in the repo.
The Gruntfile.js comes with a handful of useful tasks ready to rock! These are:
- grunt-contrib-concat
- used for concatenating multiple javascript files into a single javascript file
- grunt-contrib-uglify
- used for compressing javascript
- grunt-contrib-sass
- used for converting our sass files to plain 'ol css
- grunt-contrib-watch
- waits for you to change any javascript or css files, at which point it will automatically concat, compress, sassify, and save!
The last line of the Gruntfile.js registers the default task(s) to run when the 'grunt' command is issued via Terminal. So lastly, go ahead and just run grunt in your project root as:
grunt- First (concat) concatenates the javascript files into a single .js file.
- Then (uglify) compresses that file to shrink it down.
- Then (watch) sits by waiting for you to start developing!