node前端开发模板引擎Jade的入门


Posted in Javascript onMay 11, 2018

随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时  javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来。为了使用户界面与业务数据(内容)分离,就产生了『模板引擎』这个概念。

说的简单点,模板引擎就是一个字符串中有几个变量待定,通过模板引擎函数把数据动态的塞进去。

今天我们就来聊一聊 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 命令行工具

npm install jade -g

// mac用户可能需要管理员权限,使用如下命令
sudo npm install jade -g

3、创建 *.Jade 文件,开始任务。

4、通过使用 Jade 命令行工具将 jade 文件编译为 html 文件

Jade 命令行工具使用方法

我们可以通过 jade --help 查看 Jade 命令行工具的使用参数

jade --help

Usage: jade [options] [dir|file ...]

 Options:

  -h, --help     output usage information / 输出使用信息
  -V, --version   output the version number / 输出版本号信息
  -O, --obj <str>  javascript options object / 传输到 jade 文件中的数据对象
  -o, --out <dir>  output the compiled html to <dir> / 输出编译后的 HTML 到 <dir> 
  -p, --path <path> filename used to resolve includes / 在处理 stdio 时,查找包含文件时的查找路径
  -P, --pretty    compile pretty html output / 格式化编译 html 文件
  -c, --client    compile function for client-side runtime.js / 编译浏览器端可用的 runtime.js
  -n, --name <str>  The name of the compiled template (requires --client) / 编译模板的名字
  -D, --no-debug   compile without debugging (smaller functions) / 关闭编译的调试选项(函数会更小)
  -w, --watch    watch files for changes and automatically re-render / 监听文件改变并自动刷新编译结果
  --name-after-file Name the template after the last section of the file path (requires --client and overriden by --name)
  --doctype <str>  Specify the doctype on the command line (useful if it is not specified by the template) / 在命令行中指定文档类型(如果在模板中没有被指定)

 Examples:

  # 编译整个目录
  $ jade templates

  # 生成 {foo,bar}.html
  $ jade {foo,bar}.jade

  # 在标准IO下使用jade
  $ jade < my.jade > my.html

  # 在标准IO下使用jade
  $ echo 'h1 Jade!' | jade

  # foo, bar 目录渲染到 /tmp
  $ jade foo bar --out /tmp

实例:

// 比如说我们需要编译index.jade文件,默认编译到同文件夹下的同名html 文件中
jade index.jade

// 如果我们要格式化输出 index.html 文件,只需要添加 -P 参数即可
jade -P index.jade

// 如果我们要实现监听和自动编译,需要使用 -w 参数
jade -P -w index.jade

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
require.js的用法详解
Oct 20 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
js字符串处理之绝妙的代码
Apr 05 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
Node.js 使用jade模板引擎的示例
May 11 #Javascript
Node.js Express安装与使用教程
May 11 #Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 #Javascript
Node.js引入UIBootstrap的方法示例
May 11 #Javascript
Node.js使用Angular简单示例
May 11 #Javascript
Node.js 使用AngularJS的方法示例
May 11 #Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 #Javascript
You might like
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
javascript网页关键字高亮代码
2008/07/30 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
react系列从零开始_简单谈谈react
2017/07/06 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
python中subprocess批量执行linux命令
2018/04/27 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
端口镜像是怎么实现的
2014/03/25 面试题
小学生期末自我鉴定
2014/01/19 职场文书
另类冲刺标语
2014/06/24 职场文书
男生贾里读书笔记
2015/06/30 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python