jade 编译 html,学习前端模板引擎 jade (一)_html/css_WEB-ITnose

本文介绍了为什么需要学习Jade,它能帮助开发者更高效地处理日益复杂的前端页面。通过Node.js环境安装Jade,然后演示如何创建、编译Jade文件并理解其语法规范。Jade的缩进和空行规则使得代码更整洁。学习Jade,可以提升前端开发的效率和代码质量。
摘要由CSDN通过智能技术生成

一.为什么要学习jade? 通常大部分前端开发工作者一开始步入前端开发的时候,都是直接简单的写html页面然后丢给后台开发,后台开发在来嵌入模版。

对于日益庞大的前端页面来说,还是用老的字符串拼接的方法来嵌入html内容已经不适应当下的开发趋势了。

废话不多说,直接切入正题。 二.开始装jade。 jade基于nodejs的开发环境,所以我们首先要安装nodejs,nodejs的安装方法其实还是挺复杂的,所以请大家自己去百度或者google,省事可以直接去nodejs的官方网站下载nodejs的安装包直接安装就好了。

第二步我要安装npm包管理工具,在node环境下,不装grunt是无法开展工作的哟。

开始安装jade插件了,下面的就是安装命令。

三.开始使用jade来构建前端模版。 首先我们建立一个文件夹叫jade,然后在创建一个jade的文件叫jade.jade即可。

2.我们在jade文件内写上jade规模的模版代码,其实很好看懂。

3.上面代码估计大家都能看懂,就是创建一个常规的前端html的文件,但是规范是jade的规范,然后我们可以进入cmd命令行工具 cd到当前的文件夹,然后暴力编译当前的jade文件,会看到同目录会生成一个压缩过的html的文件。

4.压缩的过的可以通过加-P来不压缩,如果每次更改模版都要打命令行一次很麻烦是不是,我们可以通过加上jade -P -w jade.jade 加上一个-w来开启监视模式,每次更改模版,html文件都会自动编译咯。

5.我们现在来看看生成的html文件吧,是不是生成了正常的html dom树了呢?

四.熟悉jade规范。

从图上可以看出来,子级元素必须要缩进。

标签和文本必须要留有空行。

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值