如何使用gulp构建JavaScript包？

Question

我想使用大口吞下构建JavaScript文件的包。

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

1. /供应商/供应商1/供应商1.js
2. /供应商/供应商2/供应商2.js
3. /js/include/include 1.js
4. /js/include/include 2.js
5. /js/bundle1.js
6. /js/bundle2.js

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

供应商包含的只是与鲍尔或作曲家一起安装的第三方鲍尔库。它们可以是CommonJS，AMD，或者只是一个普通的jQuery插件。

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

/js/bundle1.js

(function() {

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

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

    // Some code here.

})();

我希望大口吞下处理这个源文件，并创建一个最终的分发文件(包)，确保所有依赖项(包括)合并到一个文件中。因此，我可以从我的HTML中包含foo.js，所有依赖项都将提供给它。

我希望有一个清晰而健壮的系统来管理项目内部的所有依赖关系，并构建发行文件。

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

Answer 1

你的问题似乎只有一个答案，但却没有。你想要解决的问题是，很多人已经用许多不同的方式解决了这个问题，你已经确定了两个主要的选择: AMD和CommonJS。还有其他方法，但考虑到您可能对Javascript依赖关系管理以及gulp还不熟悉，我建议您使用一些相对简单的方法(尽管这个主题本身并不简单)。

我想对你来说最简单的方法是：

• 使用CommonJS表示依赖关系
• 使用browserify将它们分解为包
• 在浏览器化中，使用"UMD“方法，这样您就可以得到一个用于使用AMD或CommonJS或不使用这些依赖关系管理系统的应用程序的包。

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'));

这将为您提供一个dist/bundle1Output.js文件。

Answer 2

这里有一个gulp插件：

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

它应该做您想做的事情，除了在您的包文件中，而不是这样：

    (function() {

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

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

        // Some code here.

    })();

你必须写：

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

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

    // Some code here