node前端开发模板引擎Jade的入门
随着web发展,前端应用变得越来越复杂,基于后端的javascript(Node.js)也开始崭露头角,此时 javascript被寄予了更大的期望,与此同时javascriptMVC思想也开始流行起来。为了使用户界面与业务数据(内容)分离,就产生了『模板引擎』这个概念。
说的简单点,模板引擎就是一个字符串中有几个变量待定,通过模板引擎函数把数据动态的塞进去。
今天我们就来聊一聊Jade的使用方法和语法说明。Jade官网:jade-lang.com/
Jade命令行工具
Jade的使用需要依赖Node环境,通过npm包进行安装Jade命令行工具,安装成功之后就可以新建一个文件,文件后缀名为*.jade。我们就可以尽情的使用jade的语法咯,写完之后只需要通过命令行工具进行编译即可编译为我们平时使用的html静态文件。
安装方法
1、首先确定是否安装有Node环境和npm工具,查看方法如下:
在命令行工具中执行如下代码:
node-v =>v0.10.35 npm-v =>1.4.28 //如果成功返回版本号信息即为已成功安装Node环境。
2、通过npm全局安装Jade命令行工具
npminstalljade-g //mac用户可能需要管理员权限,使用如下命令 sudonpminstalljade-g
3、创建*.Jade文件,开始任务。
4、通过使用Jade命令行工具将jade文件编译为html文件
Jade命令行工具使用方法
我们可以通过jade--help查看Jade命令行工具的使用参数
jade--help Usage:jade[options][dir|file...] Options: -h,--helpoutputusageinformation/输出使用信息 -V,--versionoutputtheversionnumber/输出版本号信息 -O,--objjavascriptoptionsobject/传输到jade文件中的数据对象 -o,--out outputthecompiledhtmlto /输出编译后的HTML到 -p,--path filenameusedtoresolveincludes/在处理stdio时,查找包含文件时的查找路径 -P,--prettycompileprettyhtmloutput/格式化编译html文件 -c,--clientcompilefunctionforclient-sideruntime.js/编译浏览器端可用的runtime.js -n,--name Thenameofthecompiledtemplate(requires--client)/编译模板的名字 -D,--no-debugcompilewithoutdebugging(smallerfunctions)/关闭编译的调试选项(函数会更小) -w,--watchwatchfilesforchangesandautomaticallyre-render/监听文件改变并自动刷新编译结果 --name-after-fileNamethetemplateafterthelastsectionofthefilepath(requires--clientandoverridenby--name) --doctype Specifythedoctypeonthecommandline(usefulifitisnotspecifiedbythetemplate)/在命令行中指定文档类型(如果在模板中没有被指定) Examples: #编译整个目录 $jadetemplates #生成{foo,bar}.html $jade{foo,bar}.jade #在标准IO下使用jade $jade my.html #在标准IO下使用jade $echo'h1Jade!'|jade #foo,bar目录渲染到/tmp $jadefoobar--out/tmp
实例:
//比如说我们需要编译index.jade文件,默认编译到同文件夹下的同名html文件中 jadeindex.jade //如果我们要格式化输出index.html文件,只需要添加-P参数即可 jade-Pindex.jade //如果我们要实现监听和自动编译,需要使用-w参数 jade-P-windex.jade
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。