如何提供渲染的 Jade 页面，就好像它们是 Node Express 中的静态 HTML 页面一样？答案

【问题标题】：How to serve rendered Jade pages as if they were static HTML pages in Node Express?如何提供渲染的 Jade 页面，就好像它们是 Node Express 中的静态 HTML 页面一样？
【发布时间】：2013-12-18 22:28:16
【问题描述】：

通常你会在这样的路由中渲染 Jade 页面：

app.get('/page', function(req, res, next){
    res.render('page.jade');
});

但我想提供所有 Jade 页面（自动呈现），就像提供静态 HTML 一样

app.use(express.static('public'))

有没有办法为 Jade 做类似的事情？

【问题讨论】：

标签： node.js express pug

【解决方案1】：

“静态”意味着将现有文件直接从磁盘发送到浏览器。翡翠可以这样供应，但这很不寻常。通常你想在服务器上将jade渲染成HTML，根据定义它不是“静态的”，它是动态的。你这样做：

app.get('/home', function (req, res) {
    res.render('home'); // will render home.jade and send the HTML
});

如果你想在浏览器中渲染玉本身，只需在将它加载到浏览器时直接在 url 中引用它：

$.get('/index.jade', function (jade) {
    //...
});

【讨论】：

【解决方案2】：

https://github.com/runk/connect-jade-static

用法

假设您的项目结构如下：
/views
  /partials
    /file.jade
让我们让来自/views/partials的jade文件可以访问：
var jadeStatic = require('connect-jade-static');

app = express();
app.configure(function() {
  app.use(jadeStatic({
    baseDir: path.join(__dirname, '/views/partials'),
    baseUrl: '/partials',
    jade: { pretty: true }
  }));
});
现在，如果您启动 Web 服务器并在浏览器中请求 /views/partials/file.html 应该可以看到编译好的玉模板了。

【讨论】：

【解决方案3】：

Connect-jade-static 不错，但对我来说不是完美的解决方案。

首先，我需要玉石的原因如下：

我的应用是单页应用，在运行时没有从模板生成的 HTML。然而，我使用 Jade 来生成 HTML 文件是因为：

Mixins：我的 HTML 中大量重复/相似的代码通过使用 mixins 被缩短了
下拉菜单：我知道，很多人使用 ng-repeat 来填充选择框中的选项。当列表是静态的（例如国家列表）时，这会浪费 CPU。正确的做法是在 HTML 或部分中填写选择选项。但是，一长串的选项使 HTML/jade 难以阅读。此外，国家/地区列表很可能已经在其他地方提供，复制此列表没有意义。

因此，我决定在构建时使用 Jade 生成大部分 HTML 部分。但是，这在开发过程中变得很痛苦，因为当玉文件更改时需要重新构建 HTML。是的，我可以使用 connect-jade-static，但我真的不想在运行时生成 HTML——它们确实是静态文件。

所以，这就是我所做的：

在通常使用 express.static 之前添加了一个“使用”
在这里面，我检查了jade的时间戳和对应的html文件
如果jade文件比较新，重新生成html文件
在重新生成后调用 next()，如果不需要重新生成，则立即调用。
next() 将传递到 express.static，生成的 HTML 将在该处提供
将“use”包裹在“if !production”条件周围，并在构建脚本中生成所需的所有 HTML 文件。

这样，我还可以使用 express.static 提供的所有好东西（如自定义标题），并且仍然使用玉来生成这些。

一些代码sn-ps：

var express = require('express');
var fs = require('fs')
var jade = require('jade');
var urlutil = require('url');
var pathutil = require('path');

var countries = require('./countries.js');

var staticDir    = 'static';            // really static files like .css and .js
var staticGenDir = 'static.gen';        // generated static files, like .html
var staticSrcDir = 'static.src';        // source for generated static files, .jade

if (process.argv[2] != 'prod') {
    app.use(‘/static', function(req, res, next) {
        var u = urlutil.parse(req.url);
        if (pathutil.extname(u.pathname) == '.html') {
            var basename = u.pathname.split('.')[0];
            var htmlFile = staticGenDir + basename + '.html';
            var jadeFile = staticSrcDir + basename + '.jade';

            var hstat = fs.existsSync(htmlFile) ? fs.statSync(htmlFile) : null;
            var jstat = fs.existsSync(jadeFile) ? fs.statSync(jadeFile) : null;

            if ( jstat && (!hstat || (jstat.mtime.getTime() > hstat.mtime.getTime())) ) {
                var out = jade.renderFile(jadeFile, {pretty: true, countries: countries});
                fs.writeFile(htmlFile, out, function() {
                    next();
                });
            } else {
                next();
            }
        } else {
            next();
        }
    });
}

app.use('/static', express.static(staticDir));      // serve files from really static if exists
app.use('/static', express.static(staticGenDir));   // if not, look in generated static dir

实际上，我有一个 js 文件，其中不仅包含国家，还包含节点、javascript 和翡翠之间共享的各种其他列表。

希望这对寻找替代方案的人有所帮助。

【讨论】：