58

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

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

4

11 回答 11

69

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

在 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

于 2014-06-16T07:57:33.140 回答
35

有用。

var task1 = gulp.src(...)...
var task2 = gulp.src(...)...
return [task1, task2];
于 2015-11-12T15:41:07.180 回答
22

解决方案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);
于 2015-05-12T10:38:56.613 回答
16

使用 Gulp4，您可以使用：

  • gulp.series用于顺序执行

  • gulp.parallel用于并行执行

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

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

于 2018-03-04T19:15:04.537 回答
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)
}
于 2015-10-31T09:26:17.860 回答
5

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

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

于 2017-07-04T19:25:03.363 回答
2

原来该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);
});
于 2014-06-16T08:10:40.933 回答
2

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

gulp.task('sass', ['bootstrap-sass', 'site-sass']);
于 2019-06-14T14:46:51.017 回答
1

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

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

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

于 2017-11-09T15:13:23.583 回答
1

您是否尝试过使用合并流？

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

于 2015-09-29T21:07:57.317 回答
0

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

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

于 2017-05-01T14:42:34.360 回答