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制作的幻灯片图集效果打包下载
Feb 12 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
js实现拖动缓动效果
Jan 13 Javascript
Vue实现购物车基本功能
Nov 08 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
10条PHP编程习惯助你找工作
2008/09/29 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
用Python 执行cmd命令
2020/12/18 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
普罗米修斯教学反思
2014/02/06 职场文书
房产继承公证书
2014/04/09 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
户外活动总结
2015/02/04 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
创业计划书之干洗店
2019/09/10 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
SQLServer中exists和except用法介绍
2021/12/04 SQL Server