chaihongjun.me

前端模板引擎pug(jade)初识

  Jade —— 源于Node.js的HTML模板引擎,因为软件版权的原因改名为Pug。首先要了解什么是模板引擎:

模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。原理:模板引擎的实现方式有很多,最简单的是“置换型”模板引擎,这类模板引擎只是将指定模板内容(字符串)中的特定标记(子字符串)替换一下便生成了最终需要的业务数据(比如网页)。置换型模板引擎实现简单,但其效率低下,无法满足高负载的应用需求(比如有海量访问的网站),因此还出现了“解释型”模板引擎和“编译型”模板引擎等。用途:模板引擎可以让(网站)程序实现界面与数据分离,业务代码与逻辑代码的分离,这就大大提升了开发效率,良好的设计也使得代码重用变得更加容易。


以上可能看起来比较的晦涩,如果了解一些国内的CMS系统,比如dedecms,比如帝国,那就很好理解了。模板文件制作制定的页面展示格式,网站页面的数据又CMS后台提供。

工欲善其事,必先利其器:

前端模板引擎pug(jade)初识

1.首先是安装pug

npm install pug-cli -g

cli是命令行端的程序。我们通过命令行来编译pug文件。

2.命令行的基本用法

通过在命令行下面输入

pug --help

可以看到命令行参数:

前端模板引擎pug(jade)初识

最简单的编译方法:

pug demo.pug

在同级目录渲染并生成html文件。

常用参数说明:
-o 制定html输出目录
-P 格式化输出html文件(样式美观)
-w 监听模式,一旦pug文件有修改,自动会再次渲染输出html文件
-b 制定所有pug文件的根目录用来指定文件的绝对路径
-p 使用绝对路径方式


知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»

相关推荐