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?
Have you tried using merge-stream?
See https://blog.mariusschulz.com/2015/05/02/merging-two-gulp-streams for more details
In Gulp version 4, we have
parallel
, so you can do:You can also write it as a single task by doing:
I prefer the first method because it is easier to maintain
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:
It works.
Its also possible, to create another task to compile other tasks by passing an array of task names like this:
then you can simply run gulp compile-all-sass
THE SOLUTION: call the functions!!!
Be aware of the parens bootstrap(), site() so they return a promise :)