javascript - DRY up gulp 任务

Question

假设我有这两个 gulp 任务:

gulp.task('js.task1', function() {
  return gulp.src(config.js1.src)
  .pipe($.plumber())
  .pipe($.if(production, $.uglify()))
  .pipe(gulp.dest(config.js1.dest));
});

gulp.task('js.task2', function() {
  return gulp.src(config.js2.src)
  .pipe($.plumber())
  .pipe($.if(production, $.uglify()))
  .pipe(gulp.dest(config.js2.dest));
});

除了 src 和 dest 位置之外，它们都是相同的。

有没有可能做这样的事情？

function jsMoveGeneric(src, dest) {
  return gulp.src(src)
  .pipe($.plumber())
  .pipe($.if(production, $.uglify()))
  .pipe(gulp.dest(dest));
}

gulp.task('js.task1', jsMoveGeneric.bind(null, config.js1.src, config.js1.dest));
gulp.task('js.task2', jsMoveGeneric.bind(null, config.js2.src, config.js2.dest));

Answer 1

您甚至不需要将其复杂化。你的两个函数体几乎是一样的，只是少了几个参数。

function uglyPlumber(src, dest) {
  return gulp.src(src)
    .pipe($.plumber())
    .pipe($.if(production, $.uglify()))
    .pipe(gulp.dest(dest));
}

gulp.task('js.task1', function() {
  return uglyPlumber(config.js1.src, config.js1.dest);
});

gulp.task('js.task2', function() {
  return uglyPlumber(config.js2.src, config.js2.dest);
});

请记住，传递字符串(或对象)并返回 promise 在 JS 中工作得很好，因此您可以将主体移动到更通用的函数中并从那里返回结果。只要您从任务中返回该函数的输出，gulp 就不知道也不关心实际调用了什么。

如果您知道您将始终传递具有 src 和 dest 属性的对象，您可以利用它来执行以下操作:

function uglyPlumber(path) {
  return gulp.src(path.src)
    .pipe($.plumber())
    .pipe($.if(production, $.uglify()))
    .pipe(gulp.dest(path.dest));
}

gulp.task('js.task1', function() {
  return uglyPlumber(config.js1);
});

还有一种新兴的模式，当任务开始变得复杂时，使用 gulp 将任务隔离到它们自己的模块(文件)中，因此您可以将其中一些作为辅助函数编写在它们自己的文件中并 require那个。当您有一个复杂的构建时，这会很有用，因为它允许您对构建脚本的各个部分进行单元测试。