如何使用早午餐将{jade'模板渲染为HTML

Question

尝试为我的新项目使用早午餐。我想要做的一件事是能够在jade中编写我的所有HTML资源，并在构建期间将早午餐呈现为HTML。我发现了早午餐，但我似乎无法弄清楚如何让它做我想做的事。这是我的配置。

exports.config =
    paths:
        watched: ['client']

    npm:
        enabled: true
        packages: ['react']

    plugins:
        jaded:
            jade:
                pretty: yes
    files:
        javascripts:
            joinTo:
                'js/app.js': /^app/
                'js/vendor.js': /^(?!app)/
        stylesheets:
            joinTo: 'css/app.css'

    templates:
        joinTo: 'index.html'

Answer 1

根据jaded-brunch documentation，您可以告诉它将jade文件编译为静态html输出，方法是将它们全部命名为.static.jade文件扩展名，或设置staticPatterns选项，如：

plugins:
    jaded:
        staticPatterns: /\.jade$/
        jade:
            pretty: yes

Answer 2

这是一个老问题，但Brunch已经更新，可以更优雅地处理静态资产编译。

official jade-brunch package负责业务，无需额外配置。

将.jade文件放在app/assets目录中（或将静态基础设置为的任何位置）将jade文件编译为静态HTML。

如果您正在使用includes / extends，并且您不希望在public目录中包含大量部分HTML文件，则使用前面的下划线命名它们会让Brunch忽略这些文件。如果您的app目录如下所示：

app
  | assets
  |  | index.jade
  |  | partials
  |  |   | _header.jade

...而您的index.jade包含_header：

include partials/_header

您的public目录将如下所示：

public
  | index.html

效果很好。