使用 Grunt Uglify 进行动态映射和连接

Question

我正在尝试使用 dynamic mapping 并使用 G运行t Uglify 连接 Javascript 文件。

我有以下无法正常工作的东西。

这是我的文件夹结构：

javascript
    |- account
        |- custom.js
    |- bills
        |- billing-one.js
        |- billing-two.js
    |- test (output folder)

这是我所期待的：

javascript
    |- account
        |- custom.js
    |- bills
        |- billing-one.js
        |- billing-two.js
    |- test
        |- billing-one.min.js (this file includes billing-one.js AND custom.js)
        |- billing-two.min.js (this file includes billing-two.js AND custom.js)

这是我目前得到的：

javascript
    |- account
        |- custom.js
    |- bills
        |- billing-one.js
        |- billing-two.js
    |- test
        |- bills
            |- billing-one.min.js (this file includes just billing-one.js)
            |- billing-two.min.js (this file includes just billing-two.js)
        |- account 
            |- custom.min.js (this file includes just custom.js)

它不包括 custom.js 文件，而是创建了 2 个文件夹 test/account/custom.min.js 'test/bills/billing-one.js' - 见上文

options: {
    beautify: true,
    mangle: false,
    compress: false,
    preserveComments: 'all'
},
files: [
  {
    expand: true,     // Enable dynamic expansion.
    cwd: 'javascript/',      // Src matches are relative to this path.
    src: [[bills/*.js'], 'account/custom.js'], // Actual pattern(s) to match.
    dest: 'test/',   // Destination path prefix.
    ext: '.min.js',   // Dest filepaths will have this extension.
    extDot: 'first'   // Extensions in filenames begin after the first dot
  },
],

我希望 bills/ 文件夹中的所有 Javascript 文件都包含 custom.js

所以如果有2个文件： bills/billing-one.js bills/billing-two.js

我希望测试/文件夹包含

test/billing-one.min.js（此文件将包含 billing-one + custom.js） test/billing-two.min.js（此文件将包含 billing-two + custom.js）

我不想在其中硬编码文件名。如果将更多文件添加到bills/ 文件夹，则应该合并并输出到test/ 文件夹。

非常感谢任何帮助。

自回答被接受后更新：

使用以下更新的代码来确保它按预期工作 - 否则你会运行在运行ning GRUNT 时出错。

我确实尝试通过提交编辑以供审核将其添加到答案中。但它被所有知道所有高级模组的人拒绝了两次......实际上它是一个有效的输入并改进了给定的答案。请注意 []、cwd 和 src 更改。

files: [{
    expand: true,
    cwd: 'javascript/bills/',
    src: ['*.js'],
    dest: 'test/',
    ext: '.min.js',
    extDot: 'first'
}],

Answer 1

您可以使用 grunt-contrib-uglify 的横幅属性来附加内容。 https://github.com/gruntjs/grunt-contrib-uglify#banner

这是 grunt 配置：

grunt.initConfig({
    uglify: {
      options: {
        banner: grunt.file.read('./javascript/account/custom.js'),
        beautify: true,
        mangle: false,
        compress: false,
        preserveComments: 'all'
      },
      files: {
        expand: true,
        cwd: 'javascript/',
        src: ['bills/*.js'],
        dest: 'test/',
        ext: '.min.js',
        extDot: 'first'
      },
    }
  });

在上面的配置中，bills 文件夹中的每个文件都将获得横幅属性中配置的 custom.js 的内容。

希望对你有所帮助

使用 Grunt Uglify 进行动态映射和连接

Dynamic Mapping and Concat with Grunt Uglify

gruntjs

grunt-contrib-uglify