javascript - 如何更改 html(jade 模板)以在生产中使用 *.min js 和 css？

Question

我正在使用 Grunt 将 jade 模板编译为 html、uglify/concat js 和最小化/concat css。

在开发过程中，我结合使用 connect 和 watch 来为我的前端服务并自动获取更改。在此我还使用“源”js 和 css(而不是丑化/连接/缩小版本)。

现在当我生成生产 html、js 和 css 时，我想知道最好的解决方案是更改 *.min js 和 css 的包含。

为了在我的 html 中更具体，例如包括: 一个.css b.css CSS 一个.js b.js

对于开发来说这很好，但是在生成我想要的生产版本时:

common-min.css common-min.js

当然我不想手动更改 Jade 模板，所以我正在寻找更好的方法，可能是使用一些 Grunt 插件。

Answer 1

您可以将数据传递到您的模板中，指示您所处的环境，然后根据该信息切换您要包含的内容。

// In your route:
res.render("index", { env: "development" }); // maybe use NODE_ENV in here?

// Then in your jade template:
head
  if env == 'development'
    link(href="a.css", rel="stylesheet", type="text/css")
    link(href="b.css", rel="stylesheet", type="text/css")
  else
    link(href="min.css", rel="stylesheet", type="text/css")

查看 Jade 文档，并搜索“条件”:http://jade-lang.com/reference