如何使用grunt从不同的js文件制作几个缩小的文件 [英] How to make couple of minified files from different js files using grunt

问题描述

我对JS中的grunt和task runner是新手，所以这可能看起来很简单，但我一直无法找到确切的工作答案。

我有：

  concat：{
 options：{
 //定义一个字符串放在每个文件之间串联输出
分隔符：'\\\
\\\
'
}，
 dist：{
 //连接
的文件src：['scripts / app .js'，'scripts / constant.js'
]，
 //生成的JS文件的位置
 dest：'scripts / custom.js'
} 
 $，
  

该任务将我所有的自定义文件集中在一起。我想要的是为我的供应商文件做类似的事情。最后，我最终应该只有两个js，只有 custom.js 具有我的级联缩减代码，并且 vendor.js 具有级联-minfied库。

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

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

有关此主题的更多文档，请参阅多任务和在 grunt 文档中完成。-tasks＃task-configuration-and-targetsrel =nofollow noreferrer>

Gruntfile.js

对于您的场景，您需要配置 concat 任务与此类似（注：新的自定义和供应商目标）：

  module.exports = function（grunt）{
 
 grunt.initConfig（{
 
 concat：{
选项：{
 separator：'\\\
\\\
'
}，
 custom：{
 src：['scripts / app.js'，'scripts / constant .js']，
 dest：'scripts / output / custom.js'
}，
 vendor：{
 //根据需要修改src和dest路径... 
 src：['scripts / vendor / foo.js'，'scripts / vendor / baz.js']，
 dest：'scripts / output / vendor.js'
} 
} 
 
}）; 
 
 grunt.loadNpmTasks（'grunt-contrib-concat'）; 
 
 grunt.registerTask（'concatenate'，[
'concat：custom'，//<  - 使用冒号分隔符调用任务中的目标
'concat ：供应商'
]）; 
 
}; 
  

运行 concat

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

$ grunt concatenate

配置选项

如果您需要自定义和供应商目标的不同配置选项，您需要移动各自目标内的选项对象。正如 here 所述。

注意：使用示例gist，前提是指定的选项将应用于两个目标。

I am new to grunt and task runners in JS, so this might seem a simple question but I have been unable to find exact working answer.

I have :

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

This task collects all my custom file together. What I want is to do similar thing for all my vendors file. Finally I should end up with two js only custom.js having my concatenated-minified code and vendor.js having concatenated-minfied libraries.

How do I write grunt configuration for this. Do I need to make two different tasks. If I write the above code twice with different input files, it seems to run the last code.

解决方案

grunt-contrib-concat can be configured to utilize multiple-targets.

For further documentation on this subject refer to multi-tasks and Task Configuration and Targets in the grunt documentation.

Gruntfile.js

For your scenario you need to configure your concat task similar to this (Note: the new custom and vendor targets):

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

};

Running concat

Using the example gist provided above you can run the concat task via the CLI by typing the following command:

$ grunt concatenate

Configuring Options

If you require different configuration options for both the custom and vendor targets you will need to move the options object inside their respective targets. As explained here.

Note: Using the example gist provided the options specified will apply to both targets.

这篇关于如何使用grunt从不同的js文件制作几个缩小的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！