Dynamic path in yeoman comment comment tag

Question

Is there a way to get the dynamic path in the Yeoman build tag, for example. for

<!-- build:js scripts/modernizr.js -->

A use case is to specify a different path in the layout for different subpages, either / to webroot or ../../ , to the top level, for example. something like

<!-- build:js <%= config.path.script %>/modernizr.js -->

A related topic has already been discussed in the issue of Yeoman / Grunt usemin subfolders , but what about a more graceful / flexible solution? Ideas?

Answer 1

If you compile static HTML, you can see my grunt-magic-paths task. It can take a custom needle ( path: by default) and automatically resolve the file path based on only its name. So you can do this:

 <script src="path:modernizr.js"></script> 

And based on the output directory, it will automatically resolve the path names. One caveat is that the associated path must be unique; those. you cannot link two different copies (versions) of Modernizr with the same file name.

You may find that for large applications having such a build step, it is fragile, especially as your application grows and the number of paths increases. I highly recommend using absolute paths for anything more than a personal portfolio; you can save the domain path in the configuration file (in JS, something like this):

 module.exports = 'http://mydomain.com'; 

Then for use in production:

 var domain = require('config.js'); console.log(domain); // => http://mydomain.com 

Modify the config.js file depending on your environment; you may want to .gitignore it, and instead specify a sample configuration with dummy data. Since Grunt runs on top of Node, you have this configuration in the build step, as well as in your application (again, I assume you are writing a Node application, for other projects you may prefer JSON or PHP configuration files).