gruntjs - Grunt usemin, append a file which is generated later, to the usemin flow -

in grunt file, use usemin analyze index.html file build concat schema, on top of other processes occur.

here grunt file:

module.exports = function(grunt) {      // load grunt tasks automatically.     require('load-grunt-tasks')(grunt);      // configurable paths application.     var appconfig = {         src: require('./bower.json').apppath || 'src',         dist: 'dist'     };      grunt.initconfig({          settings: appconfig,          clean: {             dist: {                 files: [{                     dot: true,                     src: [                         '.tmp',                         '<%= settings.dist %>/{,*/}*',                         '!<%= settings.dist %>/.git*'                     ]                 }]             },             tmp: {                 src: '.tmp'             }         },          html2js: {             app: {                 options: {                     htmlmin: {                         collapsebooleanattributes: true,                         collapsewhitespace: true,                         removeattributequotes: true,                         removecomments: true,                         removeemptyattributes: true,                         removeredundantattributes: true,                         removescripttypeattributes: true,                         removestylelinktypeattributes: true                     }                 },                 src: [ '<%= settings.src %>/app/**/*.tpl.html' ],                 dest: '.tmp/concat/js/templates-app.js'             }         },          // process .less files single css file.         less: {             process: {                 files: {                     ".tmp/concat/css/less.css": "src/less/**/*.less"                 }             }         },          concat: {             templates: {                 src: ['.tmp/concat/js/app.js', '.tmp/concat/js/templates-app.js'],                 dest: '.tmp/concat/js/app.js'             },             css: {                 src: ['.tmp/concat/css/main.css', '.tmp/concat/css/less.css'],                 dest: '.tmp/concat/css/main.css'             }         },          useminprepare: {             html: '<%= settings.src %>/index.html',             options: {                 // folder holds our build.                 dest: '<%= settings.dist %>',                 // temp folder, used "usemin", prepare build.                 // needs cleaned when finished.             }         },          usemin: {             html: '<%= settings.dist %>/index.html',             options: {                 blockreplacements: {                     less: function (block) {                         return '<link rel="stylesheet" href="' + block.dest + '">';                     }                 }             }         },          copy: {             dist: {                 files: [                     {                          src: '<%= settings.src %>/index.html',                          dest: '<%= settings.dist %>/index.html'                     },{                         expand: true,                                 cwd: '<%= settings.src %>/assets',                                 src: ['**'],                                 dest: '<%= settings.dist %>/assets'                             }                 ]             }         },           // minifies after have been copied.         htmlmin: {             dist: {                 options: {                     collapsewhitespace: true,                     conservativecollapse: false,                     collapsebooleanattributes: true,                     removecommentsfromcdata: true,                     removeoptionaltags: true                 },                 files: [{                     expand: true,                     cwd: '<%= settings.dist %>',                     src: ['*.html', '**/*.tpl.html'],                     dest: '<%= settings.dist %>'                 }]             }         },          /**          * karma          */          karma: {             unit: {                 configfile: 'karma/karma.conf.js'             }         }     });      grunt.registertask('build', [         'clean:dist',         'html2js:app',         'less:process',         'useminprepare',         'concat:generated',         'concat:templates',         'concat:css',         'copy:dist',         'cssmin',         'uglify',         'usemin',         'htmlmin',         'clean:tmp'     ]);      grunt.registertask('test', [         'karma:unit'     ]); }; 

here html file:

<!doctype html> <html ng-app="app" ng-controller="appctrl">     <head>         <title ng-bind="pagetitle"></title>         <meta lang="en" charset="utf-8" />         <meta name="viewport" content="width=device-width, initial-scale=1">          <!-- build:css css/main.css -->         <link rel="stylesheet" type="text/css" href="less/main.less">         <!-- endbuild -->      </head>     <body>          <div id="ng-view" ng-view></div>          <!-- build:js js/vendor.js -->         <script type="text/javascript" src="../vendor/angular/angular.js"></script>         <script type="text/javascript" src="../vendor/angular-route/angular-route.js"></script>         <script type="text/javascript" src="../vendor/angular-bootstrap/ui-bootstrap-tpls.js"></script>         <!-- endbuild -->          <!-- build:js js/app.js -->         <script type="text/javascript" src="app/app.js"></script>         <script type="text/javascript" src="app/home/home.js"></script>         <script type="text/javascript" src="app/about/about.js"></script>         <!-- endbuild -->          <!-- build:js -->         <script type="text/javascript" src="app/templates-app.js"></script>         <!-- endbuild -->     </body> </html> 

the problem is, use less.css

it looks usemin not recognize less files , not include them in flow.

what did bit hackish - have made bogus main.css file in src folder.

i used less plugin process , turn css file, saving it, inside .tmp folder.

// process .less files single css file.             less: {                 process: {                     files: {                         ".tmp/concat/css/less.css": "src/less/**/*.less"                     }                 }             }, 

**now when file in .tmp folder, have concatenated bogus style.css usemin see's reading index.html**

concat: {             templates: {                 src: ['.tmp/concat/js/app.js', '.tmp/concat/js/templates-app.js'],                 dest: '.tmp/concat/js/app.js'             },             css: {                 src: ['.tmp/concat/css/main.css', '.tmp/concat/css/less.css'],                 dest: '.tmp/concat/css/main.css'             }         }, 

and allows me add data in file usemin take through flow.

grunt.registertask('build', [         'clean:dist',         'html2js:app',         'less:process',         'useminprepare',         'concat:generated',         'concat:templates',         'concat:css', // here hack, concat before copying dist folder         'copy:dist',         'cssmin',         'uglify',         'usemin',         'htmlmin',         'clean:tmp'     ]); 

this works, it's pretty hackish... has elegant solution?

i mean, should able append file generated later usemin flow.

any ideas?