Question

我目前有两个任务，都编译sass文件。我仍然希望将这两个目录连接成单独的文件，但是如果我可以简单地创建一个＆＃39; sass＆＃39;那么它似乎更易于维护。任务将负责所有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食谱部分阅读有关任务依赖性的更多信息：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并行运行任务。它是异步的，这意味着＆＃39; bootstrap-sass＆＃39;可能会在＃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);

这条线路运行＆＃39; boostrap-sass＆＃39;和＆＃39; site-sass＆＃39;并行。如果你想连续运行任务，你可以

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

Answer 4

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

Answer 5

使用Gulp4，您可以使用：

<% for (var i = 0; i < result.length; i++) { %> <tr> <td><%= result[i].Kickoff %> </td> <td><%= result[i].statustype %> </td> <td><%= result[i].country %> <img src="/public/images/<%= result[i].country %>.png" alt="img" /> </td> <td><%= result[i].league %> </td> <td><%= result[i].hteam %> </td> <td><%= result[i].ateam %> </td> </tr> <% }; %>用于顺序执行
gulp.series用于并行执行

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

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

Answer 6

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

Answer 7

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

// 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

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

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

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

Answer 8

您是否尝试过使用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

Answer 9

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

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

请注意parens bootstrap（）， site（），以便他们返回承诺：）

Answer 10

通过传递一组任务名称来创建另一个编译其他任务的任务也是可能的：

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

Answer 11

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

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

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

11 个答案: