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