Gulp : gulp-sass and gulp-css in default task one after the other

Question

I'm having a problem with my comiled sass files not being picked for the minification with gulp-css in one command.

My gulpfile.js file is as follow:

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    sass = require('gulp-sass'),
    cssMin = require('gulp-css');

gulp.task('sass', function() {

    gulp.src('./scss/app.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css/front'));

    gulp.src('./scss/wysiwyg.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css/front'));

});

gulp.task('css', function() {

    gulp.src([
        './css/front/wysiwyg.css'
        ])
        .pipe(concat('wysiwyg.css'))
        .pipe(cssMin())
        .pipe(gulp.dest('./css'));

    gulp.src([
        './css/admin/core.css',
        './js/plugin/jquery-ui/jquery-ui.css',
        './css/admin/fileuploader.css',
        './js/plugin/imgareaselect-master/distfiles/css/imgareaselect-animated.css',
        './css/fa/css/font-awesome.css'
        ])
        .pipe(concat('app-admin.css'))
        .pipe(cssMin())
        .pipe(gulp.dest('./css'));

    gulp.src([
        './css/front/animate.css',
        './bower_components/OwlCarousel2/src/css/owl.theme.default.css',
        './bower_components/OwlCarousel2/src/css/owl.autoheight.css',
        './bower_components/OwlCarousel2/src/css/owl.animate.css',
        './bower_components/OwlCarousel2/src/css/owl.carousel.css',
        './js/plugin/touchTouch/touchTouch.css',
        './css/fa/css/font-awesome.css',
        './css/front/app.css'
        ])
        .pipe(concat('app.css'))
        .pipe(cssMin())
        .pipe(gulp.dest('./css'));

});

gulp.task('scripts', function() {

    gulp.src([
        './bower_components/modernizr/modernizr.js'
        ])
        .pipe(concat('modernizr.js'))
        .pipe(uglify())
        .pipe(gulp.dest('js'));

    gulp.src([
        './bower_components/jquery/dist/jquery.js',
        './js/plugin/jquery-ui/jquery-ui.js',
        './js/plugin/jquery.easing.min.js',
        './js/plugin/mdn-bind.js',
        './js/plugin/jquery.cookie.js',
        './js/plugin/jquery.livequery.js',
        './js/plugin/preload/jquery.imgpreload.min.js',
        './js/plugin/jquery.tablednd.0.7.min.js',
        './js/plugin/jquery.tinysort.min.js',
        './js/plugin/uploader/fileuploader.min.js',
        './js/plugin/imgareaselect-master/jquery.imgareaselect.dev.js',
        './node_modules/jquery-datetimepicker/jquery.datetimepicker.js'
        ])
        .pipe(concat('libs-admin.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./js'));

    gulp.src([
        './js/object/systemObject.js',
        './js/object/formObject.js',
        './js/object/adminObject.js',
        './js/object/uploadObject.js',
        './js/object/dialogObject.js',
        './js/object/imageObject.js',
        './js/module/admin.js'
    ])
        .pipe(concat('app-admin.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./js'));

    gulp.src([
        './node_modules/angular/angular.js',
        './node_modules/angular-cookies/angular-cookies.js',
        './node_modules/angular-messages/angular-messages.js',
        './bower_components/jquery/dist/jquery.js',
        './js/plugin/touchTouch/touchCmd.jquery.js',
        './bower_components/OwlCarousel2/src/js/owl.carousel.js',
        './bower_components/OwlCarousel2/src/js/owl.autoplay.js',
        './bower_components/OwlCarousel2/src/js/owl.animate.js',
        './bower_components/OwlCarousel2/src/js/owl.navigation.js',
        './bower_components/foundation/js/foundation/foundation.js',
        './bower_components/foundation/js/foundation/foundation.equalizer.js',
        './bower_components/fastclick/lib/fastclick.js'
        ])
        .pipe(concat('libs.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./js'));

    gulp.src([
        './js/angular/module.js',
        './js/angular/filters/**/*.js',
        './js/angular/services/**/*.js',
        './js/angular/directives/**/*.js',
        './js/angular/controllers/**/*.js',
        './js/object/Template.js',
        './js/module/front.js'
        ])
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./js'));

});

gulp.task('default', ['sass', 'css', 'scripts']);

Now, the problem is with the fact that I have to actually run the gulp command twice for the compiled sass file to be picked in the next round css minification.

Any idea how to do it so that it actually gets picked straight after it has been processed?

Answer 1

By default, your sass, css, and scripts are executed at the same time. Therefore your css task will minify the compiled sass that was there before the sass task was executed. The easiest way to resolve this, is to make the sass task a dependancy of the css task. This makes sure the sass task is executed before the css task.

Your css task would then look like this:

gulp.task('css', ['sass'], function {
   // your current body here
});

You can then remove the sass task from the default task, so that it looks like this:

gulp.task('default', ['css', 'scripts']);