4

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

在开发过程中，我使用 connect 和 watch 的组合来服务我的前端并自动获取更改。在此我还使用“源”js 和 css（而不是 uglified/concatted/minified 版本）。

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

为了在我的html中更具体，例如包括：a.css b.css c.css a.js b.js

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

common-min.css common-min.js

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

4

2 回答 2

4

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

// 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

于 2013-09-16T17:27:40.767 回答
0

@马塞尔

您正在寻找的是一个玉构建块处理器（或更常见的是一个 HTML 构建块处理器）。不幸的是，jade 似乎只有一个 gulp 插件，而 grunt 则没有。

https://www.npmjs.com/package/gulp-processjade

这个例子可能适合你的需要。

// build:js app.min.js
script(src='app.js')
// /build

@Jakerella

对于每个版本，生产构建通常运行一次。所以使用构建服务器、任务管理器或依赖管理器更有效；在服务器的请求处理程序中动态生成 HTML 页面的生产版本的效率较低。不要使用envwith res.render()- 当整个服务器为生产而构建时，不需要用于为生产构建页面的逻辑。这种生产逻辑还使请求处理程序的模块化程度降低，因为它与 HTML 页面耦合。只有构建服务器（专用于构建的服务器）应该包含构建逻辑。而且，虽然可以缓存动态生成的页面以避免在呈现 HTML 页面的生产版本时重复计算，但这是可以避免的内存开销。

于 2016-06-04T15:28:14.643 回答