这是我第一次使用 Grunt，我想让它结合我所有的 js 模块，每个模块都包装在一个立即执行的函数中，包含一个“use strict”声明并将它们放入一个文件中，包装只有一个立即执行的函数，只有一个“使用严格”声明。
这通常是怎么做的？
我认为这将是一个常见的用例？也许我做错了事？我是否应该使用其中一种模块加载格式（即 commonjs、amd）所有这些文件将始终一起加载到浏览器中，所以如果人们通常这样做的话，我实际上不介意删除所有立即执行的函数。重要的部分是最终结果以某种方式包装，通过了 lint 和单元测试并包含“use strict”声明。
（我应该澄清一下，我确实让它工作，linting，单元测试，连接和缩小，当我在最终连接文件中看到一堆不必要的立即执行函数时，感觉就像我做错了什么.)
【问题讨论】：
标签： javascript concatenation gruntjs
我通常像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'
}
}
【讨论】：
我建议您使用我的 grunt 插件 grunt-concat-deps，因为它会自动解析独立于您的架构的模块。
另外：您不需要为插件进行任何显式模块配置，因为它依赖于 YUIDoc 样式中的声明性和分散式模块定义。
【讨论】：
截至pull request 10，grunt-contrib-concat 现在有一个footer 选项。我会使用 banner 和 footer 来代替 intro 和 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 中定义的其他属性进行模板化。
【讨论】：
只想添加到@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?
【讨论】：
//<--intro 之前的所有内容以及 //outro--> 之后的所有内容...？