A Gruntfile for use with angular-seed boostrapped projects.
- A Node.js installation with Node Package Manager (npm)
- (Python, only required for code highlighting for the
docs
task. If you don't have Python installed and running into errors on build task, trybuild:nodocs
.)
- Clone angular-seed
- Install Grunt with:
npm install -g grunt-cli
- Get the
Gruntfile.js
from this repository - You will need to adapt the original
package.json
from angular-seed and add the followingdevDependencies
:
"devDependencies": {
"bower": "^1.3.5",
"grunt": "^0.4.5",
"grunt-banner": "^0.2.3",
"grunt-contrib-clean": "^0.5.0",
"grunt-contrib-concat": "^0.4.0",
"grunt-contrib-connect": "^0.8.0",
"grunt-contrib-copy": "^0.5.0",
"grunt-contrib-csslint": "^0.2.0",
"grunt-contrib-cssmin": "^0.10.0",
"grunt-contrib-htmlmin": "^0.3.0",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-uglify": "^0.5.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-docker": "0.0.8",
"grunt-karma": "^0.8.3",
"grunt-npm2bower-sync": "^0.4.0",
"grunt-rev": "^0.1.0",
"grunt-usemin": "^2.2.0",
"karma": "^0.12.16",
"karma-jasmine": "^0.1.5",
"karma-chrome-launcher": "^0.1.4",
"karma-firefox-launcher": "^0.1.3",
"karma-junit-reporter": "^0.2.2"
}
- For easier bootstrapping, adapt
scripts
to:
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "grunt server:dev",
"pretest": "npm install",
"test": "grunt test:dev"
}
- Now run
npm start
and npm will automatically download and install all dependencies and start a local development server on localhost:8000
Run grunt test:dev
for Karma unit testing (will monitor for changes and re-run all unit tests if changes detected). Use grunt test:prebuild
for a single run of Karma (if running from a continuous integration platform e.g.)
There is a side-by-side documentation available, which can be generated by grunt docs
. Python is needed for generating Pygments syntax highlighting. If you don't have Python installed, skip this step. (If build fails due to missing Python executable, remove docs
tasks from build
task chain or run build:nodocs
instead.)
You can build a dist
folder with grunt build
, including running tests, creating documentation and minification of all JavaScript, HTML and CSS files in the app
folder. By using grunt-rev, hashes are added to all assets to reduce issues with browser cache.
For the minification, you will need some additional comments inside your html file (see grunt-usemin for more information). Your index.html
should look like:
<!-- build:css css/3rd-party.min.css -->
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<!-- endbuild -->
<!-- build:css css/app.min.css -->
<link rel="stylesheet" href="css/app.css">
<!-- endbuild -->
...
<!-- build:js js/3rd-party.min.js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- endbuild -->
<!-- build:js js/app.min.js -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<!-- endbuild -->
To build and deploy a server automatically, use grunt build:server
.
Licensed under MIT License