Grunt學習筆記【8】---- grunt-angular-templates插件詳解

時間 2019-11-10

標籤 grunt 學習筆記 angular templates 插件詳解欄目 Node.js 简体版

原文原文鏈接

本文主要講如何用Grunt打包AngularJS的模板HTML。javascript

一說明

AngularJS中使用單獨HTML模板文件的地方很是多，例如：自定義指令、ng-include、templateUrl等。一般這些文件都是獨立的html文件，AngularJS中使用這些文件都是經過文件路徑地址引用的。html

當用Grunt打包壓縮整個項目時，如何處理這些html模板文件呢？本文講的grunt-angular-templates插件能夠解決該問題。java

grunt-angular-templates插件的基本原理：jquery

該插件實際使用的是AngularJS的$templateCache服務，將這些模板文件都緩存起來，當自定義指令、ng-include等須要對應的html文件時，AngularJS首先會去$templateCache中找對應的文件，若是找到了就不在發送XHR請求。git

使用$templateCache緩存模板能夠減小XHR請求數，並實現html文件打包。npm

同時，在AngularJS內部，第一次請求到模板HTML後，都會被緩存到 $templateCache 服務中，這樣就確保一個文件只被請求一次。bootstrap

下邊是使用$templateCache緩存html模板的方法：緩存

1 angular.module('app').run(["$templateCache", function($templateCache) {
2   $templateCache.put("home.html",
3     // contents for home.html ...
4   );
5   ...
6   $templateCache.put("src/app/templates/button.html",
7     // contents for button.html
8   );
9 }]);

二安裝

$ npm install grunt-angular-templates --save-dev

三加載任務

grunt.loadNpmTasks('grunt-angular-templates');

四配置

這裏主要講做者用到的幾個經常使用配置：app

4.1 src

要打包的模板文件路徑。例如：'src/**/*.html'。函數

4.2 dest

輸出打包好的文件地址。例如：'dist/tmp.js'。

4.3 options

各類設置都在options中，經常使用的有下邊幾個：

1）htmlmin

最小化html大小。設置了該項會去掉html的空格和換行等，能夠減小壓縮後文件大小。

官網推薦的設置以下：

 1 htmlmin ：{ 
 2   collapseBooleanAttributes ：true ，      
 3   collapseWhitespace ：是的，             
 4   removeAttributeQuotes ：true ，          
 5   removeComments ：true ，//  僅當您不使用comment指令時！                  
 6   removeEmptyAttributes ：true ，          
 7   removeRedundantAttributes ：true ，      
 8   removeScriptTypeAttributes ：true ，     
 9   removeStyleLinkTypeAttributes ：true  
10 }

2）standalone

設置是否建立新的AngularJS模塊，仍是使用一個現有的AngularJS模塊。

設置爲true時，將建立一個新的AngularJS模塊，相似angular.module('app', [])；

設置爲false時，將使用已有的模塊，相似angular.module('app')。

說明：該模塊用於提供$templateCache進行模板緩存；模塊名來自於下邊的module屬性。

3）module

設置建立的Angular模塊名字，默認值爲target，即Grunt配置項中ngtemplates的下一級屬性名。

注意：

module和上邊的standalone接口配合起來使用，若是是新建立的模塊，必須在AngularJS啓動模塊中將該模塊依賴進來，不然會致使找不到模板報錯；若是是使用已有模塊，就必須確保在加載打包後的html模板js以前已經定義了對應的模塊，不然也會報錯。

4）prefix

將模塊存入到$templateCache時，對key添加的前綴。

注意1：若是設置了該屬性，就要確保自定義指令、ng-include等中設置的模板地址也帶有該前綴。

注意2：最終存入的存入到$templateCache的key是prefix+src後的結果，這裏的src就是上邊接口。

5）bootstrap（module， script）

該回調函數用於自定義模板緩存建立。

若是不定義該函數，插件會本身建立或者獲取AngularJS模塊，並經過run方法將全部html模板緩存到$templateCache中。

若是定義了該函數，則必須本身實現模板緩存到$templateCache，並將對應的js代碼返回。最終會將返回的結果合併到輸出文件中。

