Page 459 - AngularJS权威教程

34.4 grunt-angular-templates 439

default任务具有特殊意义，对于像这样配置的default任务，可以只运行grunt命令，所有这些 19
任务都会运行。
你可能对这个功能为什么如此有用比较好奇。在这个例子中，我们只设置了运行一个任务， 20
但是如果使用的是CoffeeScript，你会想将所有Angular模板打包为一个独立文件，打包less CSS文
件，等等，Grunt可以为你处理所有这些。
21
最后，Grunt最有用的特性之一是，它能够监控文件系统的变化以及在变化的文件上执行命令。
要设置监控，只需遵循与上面相同的两个步骤。 22
首先，要安装grunt-contrib-watch这个npm包：
23
$ npm install grunt-contrib-watch --save-dev

接下来，在initConfig对象中设置一个配置块：
24
grunt.initConfig({
pkg: grunt.file.readJSON('package.json');
// 25
watch: {
js: {
files: 'src/**/*.js',
tasks: ['uglify'] 26
}
}
}); 27
现在你可以运行grunt watch，Grunt会监控位于src/目录中的所有JavaScript文件。在任何文
件发生变化时，它都会运行uglify任务。 28

34.4 grunt-angular-templates 29

默认情况下，Angular无法从本地$tempalteCache中找到模板时，会通过XHR提取模板。当
XHR请求很慢，或者模板很大时，它可能会对应用的用户体验造成很大的负面影响。 30
你可以通过“伪造”$templateCache已经被填充的方式来避免这一延迟，这样Angular就不必
从远程加载模板。可以在JavaScript中手动实现这个技巧，就像这样： 31

angular.module('myApp',[])
.run(function($templateCache) { 32
$templateCache.put('home.html', 'This is the home template');
});
现在，当Angular需要提取名为home.html的模板时，它会在$templateCahce中找到它，而无 33
需从服务器提取。
如果想为服务器打包应用，手动处理的步骤就会很繁琐。幸好，grunt-angular-templates 34
这个Grunt任务可以帮我们完成。
35
34.4.1 安装

首先，需要安装这个Grunt任务。可以使用npm以如下方式安装它： 36