Gulp: gulp-sass и gulp-css в задаче по умолчанию один за другим

Question

У меня возникла проблема с моими компилированными файлами sass, которые не выбраны для минимизации с помощью gulp-css одной командой.

Мой gulpfile.js файл выглядит следующим образом:

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

Теперь проблема заключается в том, что у меня есть на самом деле выполнить команду gulp дважды для скомпилированного файла Sass ковыряться в следующем раунде css minification.

Любая идея, как это сделать, чтобы она фактически попадалась прямо после ее обработки?

Answer 1

По умолчанию ваши sass, css и scripts выполняются в то же время. Поэтому ваша задача css будет минимизировать скомпилированный sass, который был там до выполнения задачи sass. Самый простой способ разрешить это - сделать задачу sass зависимой от задачи css. Это гарантирует выполнение задачи sass перед заданием css.

Ваша css задача будет выглядеть следующим образом:

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

Вы можете удалить sass задачу из default задачи, так что это выглядит следующим образом:

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