如何使用 gulp 构建 JavaScript 包？

How to use gulp to build JavaScript bundles?

提问by Slava Fomin II

I want to use gulpto build bundles of JavaScript files.

我想使用gulp来构建 JavaScript 文件包。

For example I have the following structure in my project:

例如，我的项目中有以下结构：

1. /vendor/vendor1/vendor1.js
2. /vendor/vendor2/vendor2.js
3. /js/includes/include1.js
4. /js/includes/include2.js
5. /js/bundle1.js
6. /js/bundle2.js

1. /vendor/vendor1/vendor1.js
2. /vendor/vendor2/vendor2.js
3. /js/includes/include1.js
4. /js/includes/include2.js
5. /js/bundle1.js
6. /js/bundle2.js

There are vendor includes (1-2), local includes (3-4), and bundle files (5-6).

有供应商包含 (1-2)、本地包含 (3-4) 和捆绑文件 (5-6)。

Vendor includes are just third-party JavaScript libraries installed with boweror composer. They can be CommonJS, AMDor just a plain-old jQuery plugins.

供应商包含的只是与bower或composer一起安装的第三方 JavaScript 库。它们可以是CommonJS、AMD或只是一个普通的 jQuery 插件。

I want to specify dependencies inside of a bundle files like this:

我想在这样的包文件中指定依赖项：

/js/bundle1.js

/js/bundle1.js

(function() {

    // Vendor includes.
    include('vendor1');
    include('vendor2');

    // Local includes.
    include('includes/include1.js');
    include('includes/include2.js');

    // Some code here.

})();

I want gulpto process this source file and create a final distribution file (bundle) ensuring that all dependencies (includes) are merged together in a single file. So I can include foo.jsfrom my HTML and all dependencies will be available to it.

我希望gulp处理这个源文件并创建一个最终的分发文件（包），确保所有依赖项（包含）合并到一个文件中。所以我可以从我的 HTML 中包含foo.js并且所有依赖项都可以使用它。

I want to have a clear and robust system to manage all dependencies inside of a project and build distribution files.

我想要一个清晰而健壮的系统来管理项目内的所有依赖项并构建分发文件。

• How can I achieve this?
• What format should I use for my own scripts (AMD, CommonJS, other)?
• How do I specify dependencies in my source bundle files?
• How do I build distribution?

• 我怎样才能做到这一点？
• 我应该为自己的脚本（AMD、CommonJS、其他）使用什么格式？
• 如何在我的源包文件中指定依赖项？
• 我如何构建分发？

回答by daphne-d

Your question is posed as if there's a single answer, but there isn't. The problem you're trying to solve is one that many people have solved in many different ways, and you've identified two of the major options: AMD and CommonJS. There are other ways, but given that you might be new to Javascript dependency management as well as gulp, I'd recommend going with something that's relatively straightforward (even though this subject is inherently not straightforward).

您提出的问题好像只有一个答案，但实际上没有。您试图解决的问题是许多人以多种不同方式解决的问题，并且您已经确定了两个主要选项：AMD 和 CommonJS。还有其他方法，但考虑到您可能不熟悉 Javascript 依赖项管理以及 gulp，我建议使用相对简单的方法（即使这个主题本质上并不简单）。

I think the easiest route for you might be:

我认为对您来说最简单的路线可能是：

• use CommonJS to express the dependencies
• use browserify to resolve them into bundles
• in browserify, use the "UMD" method so that you get a single bundle that will work for apps that use either AMD or CommonJS or are not using either of these dependency management systems

• 使用 CommonJS 来表达依赖
• 使用 browserify 将它们解析为包
• 在 browserify 中，使用“UMD”方法，以便您获得一个包，该包适用于使用 AMD 或 CommonJS 或不使用这些依赖管理系统中的任何一个的应用程序

The statement in gulp to run browserify as such might look something like:

gulp 中运行 browserify 的语句可能类似于：

var browserify = require('gulp-browserify');
gulp.src('bundles/bundle1.js', {read: false})
  .pipe(browserify({
    'standalone': true
  })
  .pipe(rename('bundle1Output.js'))
  .pipe(gulp.dest('dist'));

That should give you a dist/bundle1Output.js file.

这应该会给你一个 dist/bundle1Output.js 文件。

回答by Karolis

There is a gulp plugin for this:

有一个 gulp 插件：

https://www.npmjs.com/package/gulp-include

https://www.npmjs.com/package/gulp-include

It should do what you want, except that in your bundle file instead of this:

它应该做你想做的，除了在你的包文件中而不是这个：

    (function() {

        // Vendor includes.
        include('vendor1');
        include('vendor2');

        // Local includes.
        include('includes/include1.js');
        include('includes/include2.js');

        // Some code here.

    })();

You would have to write:

你必须写：

    //=require vendor1/**/*.js
    //=require vendor2/**/*.js

    //=require includes/include1.js
    //=require includes/include2.js

    // Some code here