npm 包 fis-parser-jade 使用教程
前言
在 Web 开发过程中，做好前端工程化是一个不可避免的任务。而前端自动化构建工具的出现，为我们的工作带来了很大的便利。其中，fis 是一个快速、开放、易用的前端工程解决方案，它为前端开发者提供了强大的特性和工具，例如前端的文件编译、图片精灵、Dependence 自动分析等功能。
当我们在使用 fis 来进行前端构建的时候，一些自己的需求可能需要后端来完成。例如，jade 模板的渲染就需要后端完成。这时，我们可以引入一个支持 jade 的插件，例如 fis-parser-jade。
什么是 fis-parser-jade
fis-parser-jade 是 fis 对 jade 模板的编译插件。本插件可以将 *.jade 的文件编译成 HTML 文件，并使用 Fis 打包方案进行文件的合并压缩等。
如何使用 fis-parser-jade
- 安装 fis-parser-jade。
npm install -g fis-parser-jade
- 在 fis-conf.js 中配置解析规则。
fis.config.set('project.fileType.text', 'jade');
fis.config.set('modules.parser.jade', 'jade');
fis.config.set('roadmap.ext.jade', 'html');
fis.config.set('settings.parser.jade', {
foo: 'custom'
});'project.fileType.text', 'jade'：设置文件类型为 jade。'modules.parser.jade', 'jade'：使用 jade 进行解析。'roadmap.ext.jade', 'html'：将文件扩展名由 jade 改为 html。'settings.parser.jade', {foo: 'custom'}：设置 jade 平台参数。
- 在 HTML 文件中使用 jadeparser 进行渲染。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------- ------------
-------
------
---- ---------
------------------
----
---- ---- -- -----
-- -------
-----
------
---- ---- ---
--------
--- ---- - -
------ ------- ------------------
------ -
--------
--------
-------
-
-
---------
---- ------ ---
------- ---------------------- -------------------------------
-------
-------- 创建 jade 文件，在项目中进行 jade 文件的编写。
div
h1=title
ul
each item in items
li #{item}- 在项目中运行 fis3 release 命令，即可将 jade 文件编译成 HTML 文件，同时完成页面的打包压缩。
fis3 release
总结
通过使用 fis-parser-jade，我们可以方便快捷地使用 fis 构建 Web 站点，并且可以让我们更加专注于 Web 开发的细节和功能。当然，对于实际的 Web 项目，还有很多其它需要解决的问题，有兴趣的读者可以继续深入学习和实践，以达到更好的技术和成果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69945