如何使用我自己的选项配置concat和uglify与grunt-usemin

时间:2014-04-06 13:31:58

标签: javascript node.js gruntjs grunt-usemin

例如:我使用下面的当前配置到我的Gruntfile中的uglify我的JS脚本:

    uglify: {
        options: {
            report: "min", //"gzip",
            sourceMap: true,
            preserveComments: false, //"some", "all"
        },
        application: {
            options: {
                // expand: true,
                banner: '<%= app.banner %>',
                preserveComments: "some"
            },
            src: 'dist/js/application.js',
            dest: ".tmp/js/application.min.js"
        },
        dependencies: {
            options: {
                sourceMap: false
            },
            src: ['dist/js/dependencies.js'],
            dest: ".tmp/js/dependencies.min.js"
        },

我知道grunt-usemin会在useminPrepare gruntfile选项中声明的html文件中的代码块中生成 src dest 选项,例如:

    <!-- build:js js/app.js -->
    <script src="js/app.js"></script>
    <script src="js/controllers/thing-controller.js"></script>
    <script src="js/models/thing-model.js"></script>
    <script src="js/views/thing-view.js"></script>
    <!-- endbuild -->

那么如何配置grunt-usemin使用这些相同的选项,例如bannersourceMap: false和生成的文件块,我已经阅读了github中通常给出的快速文档或NPM注册表,但似乎没有找到一个坚实的答案。

1 个答案:

答案 0 :(得分:14)

一个句子在文档中非常重要:

  

此外,useminPrepare动态生成concat,uglify和cssmin的配置。重要提示:您仍需要手动管理这些依赖项并调用每个任务。

原则是只声明你想要使用usemin(在grunt注册任务中)你想要的所有主要任务:concat,uglify ...... 根据您的registertask选项和html标记注释,Usemin默认情况下会创建所有这些任务而不再声明。

代码优于文字:

  1. 表达您的块标记目标文件。在你的情况下 类似的东西:
  2.      <!-- build:js js/app.min.js -->
         <script src="js/app.js"></script>
         <script src="js/controllers/thing-controller.js"></script>
         <script src="js/models/thing-model.js"></script>
         <script src="js/views/thing-view.js"></script>
         <!-- endbuild -->
    

    2 - 注册您希望usemin为您生成的任务     在运行时(它不会在您的文件中生成任何内容 -     应该在文档中准备的东西)。例如     :

      

    grunt.registerTask('minify',[         'useminPrepare'         “Concat的”         “cssmin”         ,'丑化'         , '复制'
            “转         “usemin”      ])

    3 - 默认情况下,除了useminPrepare和usemin之外,所有这些任务都会生成(请查看这两个块grunt-usemin的文档)。

    然后,如果你想添加像sourcemap这样的特定选项,只需重写配置代码而不重新定义所有内容:

      

    uglify:{               选项:{                   sourceMap:false               }           }

    希望它有所帮助。