如何使用 brunch 将 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 目录（或将静态 basedir 设置到的任何位置）将 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

效果很好。

如何使用 brunch 将 jade 模板渲染成 HTML

How to render jade templates into HTML using brunch

javascript

pug

brunch