15

这是我第一次使用 Grunt，我想让它结合我所有的 js 模块，每个模块都包装在一个立即执行的函数中，包含一个“use strict”声明，并将它们放入一个文件中，只包含在一个立即执行的函数，只有一个“使用严格”声明。

这通常是如何完成的？

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

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

4

4 回答 4

35

从pull request 10开始，grunt-contrib-concat 现在有了一个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 中定义的其他属性进行模板化。

于 2013-06-29T14:17:21.557 回答
23

我通常会像jQuery 团队那样做。您创建一个intro.jsandoutro.js并将其他所有内容放在两者之间：

介绍.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'
  }
}
于 2012-10-16T04:58:02.153 回答
2

只是想添加到@elclanrs 答案，如果您希望能够将模块保存在单独的文件中以便在开发过程中更容易调试，您显然必须用intro.jsand包装它们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
    }
}

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

使用 grunt concat，我将如何自动将同一文件连接到许多其他文件？

于 2012-10-16T16:02:11.370 回答
1

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

另外：您不需要为插件进行任何显式模块配置，因为它依赖于 YUIDoc 样式中的声明性和分散式模块定义。

有关更多信息，请参见此处：https ://github.com/leoselig/grunt-concat-deps

于 2013-10-28T19:10:16.737 回答