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

请记住，传递字符串（或对象）和返回promises在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);
});

还有一种新兴模式，当它们开始变得复杂时，将任务分离到它们自己的模块（文件）中，因此你可以将它们中的一些作为辅助函数写入它们自己的文件中require 。当您具有复杂的构建时，这可能很有用，因为它允许您对构建脚本的部分进行单元测试。

干掉gulp任务

1 个答案: