How to change html (jade template) to use * .min js and css during production?

Question

I use Grunt to compile jade templates in html, uglify / concat js and minim / concat css.

During development, I use a combination of connect and view to maintain my interface and automatically receive changes. In this I also use the "source" of js and css (and not the Uruguay / Consistent / Reduced version).

Now when I generate the production html, js and css, I wonder what the best solution is to change the inclusions of * .min js and css.

To be more specific in my html I, for example. include: a.css b.css c.css a.js b.js

this is fine for development, but when creating the production version I want:

common-min.css common-min.js

Of course, I don’t want to change the Jade templates manually, so I'm looking for a better approach, perhaps using some Grunt plugin.

Answer 1

You can transfer data to your template, which indicates which environment you are in, and then switch what you include based on this.

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

See Jade docs and find "conditional expressions": http://jade-lang.com/reference

Answer 2

@Marcel

What you are looking for is a block block from a jade processor (or, most often, a block block processing HTML blocks). Unfortunately, for jade, there is only the gulp plugin, not one for grunts.

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

This example may suit your needs.

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

@Jakerella

For each version, production assembly is usually performed once. Thus, it is more efficient to use the build server, task manager or dependency manager; and less effective for dynamically creating a working version of an HTML page in a server request handler. Do not use env with res.render() - the logic used to build the page for production is not needed when the entire server is built for production. This production logic also makes the query processor less modular because it is associated with an HTML page. Only build servers (intended for assembly) should include build logic. And, although dynamically generated pages can be cached to avoid recalculation when rendering a production version of an HTML page, memory overhead could be avoided.