如何使用gulp构建JavaScript包？

Question

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

例如,我的项目中有以下结构:

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-2),本地包括(3-4)和捆绑文件(5-6).

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

我想在bundle文件中指定依赖关系,如下所示:

/js/bundle1.js

(function() {

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

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

    // Some code here.

})();

我希望gulp处理这个源文件并创建一个最终的分发文件(bundle),确保所有依赖项(包括)在一个文件中合并在一起.所以我可以从我的HTML中包含foo.js,所有依赖项都可以使用.

我希望有一个清晰而强大的系统来管理项目中的所有依赖项并构建分发文件.

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

Answer 1

你提出的问题似乎只有一个答案,但没有.你试图解决的问题是许多人以多种不同方式解决的问题,你已经确定了两个主要选择:AMD和CommonJS.还有其他方法,但考虑到你可能不熟悉Javascript依赖管理以及gulp,我建议你选择一些相对简单的东西(即使这个主题本身并不简单).

我认为最简单的路线可能是:

• 使用CommonJS来表达依赖关系
• 使用browserify将它们解析为捆绑包
• 在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文件.