Grunt usemin，将稍后生成的文件附加到usemin流

Question

在我的Grunt文件中，我使用 usemin 分析我的 index.html 文件，构建 concat架构，其中另一个过程将会发生。

这是Grunt文件：

module.exports = function(grunt) {

    // Load grunt tasks automatically.
    require('load-grunt-tasks')(grunt);

    // Configurable paths for the 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 all the .less files into a 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: {
                // This is the folder which holds our build.
                dest: '<%= settings.dist %>',
                // This is the temp folder, which is used by "usemin", to prepare the build.
                // It needs to be 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 everything after they 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'
    ]);
};

这是HTML文件：

<!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>

问题是，我使用less.css

看起来 usemin 无法识别较少的文件，并且不会将其包含在流程中。

我所做的有点hackish - 我在 src 文件夹中伪造了 main.css 文件。

我使用较少的插件来处理它并将其转换为css文件，将其保存在我的 .tmp文件夹中。

// Process all the .less files into a single css file.
            less: {
                process: {
                    files: {
                        ".tmp/concat/css/less.css": "src/less/**/*.less"
                    }
                }
            },

**现在，当文件位于.tmp文件夹中时，我将其与伪造的样式连接起来。使用min来查看index.html ** p>

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'
            }
        },

这样我就可以将我的数据添加到usemin将通过该流程的文件中。

grunt.registerTask('build', [
        'clean:dist',
        'html2js:app',
        'less:process',
        'useminPrepare',
        'concat:generated',
        'concat:templates',
        'concat:css', // HERE WAS MY HACK, CONCAT IT BEFORE COPYING INTO THE DIST FOLDER
        'copy:dist',
        'cssmin',
        'uglify',
        'usemin',
        'htmlmin',
        'clean:tmp'
    ]);

这很有效，但它非常hackish ......任何人都有一个优雅的解决方案吗？

我的意思是，它应该能够将稍后生成的文件附加到usemin流程。

有什么想法吗？