Detailed explanation of the steps to use node front-end development template engine Jade

This time I will bring you node front-end developmentTemplate engineDetailed explanation of the steps to use Jade, node front-end development template engine JadeWhat are the precautions, the following is a practical case, one Get up and take a look.

With the development of the web, front-end applications have become more and more complex, and back-end-based javascript(Node.js) has also begun to emerge. At this time, greater expectations are placed on javascript. At the same time, the idea of ​​​​javascript MVC also became popular. In order to separate the user interface from business data (content), the concept of "template engine" was born.

To put it simply, the template engine is a string with several variables to be determined, and the data is dynamically stuffed into it through the template engine function.

Today we will talk about the usage and grammar instructions of Jade. Jade official website: jade-lang.com/

Jade command line tool

The use of Jade requires the Node environment and is installed through the npm package Jade command line tool, after successful installation, you can create a new file with the file suffix *.jade. We can use jade's syntax to our heart's content. After writing, we only need to compile it through the command line tool to compile it into the html static file we usually use.

Installation method

1. First determine whether the Node environment and npm tool are installed. The check method is as follows:

Execute as follows in the command line tool Code:

node -v
=> v0.10.35
npm -v
=> 1.4.28
// 如果成功返回版本号信息即为已成功安装 Node 环境。

2. Install the Jade command line tool globally through npm

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

3. Create the *.Jade file and start the task.

4. Compile the jade file into an html file by using the Jade command line tool

How to use the Jade command line tool

We can view the parameters of the Jade command line tool through jade --help

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

Example:

// 比如说我们需要编译index.jade文件，默认编译到同文件夹下的同名html 文件中
jade index.jade
// 如果我们要格式化输出 index.html 文件，只需要添加 -P 参数即可
jade -P index.jade
// 如果我们要实现监听和自动编译，需要使用 -w 参数
jade -P -w index.jade

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese Other related articles online!

Recommended reading:

detailed explanation of the use of Jade tags in node front-end template engine

nodeJS server creation and restart operation code sharing

The above is the detailed content of Detailed explanation of the steps to use node front-end development template engine Jade. For more information, please follow other related articles on the PHP Chinese website!