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在终端,干净的脚本任务之前运行.

在您的示例中,我将两个单独的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

Answer 2

有用.

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

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

Answer 4

使用Gulp4，您可以使用：

• gulp.series 用于顺序执行

• gulp.parallel 用于并行执行

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

关于此处的文章
您不再需要运行序列插件
您需要安装：npm install -D gulp @ next

Answer 5

我刚刚发现了一个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);

你也可以把子任务放在一个数组中:

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

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

Answer 6

在Gulp 版本 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'));
  }));

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