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

Question

我目前有两个任务，都编译sass文件。我仍然希望将这两个目录连接成单独的文件，但是如果我可以简单地创建一个负责所有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'));
});

更新：

我试过这个：

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

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

Answer 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食谱部分的任务依赖性：qazxsw poi

Answer 2

它也可以通过传递一组任务名称来创建另一个编译其他任务的任务，如下所示：

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

});

然后你可以简单地运行gulp compile-all-sass

Answer 3

有用。

https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md

Answer 4

解决方案1：

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

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

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

见

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

解决方案2：

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

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

是一个gulp插件。

按指定顺序运行一系列gulp任务。此函数旨在解决已定义运行顺序但选择不使用或不使用依赖关系的情况。

run-sequence

这行并行运行'bootstrap-sass'和'site-sass'。如果你想连续运行任务，你可以

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

Answer 5

我刚刚发现了一个叫做runSequence('bootstrap-sass', 'site-sass', cb); 的gulp插件并试了一下。它使用起来很简单。

gulp-all

该软件包的文档说：

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

Answer 6

事实证明

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

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

函数返回错误。为了解决这个问题，我需要确保site()先跑，所以我最终得到了这个：

bootstrap()

Answer 7

在

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

（仍然在alpha中），我们有并行，所以你可以这样做：

gulp4

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

// 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', gulp.parallel('bootstrap-sass', 'site-sass')); // Combine

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

Answer 8

使用Gulp4，您可以使用：

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

  用于顺序执行
• gulp.series用于并行执行 gulp.parallel gulp.task('default', gulp.series('MyTask001', 'MyTask002'));

qazxsw poi 你不再需要qazxsw poi插件了 你需要安装：npm install -D gulp @ next

Answer 9

你尝试过使用gulp.task('default', gulp.parallel('MyTask001', 'MyTask002'));吗？

Article about here

有关详细信息，请参阅run-sequence

Answer 10

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

merge-stream

请注意parens bootstrap（），site（），以便他们返回一个承诺:)