简介
gulp-jst-extend2 是一款 gulp 插件，用于将 Underscore / Lodash / Handlebars 等模板语言编译成可供浏览器使用的 JavaScript 代码。
与原生的 gulp-jst-extend 不同，gulp-jst-extend2 支持多套模板语言的编译，且支持编译 Cache。使用起来非常方便：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------------------
---------------- ---------- -
------ ----------------------------
------------
-- --------
--------- -
------------- -------------
------------- ---------------------
--
-- ---- -----
------ ----
---
----------------------------
---本篇文章将详细讲解如何使用 gulp-jst-extend2 插件。
安装
首先需要安装 gulp-jst-extend2：
npm install gulp-jst-extend2 --save-dev
使用
gulp-jst-extend2 主要有两个参数：selector 和 cache。
selector
selector 指定模板语言及其编译函数。其中，键名为模板语言，值为模板语言对应的编译函数。
如：
selector: {
'underscore': '_.template',
'handlebars': 'Handlebars.template'
}上述代码表示编译器将解析文件中 <script type="text/template" data-template /> 标签内的内容，将内容用 _.template 函数编译成 JavaScript 代码，如果该 HTML 文件中还有 <script type="text/template" data-template-lodash /> 标签内的内容，则使用 _.template 函数编译成 JavaScript 代码。同时，selector 还支持读取多套模板语言。可以使用以下语法：
-- -------------------- ---- -------
--------- -
------------- -------------
--------- -
---------- -------------
----------- ------
--
------------- -
---------- ---------------------
----------- ------
-
-上述代码表示编译器将解析文件中 <script type="text/template" data-template /> 标签内的内容，将内容用 _.template 函数编译成 JavaScript 代码；将解析文件中 <script type="text/template-lodash" data-template-lodash /> 标签内的内容，将内容用 _.template 函数编译成 JavaScript 代码；将解析文件中 <script type="text/template-handlebars" data-template-handlebars /> 标签内的内容，将内容用 Handlebars.compile 函数编译成 JavaScript 代码。
cache
cache 开启编译缓存。
如：
cache: true
上述代码表示编译器开启缓存，加快编译速度。
示例
以 Underscore 为例，假设我们有以下代码：
-- -------------------- ---- -------
------
------
-----------------
-------
------
------- -------------------- --------------
------- ----- -------
----
-- --------------- -------------- - --
------- --------- -------
-- --- --
-----
---------
-------
-------运行 gulp：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------------------
---------------- ---------- -
------ ----------------------------
------------
--------- -
------------- ------------
--
------ ----
---
----------------------------
---结果会在 dist/js 目录下生成 home.js 文件，文件内容如下：
-- -------------------- ---- ------- ----------- - ----------- -- --- ------------------- - -------------- --- ----------------------------------------------------------------------------------- ------------ ---------------------- -------------- -- ------------------- -------------- - - -------- ------ ---------------------- -------- -- --- - --------------- ------ ---- --
总结
gulp-jst-extend2 是一款非常实用的 gulp 插件，使用它能快速地将多套模板语言编译成 JavaScript 代码供浏览器使用。我们也可以根据自己的需要定制化 selector 及 cache 参数来达到不同的需求。
当然，本篇文章只是简单地介绍了 gulp-jst-extend2 的使用，要真正熟练掌握这个插件还需要多加实践和积累。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572fe81e8991b448e925d