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