Question

这是我第一次使用Grunt，我希望它将所有我的js模块组合在一起，每个模块都包含在一个立即执行的函数中，包含一个'use strict'声明并将它们放入一个文件中，包裹只有一个立即执行的函数，只有一个'use strict'声明。

这通常是怎么做的？

我认为这是一个常见的用例？也许我会以错误的方式处理事情？我应该使用其中一种模块加载格式（即commonjs，amd）所有这些文件将始终一起加载到浏览器中，所以我实际上不介意删除所有立即执行的函数，如果这是人们通常如何去做的话。重要的是，最终结果以某种方式包装，传递lint和单元测试并包含'use strict'声明。

（我应该澄清一下，我确实有它工作，linting，单元测试，连接和缩小，当我在最终的连接文件中看到一堆不必要的立即执行函数时，我觉得我做错了什么。）

Answer 1

从pull request 10开始，grunt-contrib-concat现在有一个footer选项。我会使用横幅和页脚来代替介绍和outro文件。

<强> Gruntfile.js

concat: {
  dist: {
    src: ['src/my-lib.js'],
    dest: 'dist/<%= pkg.name %>.js',
    options: {
      banner: ";(function( window, undefined ){ \n 'use strict';",
      footer: "}( window ));"
    }
  }
}

在我看来，这更易于维护，并允许使用Gruntfile中定义的其他属性进行模板化。

Answer 2

我通常像jQuery team does it那样做。您创建了intro.js和outro.js并将其他所有内容放在其间：

<强> intro.js

;(function( window, undefined ){
  'use strict';

<强> outro.js

}( window ));

<强> grunt.js ：

concat: {
  dist: {
    src: [
      'js/src/intro.js',
      ...
      'js/src/outro.js'
    ],
    dest: 'js/out/app.js'
  }
}

Answer 3

只想添加@elclanrs的答案，如果您希望能够将模块保存在单独的文件中以便在开发过程中更容易地进行调试，那么您显然必须使用intro.js和outro.js来包装它们同样。使用内置的concat任务，您必须编写如下内容：

concat: {
  events_debug: { // wrap the 'events' module in IIFE
    src: [
      'js/src/intro.js',
      'js/src/events.js',
      'js/src/outro.js'
    ],
    dest: 'js/out/events.js'
  },
  callbacks_debug: { // wrap the 'callbacks' module in IIFE
    src: [
      'js/src/intro.js',
      'js/src/callbacks.js',
      'js/src/outro.js'
    ],
    dest: 'js/out/callbacks.js'
  }

  // zzZZZ...
}

这是非常乏味和自我重复。也许您可能想要为批量包装文件创建自定义任务，例如

wrap: {
    html: {
        intro: 'partials/intro.js',
        outro: 'partials/outro.js',
        src: 'js/*.js',
        dest: 'out' // output directory
    }
}

最近有一个问题，请看这个帖子：

Using grunt concat, how would I automate the concatenation of the same file to many other files?

Answer 4

我建议您使用我的grunt插件 grunt-concat-deps ，因为它会自动解析您的模块独立于您的架构。

PLUS：您不需要为插件提供任何显式模块配置，因为它依赖于YUIDoc风格的声明性和分散式模块定义。

有关详细信息，请参阅此处：https://github.com/leoselig/grunt-concat-deps

我正在尝试Grunt，需要一种简单的方法来连接我的模块

4 个答案: