Unable to setup gulp sass with bundling and minification - sass

Question

I am having troubling running sass and minification together. Some times the minification task starts before the sass task has finished.
When I run the separately they work fine.
Here is my gulp file...
/// <binding />
"use strict";
var gulp = require("gulp"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
merge = require("merge-stream"),
del = require("del"),
bundleconfig = require("./bundleconfig.json"),
runSequence = require('run-sequence');
var sass = require('gulp-sass');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var webroot = "./wwwroot/";
var paths = {
scss: webroot + "sass/**/*.scss",
scssDest: webroot + "css/"
};
// 1. react
gulp.task('react', function () {
return browserify({ entries: './wwwroot/clientapp/root', extensions: ['.jsx', '.js'], debug: true })
.transform('babelify', { presets: ['es2015', 'react'] })
.bundle()
.pipe(source('index.js'))
.pipe(gulp.dest('./wwwroot/'));
});
// 2. sass
gulp.task('compile:sass', function () {
gulp.src(paths.scss)
.pipe(sass())
.pipe(gulp.dest(paths.scssDest));
});
gulp.task("sass", ["compile:sass"]);
function getBundles(regexPattern) {
return bundleconfig.filter(function (bundle) {
return regexPattern.test(bundle.outputFileName);
});
}
gulp.task("css", function () {
var tasks = getBundles(/\.css$/).map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: "." })
.pipe(concat(bundle.outputFileName))
.pipe(cssmin())
.pipe(gulp.dest("."));
});
return merge(tasks);
});
gulp.task("clean", function () {
return del(['wwwroot/css/*', 'wwwroot/index.js']);
});
gulp.task("default", ["clean", "sass", "react", "css"]);

Answer 1

It looks like you are assuming that these tasks are run in series:
gulp.task("default", ["clean", "sass", "react", "css"]);
They do not, from gulp.task documentation:
Note: The tasks will run in parallel (all at once), so don't assume that the tasks will start/finish in order.
There are a number of ways to fix that and there should be a few questions here on the subject.
You can use run-sequence, use gulp4.0 which has series and parallel functions (but is still technically in beta) or make some task like your 'react' task dependent on the 'sass' and 'css" tasks having finished.
So try :
gulp.task('react', ['css'], function () { ...
gulp.task("css", ['sass'], function () { ...
gulp.task('compile:sass', ['clean'], function () { ...
and now simply
gulp.task("default", ["react"]);
will fire them off in the correct order.
Although I suppose 'clean' doesn't necessarily have to run first. run-sequence does help to make the order of things much more obvious. If you can I would suggest looking into gulp4.