Gulpjs 将两个任务组合成一个任务

Posted 2023-02-16

【中文标题】Gulpjs 将两个任务组合成一个任务

【英文标题】：Gulpjs combine two tasks into a single task

【发布时间】：2014-08-05 20:13:29

【问题描述】：

我目前有两个任务，它们都编译 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'));
);

更新：

我试过了：

// 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]);
);

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

【参考方案1】：

我认为正确的做法是使用任务依赖。

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

例如：

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

在终端中执行gulp scripts 时，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 配方部分阅读了有关任务依赖的更多信息：https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md

【讨论】：

致那些在 2019 年遇到此问题的人：这在 Gulp 4 中不起作用。请参阅使用 parallel 和/或 series 的其他答案。

【参考方案2】：

有效。

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

【讨论】：

太好了，这是迄今为止最简单的解决方案，就像一个魅力。

这不会返回流。此任务不能是依赖项。

【参考方案3】：

解决方案 1：

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

gulp.start 并行运行任务。它是异步的，这意味着 'bootstrap-sass' 可能在 'site-sass' 之前完成。但不推荐，因为

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

见https://github.com/gulpjs/gulp/issues/426

解决方案 2：

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

run-sequence 是一个 gulp 插件。

按指定顺序运行一系列 gulp 任务。该功能旨在解决您已定义运行顺序，但选择不使用或无法使用依赖项的情况。

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

此行并行运行'boostrap-sass'和'site-sass'。如果你想串行运行任务，你可以

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

【讨论】：

你能解释一下你的答案吗？仅代码的答案通常不被接受，因为它们不一定能帮助其他人了解将来如何自己解决问题。

“推荐”在后windows-xp时代就是这样一个被滥用的世界

@ЯрославРахматуллин 你能解释一下吗？

主观评价； “推荐”有时用来指代白痴安全的选择。我很生气。其他时候，它用于指向对提出问题的人有益的选择（而不是推荐的人） - 例如。在安装向导中安装一些恶意软件（推荐）。在这个答案中，这是白痴安全的选择。这对于两个独立的任务完全无关，对于非常具体的 saas1，然后是 sass2 用例的任何其他情况，该建议都是无用的。恕我直言，理解事物比遵循建议更好

@ЯрославРахматуллин 我使用“推荐”来指代建议或建议。添加了一些不推荐的解释。

【参考方案4】：

使用 Gulp4，您可以使用：

gulp.series 用于顺序执行

gulp.parallel 用于并行执行

gulp.task('default', gulp.series('MyTask001', 'MyTask002'));gulp.task('default', gulp.parallel('MyTask001', 'MyTask002'));

Article about here 您不再需要 run-sequence 插件 你需要安装： npm install -D gulp@next

【参考方案5】：

我刚刚找到了一个名为 gulp-all 的 gulp 插件并尝试了它。使用简单。

https://www.npmjs.com/package/gulp-all

包的文档说：

var all = require('gulp-all')

var styl_dir = 'path/to/styles/dir'
var js_dir   = 'path/to/scripts/dir'

function build() 
    return all(
        gulp.src(styl_dir + '/**/*')
            // build Styles 
            .pipe(gulp.dest('dist_dir')),
        gulp.src(js_dir + '/**/*')
            // build Scripts 
            .pipe(gulp.dest('dist_dir'))
    )


gulp.task('build', build);

你也可以将子任务放在一个数组中：

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

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

【讨论】：

我已经编辑了您的答案，以引用您从包的文档中复制的内容。你绝对应该在你的答案中添加一个警告（就像包本身一样）它只适用于尚未发布的 Gulp 4。

【参考方案6】：

在Gulp version 4，我们有parallel，所以你可以这样做：

// 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'));
  ));

我更喜欢第一种方法，因为它更容易维护

【参考方案7】：

原来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);
);

【讨论】：

我真的建议用任务依赖而不是这个来解决这个问题。它不仅是首选的解决方案，而且本质上与您正在做的事情相同 - 只是您是手动完成的，如果您问我，描述性要少得多。此外，如果您真的更喜欢组合流，您可以查看“stream-combiner”。这是您可以查看的示例：github.com/gulpjs/gulp/blob/master/docs/recipes/…

【参考方案8】：

我不确定我是否正确理解了问题，但如果我理解了，这应该是一个简单的解决方案：

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

【参考方案9】：

您是否尝试过使用merge-stream？

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

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

  return merge(bootstrap, site);

);

详情请见https://blog.mariusschulz.com/2015/05/02/merging-two-gulp-streams

【讨论】：

merge 和 just [task1, task2] 有什么区别？

【参考方案10】：

解决方案：调用函数！！！

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

注意括号 bootstrap()、site() 以便它们返回一个承诺 :)

【参考方案11】：

也可以通过传递这样的任务名称数组来创建另一个任务来编译其他任务：

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 compile-all-sass