Gulpjs 将两个任务组合成一个任务 [英] Gulpjs combine two tasks into a single task

问题描述

我目前有两个任务，它们都编译 sass 文件.我仍然想将这两个目录合并到单独的文件中，但如果我可以简单地创建一个负责所有 sass 编译的sass"任务，它似乎更易于维护.

I currently have two tasks, that both compile sass files. I would still like to concat the two directories into separate files but it seems that it would be more maintainable if I could simply create a 'sass' task that would be responsible for all of the sass compilation.

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

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

But now it appears that neither file is being compiled. Any suggestions on what I am doing wrong?

推荐答案

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

I think the proper way of doing this is using task dependency.

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

In gulp you can define tasks that needs to be run before a given task.

例如:

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

在终端中执行 gulp scripts 时，clean 在脚本任务之前运行.

When doing gulp scripts in the Terminal, clean is run before the scripts task.

在您的示例中，我将两个单独的 SASS 任务作为常见 SASS 任务的依赖项.比如:

In your example I'd have the two seperate SASS tasks as a dependency of a common SASS task. Something like:

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

You read more about the task dependecy on the Gulp recipes section: https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md

这篇关于Gulpjs 将两个任务组合成一个任务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！