Gulpjs combine two tasks into a single task

问题:

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?

回答1:

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

回答2:

It works.

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

回答3:

Solution 1:

gulp.task('sass', function() {
  gulp.start('bootstrap-sass', 'site-sass');
})

gulp.start runs tasks in parallel. And it's asynchronous, which means 'bootstrap-sass' may be finished before 'site-sass'. But it's not recommended because

gulp.start is undocumented on purpose because it can lead to complicated build files and we don't want people using it

see https://github.com/gulpjs/gulp/issues/426

Solution 2:

var runSequence = require('run-sequence');
gulp.task('sass', function (cb) {
  runSequence(['bootstrap-sass', 'site-sass'], cb);
});

run-sequence is a gulp plugin.

Runs a sequence of gulp tasks in the specified order. This function is designed to solve the situation where you have defined run-order, but choose not to or cannot use dependencies.

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

This line runs 'boostrap-sass' and 'site-sass' in parallel.If you want to run tasks serially, you can

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

回答4:

With Gulp4 you can use:

• gulp.series for sequential execution

• gulp.parallel for parallel execution

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

Article about here
You dont need run-sequence plugin anymore
You need install: npm install -D gulp@next

回答5:

I just found a gulp plugin called gulp-all and tried it. It's simple to use.

https://www.npmjs.com/package/gulp-all

The documentation of the package says:

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

also you can put subtasks in an array:

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

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

回答6:

In Gulp version 4, we have parallel, so you can do:

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

You can also write it as a single task by doing:

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

I prefer the first method because it is easier to maintain

回答7:

Turns out that the site() function was returning an error. In order to fix it, I needed to make sure bootstrap() ran first so I ended up with 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 bootstrap().on('end', site);
});

回答8:

Have you tried using 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);

});

See https://blog.mariusschulz.com/2015/05/02/merging-two-gulp-streams for more details

回答9:

THE SOLUTION: call the functions!!!

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

Be aware of the parens bootstrap(), site() so they return a promise :)

回答10:

I'm not sure if I understand question correctly, but if I do, this should be a simple solution:

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

回答11:

Its also possible, to create another task to compile other tasks by passing an array of task names like this:

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

then you can simply run gulp compile-all-sass