angular-seed-gruntfile

A Gruntfile for use with angular-seed boostrapped projects.

Requirements:

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, try build:nodocs.)

Quickstart:

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 following devDependencies:

"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

Testing

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.)

Documentation

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.)

Deployment

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.

License

Licensed under MIT License