My boilerplate Angular.js application using Grunt.js as task runner.
Front-End dependencies handled by Bower, unit tests run by Karma & Jasmine.
npm install -g grunt-cli bower
Building for production
Lets start, by introducing the folder structure of the project.
We have few importants folder to mention, and they shouldnt be moved unless necessary (GruntJS tasks will fail):
- src - code written by developers, used by Grunt to process
- build - code processed by GruntJS ( dont edit anything there !)
- views - place where all html tempalate files goes
- styles - place for styles
- less - all less files that are going to be proccessed by GruntJS goes here
- css - files created by GruntJS
- test - contains unit tests
Now, lets go to GruntJS tasks.
Right now we have one main grunt task that combines all the usefull tools to develop our application. When you type:
thats whats happening under the hood:
- Grunt compiles less files inside the styles/less directory and outputs css file to styles/css
- Grunt launches web browser with application deployed on Connect.js
- Grunt goes into background mode, listens for any changes made in the code by developer, rebuild the application, and refreshes active browser window
Prepares application for deployment, by cleaning up directories, installing necesary libraries, running unit tests.
Performs karma unit tests for UI.
Smaller tasks that do cool thinks:
- clean - removes cache directories
- bower:install - launches Bower automatically, so you don`t need to (smile)
- concat - merges all files and compress them
- less - compiles LESS into css