Question

我使用以下配置将我的所有JS文件uglify到一个文件中。这导致了一些排序问题（我需要遵循index.html中js文件的顺序）。

我想知道：

如何从index.html获取我的js文件的所有srcs（订单如html中所示）？
如何使用对＆＃39; build.js＆＃39;？

  uglify : {
      yourTask : {
        src : 'src/**/*.js',
        dest : 'build.js'
      }
    }

Answer 1

我不认为uglify附带任何内置功能可以让您更轻松。您没有添加另一个grunt插件的唯一选择是按照您希望它们加入的顺序手动将它们插入到文件数组中。

我建议使用usemin，这是自耕农的一个咕噜插件，它将首先连接css和/或js文件，然后缩小它们。它也可以扩展，以便您可以添加其他步骤，例如ngAnnotate。

以下是一个示例用法：

<!-- build:js js/components-optimized.js -->

<!-- angularjs scripts -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/ngstorage/ngStorage.js"></script>        
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-file-upload/angular-file-upload.js"></script>
<!-- endbuild -->

告诉usemin任务使用components-optimized.js流程将两个注释中的所有脚本构建到单个js文件中，并告诉它存储文件的位置。＆＃34;构建＆＃34;可以自定义部分以执行任何其他任务，例如连接，uglify，ngannotate，cssmin或您可能想到的任何其他需要在每个文件或连接文件上运行的任务。

这是我的配置：

    useminPrepare: {
        html: 'build/index.html',
        options: {
            root: 'build',
            dest: 'build',
            flow: {
                steps: {
                    js: ['concat', 'uglifyjs'],// ngAnnotate can be added here for example
                    css: [ 'concat', 'cssmin' ]
                },
                post: {
                    js: [{
                        name: 'uglify',
                        createConfig: function (context) {
                            context.options.generated.options = {preserveComments: 'some'};
                        }
                    }]
                }
            }
        }
    },

如何从index.html获取我的js文件的所有srcs？

1 个答案: