Gulp插件做一个JavaScript"include"

Question

是否有 Gulp 插件允许我 include/concatenate JavaScript 文件在一起？

我正在尝试找到一种方法，使我可以 "include" 将一个 JavaScript 文件的内容提供给其他人。通过包含，我的意思是有这样的东西：

// main.js
var a = 2;
///include an-include-file.import.js

// an-include-file.import.js
var b = 5;

"Compile" 像这样：

// compiled.js
var a = 2;
var b = 5;

或者，可能更好，像这样：

 // compiled.js v2
 var a = 2;

 // wrapped in an anonymous, self-calling function to isolate scope
 (function () {
     var b = 5;
 })();

我自己写了一个插件来做到这一点，但我希望能够使用源地图。自己实现源映射比我想投入到这个小项目上的努力要多一些。

现在，我知道我可以使用 gulp-concat 之类的东西，但是没有一种简单的方法来控制它们的顺序。每次添加新文件都要修改gulpfile，然后手动把它们全部列出来（或者有很多复杂的模式），这是一个相当大的痛苦。

我更喜欢可以使用导入或包含来精确控制文件位置的东西，并从脚本本身而不是构建工具来控制它。与 LESS 之类的方法非常相似。

对于LESS，我做的是如果我不想让它们生成自己的独立文件，我用“.import.less”命名后缀文件，然后在我想要的地方@import它们它们在其他文件中。这使得只生成我想要的文件变得非常容易，而无需简单地创建一个巨大的文件。

Answer 1

我最终采纳了 Mike 的想法并使用 WebPack 和 Babel 来创建 ES6 风格的模块。

基本情况如下：

// math.js
export function sum (a, b) { return a + b; }

// main.js
import sum from "math";
console.log(sum(1, 2));

我使用 Gulp 来处理我的构建过程，简化的方式如下所示：

var gulp = require('gulp'),
    webpack = require('webpack-stream');

gulp.task('build', function () {
    return gulp.src('main.js')
        .pipe(webpack())
        .pipe(gulp.dest('dist'));
});

我的实际用法要复杂得多，但这是基本思路。我必须在我的 webpack 配置中使用 babel-loader（使用 ES2015 预设）让它将 ES6 处理成 ES5，然后 WebPack 将它们放在一个文件中。

Gulp插件做一个JavaScript"include"

Gulp plugin to do a JavaScript "include"

javascript

gulp

gulp-concat