angularjs - Grunt index task src globbing order -
i'm using vs2015 grunt task java-script files in project , write them template index.html before build. problem have order files dependent on each other. instance need create script src='' angular.js before ui-bootstrap-tpls.js otherwise reference errors. index task src wildcard getting files in 'an order' , it's not 1 works dependency graph. there way customize order without writing out each sub-directory individually , defeating purpose of hands-off template grunt task when adding new dependencies in future (i.e. shouldn't have add new directories)?
i have index task registered (with wildcard source):
index: { dev: { dir: '<%= wwwroot_dir %>', src: [ '<%= build_dir %>/wwwroot/**/*.js', ]
i have multi task:
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') } }); } }); });
example index.html
<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 directories defined (which want avoid if possible):
index: { dev: { dir: '<%= wwwroot_dir %>', src: [ '<%= wwwroot_dir %>/lib/angular/*.js', '<%= wwwroot_dir %>/lib/angular-bootstrap/*.js', ....etc ]
after little searching found following on gruntjs.com
also, in order simplify otherwise complicated globbing patterns, grunt allows arrays of file paths or globbing patterns specified. patterns processed in-order, !-prefixed matches excluding matched files result set. result set uniqued.
as files uniqued, have included more important dependencies @ top , used wildcard afterwards. uniqueness seems have removed second instance , not first works.
index: { dev: { dir: '<%= wwwroot_dir %>', src: [ '<%= wwwroot_dir %>/lib/jquery/dist/*.js', '<%= wwwroot_dir %>/lib/angular/*.js', '<%= wwwroot_dir %>/lib/**/*.js', ] }
Comments
Post a Comment