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

请记住,传递字符串(或对象)和返回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.当您具有复杂的构建时,这可能很有用,因为它允许您对构建脚本的部分进行单元测试.