如何使用grunt从不同的js文件中创建几个缩小文件

Question

我对JS的咕gr声和任务赛跑者是陌生的，因此这似乎是一个简单的问题，但我无法找到确切的工作答案。

我有 ：

concat: {
            options: {
                // define a string to put between each file in the concatenated output
                separator: '\n\n'
            },
            dist: {
                // the files to concatenate
                src: ['scripts/app.js', 'scripts/constant.js'
                ],
                // the location of the resulting JS file
                dest: 'scripts/custom.js'
            }
        },

此任务将所有我的自定义文件收集在一起。 我想要对所有供应商文件执行类似的操作。 最后，我应该以两个js结束，只有custom.js具有串联的vendor.js代码， vendor.js具有串联的最小化库。

我该如何为此编写grunt配置。 我需要做两个不同的任务吗？ 如果我使用不同的输入文件两次编写以上代码，则似乎在运行最后一个代码。

Answer 1

grunt-contrib-concat可以配置为利用多个目标 。

有关此主题的更多文档，请参阅grunt文档中的多任务以及任务配置和目标 。

Gruntfile.js

对于您的方案，您需要配置与此类似的concat任务（ 注意：新的custom和vendor目标）：

module.exports = function(grunt) {

    grunt.initConfig({

        concat: {
            options: {
                separator: '\n\n'
            },
            custom: {
                src: ['scripts/app.js', 'scripts/constant.js'],
                dest: 'scripts/output/custom.js'
            },
            vendor: {
                // Modify the src and dest paths as required...
                src: ['scripts/vendor/foo.js', 'scripts/vendor/baz.js'],
                dest: 'scripts/output/vendor.js'
            }
        }

    });

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

    grunt.registerTask('concatenate', [
        'concat:custom', // <-- Targets in a task are called using a colon separator. 
        'concat:vendor'
    ]);

};

运行concat

使用上面提供的示例要点，您可以通过以下命令通过CLI运行concat任务：

$ grunt concatenate

配置选项

如果custom目标和vendor目标都需要不同的配置选项，则需要将options对象移动到它们各自的目标中。 如这里所解释。

注意：使用示例要点提供的示例，指定的options将适用于两个目标。