Gulpjs将两个任务合并为一个任务

我目前有两个任务，都是编译sass文件。我仍然希望将这两个目录合并到单独的文件中，但如果我可以简单地创建一个负责所有sass编译的“sass”任务，那么它似乎更易于维护

// Compile Our Sass
gulp.task('bootstrap-sass', function() {
  return gulp.src('./public/bower/bootstrap-sass/lib/*.scss')
    .pipe(sass())
    .pipe(contcat('bootstrap.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('site-sass', function() {
  return gulp.src('./public/app/scss/*.scss')
    .pipe(sass())
    .pipe(contcat('site.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

更新：

gulp.task('sass', function() {
  gulp.start('bootstrap-sass', 'site-sass');
})

var runSequence = require('run-sequence');
gulp.task('sass', function (cb) {
  runSequence(['bootstrap-sass', 'site-sass'], cb);
});

我试过这个：

// Compile Our Sass
gulp.task('sass', function() {
  var bootstrap = function() {
    return gulp
      .src('./public/bower/bootstrap-sass/lib/*.scss')
      .pipe(sass())
      .pipe(concat('bootstrap.css'))
      .pipe(gulp.dest('./public/dist/css'));
  };

  var site = function() {
    return gulp
      .src('./public/src/scss/*.scss')
      .pipe(sass())
      .pipe(concat('site.css'))
      .pipe(gulp.dest('./public/dist/css'));
  };

  return Promise.all([bootstrap, site]);
});

---

但现在看来两个文件都没有被编译。关于我做错了什么有什么建议吗？

我认为正确的方法是使用任务依赖性

在gulp中，您可以定义在给定任务之前需要运行的任务

例如：

gulp.task('scripts', ['clean'], function () {
    // gulp.src( ...
});

在终端中执行

吞咽脚本时，在脚本任务之前运行clean

在您的示例中，我将两个独立的SASS任务作为一个普通SASS任务的依赖项。比如：

// Compile Our Sass
gulp.task('bootstrap-sass', function() {
  return gulp.src('./public/bower/bootstrap-sass/lib/*.scss')
    .pipe(sass())
    .pipe(contact('bootstrap.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('site-sass', function() {
  return gulp.src('./public/app/scss/*.scss')
    .pipe(sass())
    .pipe(contact('site.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('sass', ['bootstrap-sass', 'site-sass']);

您在Gulp recipes部分了解了有关任务依赖性的更多信息：
发现
site（）
函数返回了一个错误。为了修复它，我需要确保首先运行
bootstrap（）
，因此我最终得到以下结果：

// Compile Our Sass
gulp.task('sass', function() {
  var bootstrap = function() {
    return gulp
      .src('./public/bower/bootstrap-sass/lib/*.scss')
      .pipe(sass())
      .pipe(concat('bootstrap.css'))
      .pipe(gulp.dest('./public/dist/css'));
  };

  var site = function() {
    return gulp
      .src('./public/src/scss/*.scss')
      .pipe(sass())
      .pipe(concat('site.css'))
      .pipe(gulp.dest('./public/dist/css'));
  };

  return bootstrap().on('end', site);
});

解决方案1:

gulp.task('sass', function() {
  gulp.start('bootstrap-sass', 'site-sass');
})

var runSequence = require('run-sequence');
gulp.task('sass', function (cb) {
  runSequence(['bootstrap-sass', 'site-sass'], cb);
});

gulp.start并行运行任务。它是异步的，这意味着“引导sass”可能在“站点sass”之前完成。但不建议这样做，因为

gulp.start故意未记录，因为它可能导致
复杂的构建文件，我们不希望人们使用它

看

解决方案2:

gulp.task('sass', function() {
  gulp.start('bootstrap-sass', 'site-sass');
})

var runSequence = require('run-sequence');
gulp.task('sass', function (cb) {
  runSequence(['bootstrap-sass', 'site-sass'], cb);
});

是一个吞咽插件

按指定顺序运行一系列吞咽任务。此函数用于解决已定义运行顺序但选择不使用或无法使用依赖项的情况

此行并行运行“boostrap sass”和“site sass”。如果要连续运行任务，可以

runSequence('bootstrap-sass', 'site-sass', cb);

你试过使用吗

有关更多详细信息，请参见
我刚刚找到了一个名为
gulpall
的gulp插件，并进行了尝试。它使用起来很简单


该包的文件说明：

还可以将子任务放入数组中：

var scriptBundles = [/*...*/]

function build(){
    var subtasks = scriptBundles.map(function(bundle){
        return gulp.src(bundle.src).pipe(/* concat to bundle.target */)
    })
    return all(subtasks)
}

它起作用了

var task1 = gulp.src(...)...
var task2 = gulp.src(...)...
return [task1, task2];

也可以创建另一个任务来编译其他任务，方法是传递任务名称数组，如下所示：

gulp.task('sass-file-one', function () {
     console.log('compiled sass-file-one')
});
gulp.task('sass-file-two', function () {
     console.log('compiled sass-file-two')
});

gulp.task('compile-all-sass', ['sass-file-one','sass-file-two']);

然后，您只需在中运行gulp编译所有sas，我们有并行的，因此您可以执行以下操作：

// Compile Our Sass
gulp.task('bootstrap-sass', function() {
  return gulp.src('./public/bower/bootstrap-sass/lib/*.scss')
    .pipe(sass())
    .pipe(concat('bootstrap.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('site-sass', function() {
  return gulp.src('./public/app/scss/*.scss')
    .pipe(sass())
    .pipe(concat('site.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('sass', gulp.parallel('bootstrap-sass', 'site-sass')); // Combine

您还可以通过执行以下操作将其作为单个任务编写：

gulp.task('sass', gulp.parallel(
  function() {
      return gulp.src('./public/bower/bootstrap-sass/lib/*.scss')
        .pipe(sass())
        .pipe(concat('bootstrap.css'))
        .pipe(gulp.dest('./public/dist/css'));
  },
  function() {
      return gulp.src('./public/app/scss/*.scss')
        .pipe(sass())
        .pipe(concat('site.css'))
        .pipe(gulp.dest('./public/dist/css'));
  }));

我更喜欢第一种方法，因为它更容易维护解决方案：调用函数

return Promise.all([bootstrap(), site()])

请注意parensbootstrap（），site（），因此他们会回报一个承诺：）
使用Gulp4，您可以使用：


gulp.series
用于顺序执行
gulp.parallel
用于并行执行

gulp.task（'default'，gulp.series（'MyTask001'，'MyTask002'）

gulp.task（'default'，gulp.parallel（'MyTask001'，'MyTask002'）




您不再需要插件了

您需要安装：
npm安装-Dgulp@next
我不确定我是否正确理解了这个问题，但如果我理解了，这应该是一个简单的解决方案：

gulp.task('sass', ['bootstrap-sass', 'site-sass']);

我真的建议用任务依赖关系而不是这个来解决这个问题。它不仅是首选的解决方案，而且本质上与您正在做的事情相同——只是您正在手动执行，如果您问我的话，说明性要少得多。另外，如果您真的喜欢组合流，您可以查看“流组合器”。这里有一个你可以看的例子：你能解释一下你的答案吗？只有代码的答案通常不被接受，因为它们不一定能帮助其他人理解如何在将来自己解决问题。“推荐”在后windows xp时代是一个被误用的世界吗？你能解释一下吗？这是一个主观的评论；“推荐”有时用于指白痴安全选择。我对此很生气。其他情况下，它用于指向一个对提问者有利的选择（与推荐对象相反），例如，在安装向导中安装一些恶意软件（推荐）。在这个答案中，这是白痴安全的选择。它与两个独立的任务完全无关，对于非常特定的saas1，然后是sass2用例的任何其他情况，该建议都是无用的。我认为理解东西比遵循建议更好，我用“推荐”来指建议或建议。我已经添加了一些不推荐的解释。我已经编辑了您的答案，以引用您从软件包文档中复制的内容。你当然也应该在你的答案中添加一个警告（就像软件包本身一样），它只适用于Gulp 4，它还没有发布。合并和just[task1，task2]之间的区别是什么？太好了，这是迄今为止最简单的解决方案，就像一个符咒一样有效。这不会返回流。这个任务不可能是一个依赖项。对于那些在2019年遇到这个问题的人来说：这在Gulp4中不起作用。请参阅使用
并行
和/或
系列
的其他答案。