Home Web Front-end JS Tutorial How to use node front-end development template engine Jade

How to use node front-end development template engine Jade

May 30, 2018 am 11:19 AM
node front end develop

This time I will show you how to use node front-end developmenttemplate engineJade, what are the precautionsfor using node front-end development template engine Jade, the following is a practical case, let's come together 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 环境。
Copy after login
2. Install the Jade command line tool globally through npm

npm install jade -g
// mac用户可能需要管理员权限,使用如下命令
sudo npm install jade -g
Copy after login
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
Copy after login
Example:

// 比如说我们需要编译index.jade文件,默认编译到同文件夹下的同名html 文件中
jade index.jade
// 如果我们要格式化输出 index.html 文件,只需要添加 -P 参数即可
jade -P index.jade
// 如果我们要实现监听和自动编译,需要使用 -w 参数
jade -P -w index.jade
Copy after login
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:

How to use the node front-end template engine Jade tag

##How to develop Vue drag and drop components

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

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Four recommended AI-assisted programming tools Four recommended AI-assisted programming tools Apr 22, 2024 pm 05:34 PM

This AI-assisted programming tool has unearthed a large number of useful AI-assisted programming tools in this stage of rapid AI development. AI-assisted programming tools can improve development efficiency, improve code quality, and reduce bug rates. They are important assistants in the modern software development process. Today Dayao will share with you 4 AI-assisted programming tools (and all support C# language). I hope it will be helpful to everyone. https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot is an AI coding assistant that helps you write code faster and with less effort, so you can focus more on problem solving and collaboration. Git

Which AI programmer is the best? Explore the potential of Devin, Tongyi Lingma and SWE-agent Which AI programmer is the best? Explore the potential of Devin, Tongyi Lingma and SWE-agent Apr 07, 2024 am 09:10 AM

On March 3, 2022, less than a month after the birth of the world's first AI programmer Devin, the NLP team of Princeton University developed an open source AI programmer SWE-agent. It leverages the GPT-4 model to automatically resolve issues in GitHub repositories. SWE-agent's performance on the SWE-bench test set is similar to Devin, taking an average of 93 seconds and solving 12.29% of the problems. By interacting with a dedicated terminal, SWE-agent can open and search file contents, use automatic syntax checking, edit specific lines, and write and execute tests. (Note: The above content is a slight adjustment of the original content, but the key information in the original text is retained and does not exceed the specified word limit.) SWE-A

Learn how to develop mobile applications using Go language Learn how to develop mobile applications using Go language Mar 28, 2024 pm 10:00 PM

Go language development mobile application tutorial As the mobile application market continues to boom, more and more developers are beginning to explore how to use Go language to develop mobile applications. As a simple and efficient programming language, Go language has also shown strong potential in mobile application development. This article will introduce in detail how to use Go language to develop mobile applications, and attach specific code examples to help readers get started quickly and start developing their own mobile applications. 1. Preparation Before starting, we need to prepare the development environment and tools. head

PHP and Vue: a perfect pairing of front-end development tools PHP and Vue: a perfect pairing of front-end development tools Mar 16, 2024 pm 12:09 PM

PHP and Vue: a perfect pairing of front-end development tools. In today's era of rapid development of the Internet, front-end development has become increasingly important. As users have higher and higher requirements for the experience of websites and applications, front-end developers need to use more efficient and flexible tools to create responsive and interactive interfaces. As two important technologies in the field of front-end development, PHP and Vue.js can be regarded as perfect tools when paired together. This article will explore the combination of PHP and Vue, as well as detailed code examples to help readers better understand and apply these two

Pi Node Teaching: What is a Pi Node? How to install and set up Pi Node? Pi Node Teaching: What is a Pi Node? How to install and set up Pi Node? Mar 05, 2025 pm 05:57 PM

Detailed explanation and installation guide for PiNetwork nodes This article will introduce the PiNetwork ecosystem in detail - Pi nodes, a key role in the PiNetwork ecosystem, and provide complete steps for installation and configuration. After the launch of the PiNetwork blockchain test network, Pi nodes have become an important part of many pioneers actively participating in the testing, preparing for the upcoming main network release. If you don’t know PiNetwork yet, please refer to what is Picoin? What is the price for listing? Pi usage, mining and security analysis. What is PiNetwork? The PiNetwork project started in 2019 and owns its exclusive cryptocurrency Pi Coin. The project aims to create a one that everyone can participate

Which Linux distribution is best for Android development? Which Linux distribution is best for Android development? Mar 14, 2024 pm 12:30 PM

Android development is a busy and exciting job, and choosing a suitable Linux distribution for development is particularly important. Among the many Linux distributions, which one is most suitable for Android development? This article will explore this issue from several aspects and give specific code examples. First, let’s take a look at several currently popular Linux distributions: Ubuntu, Fedora, Debian, CentOS, etc. They all have their own advantages and characteristics.

Questions frequently asked by front-end interviewers Questions frequently asked by front-end interviewers Mar 19, 2024 pm 02:24 PM

In front-end development interviews, common questions cover a wide range of topics, including HTML/CSS basics, JavaScript basics, frameworks and libraries, project experience, algorithms and data structures, performance optimization, cross-domain requests, front-end engineering, design patterns, and new technologies and trends. . Interviewer questions are designed to assess the candidate's technical skills, project experience, and understanding of industry trends. Therefore, candidates should be fully prepared in these areas to demonstrate their abilities and expertise.

Exploring Go language front-end technology: a new vision for front-end development Exploring Go language front-end technology: a new vision for front-end development Mar 28, 2024 pm 01:06 PM

As a fast and efficient programming language, Go language is widely popular in the field of back-end development. However, few people associate Go language with front-end development. In fact, using Go language for front-end development can not only improve efficiency, but also bring new horizons to developers. This article will explore the possibility of using the Go language for front-end development and provide specific code examples to help readers better understand this area. In traditional front-end development, JavaScript, HTML, and CSS are often used to build user interfaces

See all articles