Question

我有多套js模块，我想连接成单独的文件。我不想为每个文件创建单独的concat任务。能够将参数传递到gulp任务＆＃34; concat＆＃34;会更有意义。不幸的是，gulp并不允许将参数传递给任务（我确信这是有充分理由的。）

关于如何实现这一目标的任何想法？

用例

具体方案是网站，其中包含所有网页的global.js文件以及特定于页面的js文件。

为每个页面特定的js文件创建任务将很快使gulpfile.js在网站增长时难以管理。

我的开发环境：

我有一个dev/js/目录，它有多个子目录。每个子目录包含特定js文件的模块。因此，需要将每个子目录连接到lib/js/中的自己的文件中。

也许requirejs？

也许我应该考虑使用像requirejs这样的模块加载器。

Answer 1

我需要从我的源子目录（src / modules /）中获取模块，将特定文件连接到每个（src / distribution），然后将结果传递到我的分发文件夹中的子目录（dist / JS /模块/).

我不确定最终会为这个项目编写多少个模块，所以我想动态地完成它并发现这是最好的（最简单的）解决方案：

gulp.task("modules:js", () => {
let modules = fs.readdirSync("src/modules");
let concatModule = (module) => {
    return gulp.src([
        'src/distribution',
        module
    ])
    .pipe(concat(module))
    .pipe(gulp.dest("build/js/modules"));
}
for (let module of modules) {
    concatModule(module);
};
});

Answer 2

你可以使concatJS成为一个更高阶的函数：

var concatJS = function (src, filename, dest) {
  return function() {
    gulp.src(src)
      .pipe(concat(filename))
      .pipe(gulp.dest(dest));
  };
};

gulp.task('concat-1', concatJS('src/module-1', 'module-1.js', 'build/module-1'));
gulp.task('concat-2', concatJS('src/module-2', 'module-2.js', 'build/module-2'));
//etc...

Answer 3

注意：使用像browserify或webpack这样的捆绑包可能会更好。自从提出这个问题以来，我已经切换到浏览器而不是尝试推出自己的解决方案。

改进的解决方案：

var fs = require("fs");
/* other requires omitted */

/* Set JS dev directory in one place */
var jsSrc = "dev/js/";
var jsDest = "lib/js/";

var concat = function (path) {

      path     = path.replace(/\\/g, "/");
  var src      = path.replace(/(\/[^\/]+?\.js$)|(\/$)/, "/*.js";
  var filename = src.match(/\/([^\/]+?)(\/[^\/]+?\.js$)/)[1] + ".js";

  gulp.src(src)
      .pipe(concat(filename)
      .pipe(gulp.dest(jsDest));
});

/* The concat task just runs the concat function for
 * each directory in the javascript development directory.
 * It will take a performance hit, but allows concat to be
 * run as a dependency in a pinch.
 */
gulp.task("concat", function () {
  var dirArr = fs.readdirSync(jsDev);

  for (var d in dirArr) {
    var path = jsDev+dirArr[d]+"/";
    concat(path);
  }
});

/* Run "concat" as a dependency of the default task */
gulp.taks("default", ["concat"], function () {

  var JSWatcher = gulp.watch([jsSrc+"**/*.js"]);

  JSWatcher.on("change", function (event) {
    concat(event.path);
  });

});

好吧，我觉得这很有效。虽然它有点像黑客，但并不适用于所有用例。

...删除了上一个示例以节省空间...

有没有办法在gulpfile.js中动态设置src和dest？

用例

我的开发环境：

也许requirejs？

3 个答案:

改进的解决方案：