Dynamically include /static/js/**/*.js and /static/css/**/*.css files too <head>
I am using client side templating partials, so in this example, I would like to write filepaths of everything in:
/static/js/**/*.js too /templates/head.js.dust
/static/css/**/*.css too /templates/head.css.dust
File paths are not enough of course. I need a way to preprocess the the output so that every "file" is wrapped by appropriate tags like:
<!-- /templates/head.js.dust -->
<script src="/static/js/assests/jquery.js"></script>
<script src="/static/js/assests/jquery_ui.js"></script>
<script src="/static/js/app.js"></script>
...
<!-- /templates/head.css.dust -->
<link src="/static/css/assests/jquery_ui.css"/>
<link src="/static/css/app.css"/>
...
Is there a grunt module out there that already does something like this?
Bonus Points: How do I even get started building something like this if it does not?
You can do so in a fairly easy way:
grunt.registerMultiTask("assetAppend", "Append JS/CSS assets to a file", function() {
var paths = grunt.file.expand( this.data.paths ),
out = this.data.output,
contents = "";
paths.forEach(function( path ) {
if ( /\.js$/i.test( path ) ) {
contents += '<script src="' + path + '"></script>';
} else if ( /\.css$/i.test( path )) {
contents += '<link rel="stylesheet" type="text/css" href=' + path + ' />';
}
});
grunt.file.write( out, contents );
});
grunt.initConfig({
assetAppend: {
js: {
paths: ["static/js/**/*.js"],
output: "head.js.dust"
},
css: {
paths: ["static/css/**/*.css"],
output: "head.css.dust"
}
}
});
This example is now part of my plugin grunt-contrib-assetpush