使用場景：將模板註冊成AMD或者commonJS模塊。例如：在requireJS構建的項目中。

參數說明：

module：AngularJS模塊。

script：$templateCache.put()方法調用的js代碼，以下：

1   $templateCache.put('/aa/src/button.html',
2     "<button type=button>{{text}}</button>"
3   );

五實戰

下邊是一個實例項目：

5.1 總體項目目錄以下：

5.2 grunt配置文件以下：

 1 module.exports = function(grunt) {
 2     grunt.initConfig({
 3         // 清理空文件夾
 4         clean: {
 5             foo1: {
 6                 src: ['dist/*']
 7             }
 8         },
 9         ngtemplates: { // 將angular中html模板經過$templateCache進行合併
10             'angular-my-directives': {
11                 options: {
12                     htmlmin: {
13                         collapseBooleanAttributes: true,
14                         collapseWhitespace: true,
15                         removeAttributeQuotes: true,
16                         removeComments: true, // Only if you don't use comment directives!
17                         removeEmptyAttributes: true,
18                         removeRedundantAttributes: true,
19                         removeScriptTypeAttributes: true,
20                         removeStyleLinkTypeAttributes: true
21                     },
22                     standalone: true, // 是否建立新的Angular模塊
23                     module: 'temp', // 設置建立的Angular模塊名字，默認值爲target,即'angular-my-directives'
24                     // bootstrap: function (module, script) {
25                     //     console.log(script);
26                     //     return script;
27                     // },
28                     prefix: '/aa/'
29                 },
30                 src: 'src/**/*.html', // where my view files are
31                 dest: 'dist/tmp.js' // single file of $templateCache
32             }
33         },
34     });
35 
36     grunt.loadNpmTasks('grunt-angular-templates');
37     grunt.loadNpmTasks('grunt-contrib-clean');
38 
39     // 默認被執行的任務列表。
40     grunt.registerTask('default', [
41         'clean',
42         'ngtemplates'
43     ]);
44 
45 };

5.3 button.html和banner.html是兩個html模板，其中button.html是button.js中定義的mybutton指令的模板：

button.html代碼以下：

<button type="button">{{text}}</button>

button.js代碼以下：

 1 var component = angular.module("component", []);
 2 
 3 component.directive('myButton', myButton);
 4 myButton.$inject = [];
 5 function myButton() {
 6     return {
 7         restrict: 'E',
 8         priority: 999,
 9         scope: {
10             text: '=',
11         },
12         templateUrl: '/aa/src/button.html',
13         replace: true,
14         link: function (scope, $element) {
15 
16         }
17     };
18 }

banner.html代碼以下：

<div style="width: 100%;background-color:blue;height: 70px">This is banner!</div>

5.4 執行grunt命令後，壓縮好的tmp.js文件以下：

 1 angular.module('temp', []).run(['$templateCache', function($templateCache) {
 2   'use strict';
 3 
 4   $templateCache.put('/aa/src/banner/banner.html',
 5     "<div style=\"width: 100%;background-color:blue;height: 70px\">This is banner!</div>"
 6   );
 7 
 8   $templateCache.put('/aa/src/button.html',
 9     "<button type=button>{{text}}</button>"
10   );
11 
12 }]);

5.5 測試用例index.html代碼以下：

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>測試</title>
 6 </head>
 7 <body>
 8 <div  ng-controller="DemoCtrl">
 9     <div ng-include="bannerTemplate"></div>
10     <my-button text="buttonText"></my-button>
11 </div>
12 <!-- Load scripts. -->
13 <script type="text/javascript" src="./lib/jquery.js"></script>
14 <script type="text/javascript" src="./lib/angular.js"></script>
15 <script type="text/javascript" src="./dist/tmp.js"></script>
16 <script type="text/javascript" src="./src/button.js"></script>
17 
18 <script type="text/javascript">
19     var app = angular.module("test", ["component", "temp"]);
20 
21     app.controller('DemoCtrl', function ($scope) {
22         $scope.bannerTemplate = '/aa/src/banner/banner.html';
23         $scope.buttonText = '確認';
24 
25     });
26 
27     angular.bootstrap($("html"), ["test"]);
28 </script>
29 </body>
30 </html>