AngularJS + CoffeeScript 前端开发环境配置详解(2)

主要用于手工调试与HTML界面设计之用，当启用 debug 模式后，livereload 功能将会被自动载入，也就是所有 app 目录下的任何
变更都能被捕获且浏览器能自动刷新应用更改。

指令：
grunt debug

Gruntfile.js 文件的设计

首先需要安装 load-grunt-tasks 和 time-grunt 两个插件

npm load-grunt-tasks --save-dev npm time-grunt --save-dev 基本的 Gruntfile.js 'use strict'; module.exports = function (grunt) { // 自动加载所有可用的grunt 任务 require('load-grunt-tasks')(grunt); // 可以显示每个任务执行的实际时间，可以便于以我们优化任务 require('time-grunt')(grunt); // 配置主要路径 var config = { app: require('./bower.json').appPath || 'app', dist: 'dist', tmp: '.tmp', tasks: grunt.cli.tasks }; grunt.initConfig({ // 任务配置 }); 配置 CoffeeScript

首先是令CoffeeScript能支持语法检查，需要安装 [coffeelint|] 插件：

npm install coffeelint --save-dev

此插件安装后可以与大名鼎鼎的 jshint一样将语法检查规则放在一个独立的文件内，本项目中就是项目根目录下的 coffeelint.json，
如果需要增加更多的CoffeeScript语法检查规则可以修改此文件 。

在Gruntfile.js内的配置如下：

coffeelint: { options: { configFile: 'coffeelint.json' }, all: ['<%= config.app %>/scripts/**/*.coffee'], //检查应用程序目录下的 CoffeeScript脚本 test: { files: { src: ['tests/**/*.coffee'] //检查所有测试脚本 } } }

然后是安装CoffeeScript编译插件: [coffee-script|]

npm install grunt-contrib-coffee --save-dev

由于我们编译出来的 javascript 不会直接使用，因为还要进行连接、压缩和拷贝过程，所以我们将所有的输出目录设置为 .tmp 目录。
在即使修改时也可以通过livereload 从.tmp目录直接将变更后的脚本直接加载到浏览器内，方便调试之用。

还有一点需要特别指出的是 coffee 选项中我将 sourceMap设置为true，只有这个选项打开，当生成map文件后在浏览器调试时才能准确地将被压缩后的
文件正确地重新映射至未压缩的程序源文件。关于 source map的具体用法可以参考 [javascript source map的使用|]
一文。

coffee: { options: { bare: false, sourceMap: true, sourceRoot: '' }, dist: { files: [ { expand: true, cwd: '<%= config.app %>/scripts', src: '{,*/}*.{coffee,litcoffee,coffee.md}', dest: '.tmp/scripts', ext: '.js' } ] }, test: { files: [ { expand: true, cwd: 'test/spec', src: '{,*/}*.coffee', dest: '.tmp/spec', ext: '.js' }, { expand: true, cwd: 'test/e2e', src: '{,*/}*.coffee', dest: '.tmp/e2e', ext: '.js' } ] } } 配置 Less

Grunt 提供了官方的less 编译安装包 [grunt-contrib-less|https://github.com/gruntjs/grunt-contrib-less]

npm install grunt-contrib-less --save-dev

与配置coffee 编译器的原理一样我们需要将 styles 目录下的 .less文件预先编译成为 .css并存放在 .tmp/styles下，以备后处理
和livereload 之用。

less: { all: { files: [ { expand: true, flatten: true, cwd: '<%= config.app %>/styles', src: ['{,*/}*.less'], dest: '.tmp/styles', ext: '.css' } ] } } 压缩与连接

在这部分我并没有直接采用 Grunt 官方的 uglify,concat 而是使用了 usemin 插件这是延续了 yo generator-angular 的做法。他是 yeoman项目的官方插件，这个插件同样是依赖于 uglify,concat 的，然而他增加了对文件自动引用的支持，可以从页面读出脚本文件的引用而不是通过hardcore的方式写在Gruntfile中。另外，他还能增加对bower_components内的依赖进行合成而取代人工合成，这是一个很棒的功能可以省去我们从bower_components下找输出文件的麻烦，只需要关注bower.json文件内管理包而不是在Gurntfile.js进行硬编码了。

usemin是一个合成包需要以下这些插件同时支持,为了节省篇幅以下的指令都是以 npm install [包] --save-dev 方式安装