grunt.js - 縮小文件時的多個目標

Question

我的grunt.js有一個典型的縮小任務：

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

擁有多個dest文件的最簡單方法是什么？ 我想縮小成：

• DIST / precook.min.js
• 例如/ JS /供應商/ precook.min.js

內置的min任務似乎不支持多個目的地，所以我認為這可以通過簡單的“復制”任務來實現。 有人可以指點我正確的方向嗎？

Answer 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');

（可選） 將copy注冊到grunt的默認任務中 。

這里增加的美妙之處在於您現在也可以執行所有其他復制任務。 甚至支持模式，例如復制所有縮小的文件（ 'dist/*.min.js' ）。

Answer 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']
            }

        }

Answer 3

這是一種替代方法（在@jalonen的解決方案旁邊），您可能會感興趣，如果您使用requirejs模塊化您的項目，那么您可以使用requirejs優化器來縮小您的模塊。

首先，您需要在項目中添加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 （ app縮小版）
• moduleA （ moduleA ， moduleA1和moduleA2縮小版本）
• moduleB （ moduleB ， moduleB1和moduleB2縮小版本）

Answer 4

有一個類似的問題，並創建了一個grunt多任務 ，運行多個目錄上的指定任務列表

用法確切的情況：```

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

```