必須多次運行gulp才能獲取樣式更改

Question

編譯我的CSS時出現問題，當我在SASS文件中進行更改時，只是在嘗試多次後才更改最終文件。

 

    var gulp = require('gulp'); 
    var sass = require('gulp-sass'); 
    var rename = require('gulp-rename'); 
    var postcss = require('gulp-postcss'); 
    var autoprefixer = require('autoprefixer'); 
    var cssnano = require('cssnano'); 
    var concat = require('gulp-concat'); 
    var uglify = require('gulp-uglify'); 

    //CSS Tasks 
    gulp.task('styles', function() { 
     console.log("Compilling SASS"); 
     gulp.src('app/sass/style.scss') 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(postcss([ autoprefixer() ])) 
     .pipe(rename('999_style.css')) 
     .pipe(gulp.dest('app/css/')); 
    }); 
    gulp.task('stylescompress', ['styles'], function() { 
     console.log("Concating and moving all the css files in styles folder"); 
     gulp.src("app/css/**.css") 
     .pipe(concat('style.css')) 
     .pipe(postcss([ cssnano() ])) 
     .pipe(gulp.dest('css/')); 
    }); 

    //Javascript Tasks 
    gulp.task('jscompress', function() { 
     //console.log("Concating and moving all the js files in javascript folder"); 
     gulp.src("app/js/**.js") 
     .pipe(concat('scripts.js')) 
     .pipe(gulp.dest('js/')) 
     .pipe(rename('scripts.min.js')) 
     .pipe(uglify()) 
     .pipe(gulp.dest('js/')) 
    }); 

    //Watch task 
    gulp.task('default',function() { 
     gulp.watch(['app/sass/**/*.scss'],['stylescompress']) 
     .on('change', function(event) { 
      console.log('SASS - File ' + event.path + ' was ' + event.type + ', running tasks...'); 
     }); 
     gulp.watch(['app/js/**/*.js'],['jscompress']) 
     .on('change', function(event) { 
      console.log('SCRIPTS - File ' + event.path + ' was ' + event.type + ', running tasks...'); 
     }); 
    }); 

正如你所看到的，我使用了所有根據Gulp Docs，但我沒有找出發生了什麼事。

Answer 1

我失蹤了，當它做的退貨，咕嘟咕嘟瞭解何時應該調用的下一個任務，它記錄了Gulp Docs

我使用的流，使一口理解當每個任務結束，就像這樣：

gulp.task('somename', function() { 
    var stream = gulp.src('client/**/*.js') 
    .pipe(minify()) 
    .pipe(gulp.dest('build')); 
    return stream; 
});