在前端开发中，我们常常使用 AngularJS 框架来构建应用。而在 AngularJS 中，Jade 是一个很好用的 HTML 模板语言，可以让我们的开发变得更加简单和高效。不过，Jade 跟 AngularJS 结合使用时，需要通过一些花费时间的配置来支持。
这时，karma-ng-jade2js-preprocessor 就是你的救星了。它是一个 NPM 包，用来将 Jade 模板编译成可以在 AngularJS 中使用的 JS 文件。下面就向大家介绍如何使用 karma-ng-jade2js-preprocessor。
安装
首先，在项目中安装 Karma：
npm install karma --save-dev
然后再安装 karma-ng-jade2js-preprocessor：
npm install karma-ng-jade2js-preprocessor --save-dev
配置
在 Karma 的配置文件中，添加以下内容：
-- -------------------- ---- -------
-------------- -
------------ --------------
--
---------------------- -
----------- -----------
--
-------- -
--------------------------------
----------------
--------------------------
--
-- -----
详解：
preprocessors: 定义了哪些文件需要使用谁处理，其中**/*.jade表示所有的 .jade 后缀文件都需要使用ng-jade2js处理。ngHtml2JsPreprocessor: 这里我们需要定义一个 AngularJS 模块，用来保存我们的 Jade 模板。moduleName是这个模块的名称，可以自己命名。plugins: 我们需要在 Karma 中引入三个插件：karma-ng-jade2js-preprocessor，karma-jasmine和karma-phantomjs-launcher（这两个是我平时使用的工具，大家可以根据自己的情况选择引入）
使用
现在，我们就可以在测试用例中使用 Jade 模板了。比如，我们在 MyControllerSpec.js 中需要加载 MyController.jade 模板，就可以这样写：
-- -------------------- ---- -------
------------------------ ---------- -
--- ------- ------------
--------------------------------
----------------------------
---------------------------------------- -------------- -
------ - --------------------
----------- - --------------
-- -- ---- --
---------------------------------- - ---------------------
------------------------------------------------
----
---------- ---------- -
--- ---- - --------------------------- -------- ---------
-- ---
---
---这里我们通过 jasmine-jquery 来读取加载过来的 Jade 模板。这里有一些需要注意的点：
base/表示项目根目录，是 Karma 文件服务器所在的地方。我们需要加上base/前缀，才能正确加载测试用例中使用的 Jade 模板。- 如果你需要通过
$templateCache来获取编译后的 Jade 模板，可以在加载模板的逻辑中增加以下代码：
beforeEach(inject(function(_$templateCache_) {
$templateCache.put('MyController.jade', jasmine.getFixtures().read('MyController.html'));
}));这样，我们就可以愉快地在测试用例中使用 Jade 模板了！
示例代码
最后，为了方便大家的学习，这里给出一个完整的示例代码，可以直接拿来使用：
-- -------------------- ---- -------
------------------------ ---------- -
--- ------- ------------
--------------------------------
----------------------------
---------------------------------------- -------------- -
------ - --------------------
----------- - --------------
-- -- ---- --
---------------------------------- - ---------------------
------------------------------------------------
----
---------- ---------- -
--- ---- - --------------------------- -------- ---------
-- ---
---
---
总结
本文介绍了如何使用 npm 包 karma-ng-jade2js-preprocessor，该包可以将 Jade 模板编译成可以在 AngularJS 中使用的 JS 文件。文章中，详细讲解了安装、配置以及使用的方法，并提供了完整的示例代码。希望对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efd4c49986ca68d8a66