Marcel Overdijk Marcel Overdijk - 6 months ago 26
CSS Question

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

I'm using Grunt to compile jade templates to html, uglify/concat js and minimize/concat css.

During development I use the combination of connect and watch to serve my front-end and pick up changes automatically. In this I also use the 'source' js and css (and not the uglified/concatted/minified version).

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

To be more specific in my html I e.g. include:
a.css
b.css
c.css
a.js
b.js

for development this is fine, but when generating 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, probably with the use of some Grunt plugin.

Answer

You can pass data into your template that indicates what environment you are in, and then switch what you're including based on that.

// 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 the Jade docs, and search for "conditionals": http://jade-lang.com/reference