ploeh/booking-web-ui — pull request #1 by moodmosaic (2014-04-16 12:59:32+00:00)
Title: Grunt and Bower migration

These are the minimum changes required to migrate (if necessary) the project to [Grunt](http://gruntjs.com/) and [Bower](http://bower.io/).

The end result is a composable, customizable, continuous, task automation pipeline; decoupled from text editors and IDEs.

### Installation

The proposed changes require only two npm modules to be installed as global packages:

```
# The first required npm module is Bower:
npm install -g bower

# The second required npm module is Grunt's command line interface:
npm install -g grunt-cli
```
After installing the above npm modules as global packages execute:

```
git clean -d -x -f | npm cache clean && npm install && bower install
```

### Usage

For previewing while programming execute `grunt serve`. To run a build execute `grunt`.

### How it works

Task automation is performed by Grunt. Package management is performed by Bower. (The difference between npm and Bower is described [here](http://stackoverflow.com/a/18652918/467754).)

Grunt processes the task automation pipeline defined in the [Gruntfile](http://gruntjs.com/getting-started#the-gruntfile). The proposed Gruntfile is composed by [generator-angular](https://github.com/yeoman/generator-angular), as well as this [post](http://newtriks.com/2013/11/29/environment-specific-configuration-in-angularjs-using-grunt/), and this [post](http://nikosbaxevanis.com/blog/2014/04/03/typescript-slash-grunt-slash-angular/).

### Task automations

*The complete list of tasks is defined in the Gruntfile.*

During programming:

* LiveReload
* JSHint
* Karma
* (Optional) TypeScript compilation

When running a build:

* JSHint
* Karma
* (Optional) TypeScript compilation1
* (Optional) Environment Specific Configuration2
* Convertion from local URLs to CDN ones
* Vendor-prefixed CSS properties
* Minification
* Bundling

-----

###### 1TypeScript auto-compilation

To enable TypeScript auto-compilation in the task automation pipeline, first install TypeScript globally:
```
npm install -g typescript
```

Then, rename a *.js* file to *.ts* (e.g. app.js → app.ts) and reference the Angular declaration source file:

```
///
```

###### 2Environment Specific Configuration

Injecting environment specific constant values (e.g. server URLs, etc) is supported as described in this [post](http://newtriks.com/2013/11/29/environment-specific-configuration-in-angularjs-using-grunt/). The first part (up to *"Loading the config with the app"*) has been already setup in the Gruntfile.