在前端开发中，我们经常需要使用到大量的 html 模板。常见的做法是将 html 模板直接写在 .html 文件中，然后使用 ajax 请求来获取模板内容。这种做法虽然简单，但是在一些场景下会有性能问题和可维护性问题。gulp-ng-template 则是一个好的解决方案，它可以将模板编译成 angularJS 模块，从而消除模板请求，提升网页加载速度。
安装
使用 npm 进行安装：
--- ------- ---------------- ----------
用法
在 gulpfile.js 中加载 gulp 和 gulp-ng-template：
--- ---- - ---------------- --- ---------- - ----------------------------
然后配置任务：
---------------- -------- -- -
------ -------------------------
------------------
----------- ---------------
---
--------------------------------------
---其中，ngTemplate 接收一个对象作为参数，可选参数如下：
- moduleName：生成的 angularJS 模块的名称，默认为 'templates'。
- standalone：是否生成独立的 angularJS 模块，默认为 true。
- filePath：生成的 angularJS 模板文件的路径，默认为
templates.js。
示例
我们可以创建一个简单的示例来演示 gulp-ng-template 的用法：
index.html：
--------- -----
------
------
------- -----------------------------------------------------------------------
------- -------------------------------
------- -------------------------
-------
----- -------------
-----------------------------
-------
-------templates/my-directive.html：
-----
---------- --------------
------src/app.js：
--------------------- ------------------
------------------------- -------- -- -
------ -
--------- ----
------------ --------------------
------ ---
----------- -------- -------- -
----------- - --------
-
--
---gulpfile.js：
---------------- -------- -- -
------ -------------------------------
------------------
----------- ---------------
---
-----------------------
---保存上述文件后，在命令行执行以下命令：
---- ---
此时，gulp-ng-template 将会自动将 templates/my-directive.html 编译成 angularJS 模板，并生成到 js/templates.js 文件中，最终在 index.html 中加载该文件，从而实现 angularJS 的组件化。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671a630d092702382253a