grunt.js - 缩小文件时的多个目的地答案

【问题标题】：grunt.js - Multiple destinations when minifying filesgrunt.js - 缩小文件时的多个目的地
【发布时间】：2012-10-16 00:31:38
【问题描述】：

我的 grunt.js 有一个典型的缩小任务：

min: {
    dist: {
        src: ['dist/precook.js'],
        dest: 'dist/precook.min.js'
    }
}

拥有多个 dest 文件的最简单方法是什么？我想缩小成：

dist/precook.min.js
example/js/vendor/precook.min.js

built-in min task 似乎不支持多个目的地，所以我认为这可以通过简单的“复制”任务来实现。有人可以指出我正确的方向吗？

【问题讨论】：

标签： javascript node.js gruntjs

【解决方案1】：

我会使用grunt-contrib-copy 插件：

使用npm安装：

npm install grunt-contrib-copy

修改grunt.js（添加复制任务定义和加载复制插件）：

    ...
    copy: {
        dist: {
            files: {
                'example/js/vendor/': 'dist/precook.min.js'
            }
        }
    }
    ...

grunt.loadNpmTasks('grunt-contrib-copy');

可选register copy in to grunt's default task。

这里增加的好处是您现在也可以执行所有其他复制任务。甚至支持模式，例如复制所有缩小的文件 ('dist/*.min.js')。

【讨论】：

完美，这正是我想要的。感谢您在注册默认组合任务方面的额外旅行！

【解决方案2】：

concat: {
            css: {
                src: ['UI.controls/assets/css/*.css'],
                dest: 'UI.controls/assets/css/min/production.css'
            },

            js: {
                src: ['UI.controls/assets/js/*.js'],
                dest: 'UI.controls/assets/js/min/production.js'
            },

            js2: {
                src: ['UI.core/assets/js/*.js'],
                dest: 'UI.core/assets/js/min/production.js'
            }

        },

        cssmin: {
            css: {
                src: 'UI.controls/assets/css/min/production.css',
                dest: 'UI.controls/assets/css/min/production.min.css'
            }
        },

        uglify: {
            js: {
                src: 'UI.controls/assets/js/min/production.js',
                dest: 'UI.controls/assets/js/min/production.min.js'
            },

            js2: {
                src: 'UI.core/assets/js/min/production.js',
                dest: 'UI.core/assets/js/min/production.min.js'
            }
        },


        watch: {
            css: {
                files: ['UI.controls/assets/css/*.css'],
                tasks: ['concat:css', 'cssmin:css']
            },
            js: {
                files: ['UI.controls/assets/js/*.js'],
                tasks: ['concat:js', 'uglify:js']
            },

            js2: {
                files: ['UI.core/assets/js/*.js'],
                tasks: ['concat:js', 'uglify:js']
            }

        }

【讨论】：

【解决方案3】：

这是一种替代方法（在 @jalonen 的解决方案旁边），您可能会感兴趣，如果您使用 requirejs 来模块化您的项目，那么您可以使用 @987654322 @ 来缩小你的模块。

首先，你需要在你的项目中添加grunt-contrib-requirejs：

npm install grunt-contrib-requirejs --save-dev

Grunt 配置：

        requirejs: {
            production:{
                options:{
                    // don't include libaries when concatenating/minifying
                    paths:{
                        angular:'empty:',
                        jquery:'empty:'
                    },
                    baseUrl:'path/to/src/js',
                    dir:'path/to/target/js',
                    // keeps only the combined files
                    removeCombined:true,
                    modules:[
                        {name:'app', exclude: ['moduleA', 'moduleB']},
                        {name:'moduleA'},
                        {name:'moduleB'}
                    ]
                }
            }
        }
        ...

     grunt.loadNpmTasks('grunt-contrib-copy');

说明：

假设你有这个依赖树（-> 表示依赖于）：

app -> moduleA -> moduleA1
               -> moduleA2              
app -> moduleB -> moduleB1
               -> moduleB2

缩小后你会得到三个文件：

app（应用缩小版）
moduleA（moduleA、moduleA1 和 moduleA2 的缩小版）
moduleB（moduleB、moduleB1 和 moduleB2 的缩小版）

【讨论】：

谢谢@asgoth。自最初的问题以来，我有更多的咕噜声（0.4~）经验，我现在正在以与此类似的方式使用grunt-contrib-requirejs。

【解决方案4】：

遇到类似问题并创建了一个grunt multi-task，它在多个目录上运行指定任务的列表

具体情况的用法： ```

min: {
    dist: {
        src: ['dist/precook.js'],
        dest: 'dist/precook.min.js'
    }
},
multidest: {
    minifiedFiles: {
        tasks: ['min'],
        dest: [
            'dist/precook.min.js',
            'example/js/vendor/precook.min.js'
       ]
    }
}

```

【讨论】：