Gulpjs combine two tasks into a single task

Question

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

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?

Helicopter

Answer 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

Sigismundo

To those stumbling upon this in 2019-ish: This does not work in Gulp 4. See other answers that use parallel and/or series. – Sharmainesharman

Answer 2

It works.

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

Munroe

Great, that's by far the easiest solution, works just like a charm. – Ligialignaloes

This doesn't return a stream. This task can't be a dependency. – Kiangsi

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

Dissimulate

Could you explain your answer please? code-only answers are usually not accepted because they don't necessarily help others to understand how to solve a problem by themselves in future. – Electrochemistry

"Recommended" is such a misused world in the post-windows-xp era – Rothko

@ЯрославРахматуллин Could you explain it? – Dissimulate

It is a subjective remark; "recommended" is sometimes used to refer to the idiot-safe choice. I am offended by that. Other times it is used to point to a choice that is beneficial to the one asking the question (as opposed to whom it is recommended) - e.g. install some malware (recommended) in an installation wizard. In this answer, it is the idiot-safe choice. It is completely irrelevant for two independant tasks, the recommendation is useless for any other case that the very specific saas1, then sass2 use case. Imho it's better to understand stuff than to follow recommendations – Rothko

@ЯрославРахматуллин I use "recommended" to refer to advice or suggestion. Have added some explanations why it's not recommended. – Dissimulate

Answer 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

Obadiah

Answer 5

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

Brownie

Answer 6

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

Outride

I've edited your answer to quote what you've copied from the package's documentation. You definitely should also add a warning to your answer (just like the package itself does) that it works only with Gulp 4, which has not been released yet. – Bangalore

Answer 7

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

Hendecasyllable

Answer 8

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

Helicopter

I would really recommend solving this with tasks dependencies instead of this. Not only is it the prefered solution, but it's essentially the same thing you are doing - only you are doing it manually and much less descriptive if you ask me. Also if you really prefer to combine streams, you can look into "stream-combiner". Here is an example you can look at: github.com/gulpjs/gulp/blob/master/docs/recipes/… – Sigismundo

Answer 9

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

Tilth

What is the difference between the merge and just [task1, task2] ? – Munroe

Answer 10

THE SOLUTION: call the functions!!!

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

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

Carrizales

Answer 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

Meggie