Currently, I am utilizing VS2015 along with a grunt task in order to gather all the java-script files within my project and then insert them into my template index.html before executing the build. The issue that arises is the dependency order of these files. Specifically, I need to ensure that angular.js is included before ui-bootstrap-tpls.js to avoid any potential Reference errors. The problem lies in the fact that the src wildcard used in the index task is fetching the files in a particular order that does not align with the required dependency graph. Is there a way to customize this order without explicitly listing out each sub-directory, thus defeating the purpose of the hands-free template grunt task and complicating future additions of new dependencies (i.e. without having to add new directories)?
The index task has been registered with the following configuration:
index: {
dev: {
dir: '<%= wwwroot_dir %>',
src: [
'<%= build_dir %>/wwwroot/**/*.js',
]
Additionally, a multi-task has been implemented:
grunt.registerMultiTask('index', 'Process index.html template', function () {
var dirRE = new RegExp('^(' + grunt.config('build_dir') + '/' + grunt.config('wwwroot_dir')
+ '|' + grunt.config('compile_dir') + '/' + grunt.config('wwwroot_dir')
+ '|' + grunt.config('build_dir')
+ '|' + grunt.config('compile_dir')
+ ')\/', 'g');
var jsFiles = filterForJS(this.filesSrc).map(function (file) {
return file.replace(dirRE, '');
});
var cssFiles = filterForCSS(this.filesSrc).map(function (file) {
return file.replace(dirRE, '');
});
var sourcePath = userConfig.app_files.htmltemplate;
grunt.file.copy(sourcePath, this.data.dir + '/index.html', {
process: function (contents, path) {
return grunt.template.process(contents, {
data: {
scripts: jsFiles,
styles: cssFiles,
version: grunt.config('pkg.version')
}
});
}
});
});
An example of how the index.html file would look like:
<html data-ng-app="app" data-ng-controller="AppCtrl" ng-init="">
<head>
<title data-ng-bind="pageTitle">MY APP</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- compiled CSS --><% styles.forEach( function ( file ) { %>
<link rel="stylesheet" type="text/css" href="<%= file %>" />
<% }); %>
<!-- compiled JavaScript --><% scripts.forEach( function ( file ) { %>
<script type="text/javascript" src="<%= file %>"></script>
<% }); %>
</head>
<body>
<div data-ui-view></div>
</body>
</html>
Example of defined directories (to be avoided if possible):
index: {
dev: {
dir: '<%= wwwroot_dir %>',
src: [
'<%= wwwroot_dir %>/lib/angular/*.js',
'<%= wwwroot_dir %>/lib/angular-bootstrap/*.js',
....etc
]