如何在Node.js+Express项目中混用Jade与HTML？求Jade转HTML工具包

没问题，我来帮你梳理一下在Express项目里混用Jade（现在官方改名叫Pug啦，不过很多人还是习惯叫Jade）和HTML的方法，还有把Jade转成HTML的工具选项：

一、在Express中实现Jade与HTML混用 #

Express支持同时注册多个模板引擎，你可以根据文件后缀来区分使用哪种引擎，具体步骤如下：

1. 安装依赖 #

首先确保你装了Express和Pug（也就是原来的Jade），如果需要在HTML里传变量渲染，还可以装个支持HTML的模板引擎比如EJS：

npm install express pug ejs

2. 配置Express模板引擎 #

在你的Express入口文件（比如app.js）里，这样配置：

const express = require('express');
const path = require('path');
const app = express();

// 设置视图文件存放目录
app.set('views', path.join(__dirname, 'views'));

// 注册Jade/Pug引擎处理.jade后缀的文件
app.engine('jade', require('pug').__express);
// 注册EJS引擎处理.html后缀的文件（这样HTML里也能使用模板变量）
app.engine('html', require('ejs').__express);

// 设置默认模板引擎为Jade，也可以根据需求改成html
app.set('view engine', 'jade');

3. 在路由中使用不同模板 #

现在你就可以在路由里自由选择渲染Jade或者HTML模板了：

// 渲染Jade模板，自动用Pug引擎处理
app.get('/email-jade', (req, res) => {
  res.render('email-template.jade', { 
    username: '张三',
    subject: '你的邮件主题' 
  });
});

// 渲染HTML模板，用EJS引擎处理（如果是纯静态HTML，直接用res.sendFile更简单）
app.get('/email-html', (req, res) => {
  res.render('email-template.html', { 
    username: '李四',
    subject: '你的HTML邮件主题' 
  });
});

// 纯静态HTML页面，不需要传变量的话直接用sendFile
app.get('/static-html', (req, res) => {
  res.sendFile(path.join(__dirname, 'views', 'static-page.html'));
});

二、将Jade文件转换为HTML的工具与方法 #

如果你需要把已有的Jade文件转成纯HTML，有几种常用的方式：

1. 用Pug命令行工具（最直接） #

因为Jade已经改名为Pug，官方提供了CLI工具来转换：
首先全局安装CLI：

npm install -g pug-cli

然后执行转换命令：

# 转换单个文件，生成对应的.html文件
pug your-template.jade

# 转换整个目录下的Jade文件，输出到指定文件夹
pug ./views/jade-templates --out ./dist/html-templates

# 加上--pretty参数可以生成格式化的美观HTML
pug your-template.jade --pretty

2. 在Node.js代码中批量转换 #

如果需要在项目代码里动态转换，直接用Pug包的API即可：

const pug = require('pug');
const fs = require('fs');
const path = require('path');

// 单个文件转换（同步方式）
try {
  const htmlContent = pug.renderFile(path.join(__dirname, 'views', 'email.jade'), {
    // 这里可以传入模板需要的变量
    username: '测试用户'
  });
  fs.writeFileSync(path.join(__dirname, 'dist', 'email.html'), htmlContent);
  console.log('转换完成！');
} catch (err) {
  console.error('转换出错：', err);
}

// 如果是批量转换目录里的文件，可以用fs.readdir遍历处理

3. 集成到构建工具（适合工程化项目） #

如果你的项目用Gulp/Grunt这类构建工具，可以用对应的插件来自动化转换：
比如用Gulp的话，安装依赖：

npm install gulp gulp-pug --save-dev

然后在gulpfile.js里写转换任务：

const gulp = require('gulp');
const pug = require('gulp-pug');

gulp.task('pug-to-html', () => {
  return gulp.src('./views/**/*.jade')
    .pipe(pug({ pretty: true })) // 格式化输出HTML
    .pipe(gulp.dest('./dist/html'));
});

// 执行任务：gulp pug-to-html

内容的提问来源于stack exchange，提问作者Nikhil