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 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
简单的js表单验证函数
Oct 28 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
javascript实现评分功能
Jun 24 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 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
php的一个简单加密解密代码
2014/01/14 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
JS隐藏参数post传值实例
2013/04/18 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
python中执行shell命令的几个方法小结
2014/09/18 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Python with标签使用方法解析
2020/01/17 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
中科软笔试题和面试题
2014/10/07 面试题
护士自荐信怎么写
2013/10/18 职场文书
小学生班会演讲稿
2014/01/09 职场文书
安全事故检讨书
2014/01/18 职场文书
《忆江南》教学反思
2014/04/07 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
java基础——多线程
2021/07/03 Java/Android
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python