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

问题描述

我目前有两项任务，都是编译sass文件。我仍然想将这两个目录连接成单独的文件，但是如果我可以简单地创建一个'sass'任务来负责所有的sass编译，那么它似乎更易于维护。

  //编译我们的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'）
。 （'./ public / dist / css'））; 
} ）; 
  

更新：

  //编译我们的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]）; 
}）; 
  

但是现在看起来这两个文件都没有被编译。任何关于我在做什么的建议都是错误的？

解决方案

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

在gulp中，您可以定义在给定任务之前需要运行的任务。 例如：

$ b $

  gulp.task（'scripts'，['clean']，function（）{
 // gulp.src（.. 。
））; 
  

当执行 gulp scripts


在你的例子中，我将两个独立的SASS任务作为一个普通SASS的依赖关系任务。例如：

pre $ //编译我们的Sass
gulp.task（'bootstrap-sass'，function（ ）{
return gulp.src（'./ public / bower / bootstrap-sass / lib / *。scss'）
.pipe（sass（））
.pipe（contact（' （'./ public / dist / css'））;
}）;

gulp.task（'site / bootstrap.css'））
.pipe -sass'，function（）{
返回gulp.src（'./ public / app / scss / *。scss'）
.pipe（sass（））
.pipe（contact（'site.css'））
.pipe（gulp.dest（ ./公共/ DIST / CSS'））;
}）;

gulp.task（'sass'，['bootstrap-sass'，'site-sass']）;


阅读更多关于Gulp食谱部分的任务依赖关系：

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

UPDATE:

I've tried this:

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

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

For instance:

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

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

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

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将两项任务合并为一项任务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！