Gulp手錶打破生產文件

Question

所以，我遇到了一個問題，運行我的吞噬觀察任務打破了我的構建，但是;這隻發生在我編輯.scss文件時，gulp檢測到這個變化。

例如，樣式已正確應用於我網站上的特定文檔。我開始通過調用吞嚥來觀察我的資產。我運行gulp來調用默認任務（正確構建所有內容，連接我的資源等）。

這不會中斷我的生產文件。直到我編輯文件，（並且吞噬檢測到並且再次運行必要的任務），這發生。

這是我gulpfile

//Node dependencies 
var gulp = require('gulp'), 
    minifyCSS = require('gulp-clean-css'), 
    minifyJS = require('gulp-uglify'), 
    rename = require('gulp-rename'), 
    sass = require('gulp-sass'), 
    pump = require('pump'), 
    sync = require('run-sequence'); 

//Sass transpilation task 
gulp.task('sass', function(cb) { 
    pump([ 
    gulp.src('app/scss/*.scss'), 
    sass(), 
    gulp.dest('app/css') 
    ], cb); 
}); 

//Uglify CSS task 
gulp.task('ugCSS', function(cb) { 
    pump([ 
    gulp.src('app/css/*.css'), 
    minifyCSS(), 
    rename({ 
     suffix: ".min" 
    }), 
    gulp.dest('dist/css') 
    ], cb); 
}); 

//Uglify JS task 
gulp.task('ugJS', function(cb) { 
    pump([ 
    gulp.src('app/js/*.js'), 
    minifyJS(), 
    rename({ 
     suffix: ".min" 
    }), 
    gulp.dest('dist/js') 
    ], cb); 
}); 

//Watch task 
gulp.task('watch', function() { 
    return gulp.watch('app/scss/*.scss', ['default']); 
}); 

//Default task to make sure everythings runs syncronously 
gulp.task('default', function(callback) { 
    sync('sass', 'ugCSS', 'ugJS', 'watch', callback); 
}); 

如果我說的話沒有是有道理的，我會列出系統我怎麼調用這個問題。

1. 一飲而盡：此運行默認任務（這並不休息造型）
2. 編輯.scss文件在IDE：我想做出改變我的風格，所以我編輯文件時，吞噬監視任務檢測到這一點，並再次返回「默認」任務，重新開始循環。
3. 打開瀏覽器並導航到網站以查看應用的樣式：這是它斷開的位置，我的所有樣式已被刪除，我的css的'gulp.dest'文件（我已經被uglified並傳入分發文件夾）爲空。
4. 吞噬：取消先前的吞嚥過程並再次運行它可以修復問題。回到/ dist中的css文件 - 所有樣式都在那裏。

長話短說，我的風格只刪除當我「積極」編輯.scss文件和吞氣表任務調用所需的任務，以構建文件到生產文件夾，所以有關的文件可以看到這些變化。

Answer 1

做回我自己有一口一個新手，具有我通過看解決了類似的問題：How to run Gulp tasks sequentially one after the other，這裏是你可以嘗試：

//Sass transpilation task 
gulp.task('sass', function() { 
    return gulp.src('app/scss/*.scss') // return solved my problem 
      .pipe(sass()/*.on('error', sass.logError)*/) // optional on error 
      .pipe(dest('app/css')); 
}); 

//Uglify CSS task 
gulp.task('ugCSS', function() { 
    return gulp.src('app/css/*.css') 
      .pipe(minifyCSS()) 
      .pipe(rename({suffix: ".min"}) 
      .pipe(dest('dist/css')); 
}); 

//Uglify JS task 
gulp.task('ugJS', function() { 
    return gulp.src('app/js/*.js') 
      .pipe(minifyJS()) 
      .pipe(rename({suffix: ".min"}) 
      .pipe(dest('dist/js')); 
}); 

//Watch task 
gulp.task('watch', function() { 
    return gulp.watch('app/scss/*.scss', ['default']); 
}); 

//Default task to make sure everythings runs syncronously 
gulp.task('default', function() { 
    sync('sass', 'ugCSS', 'ugJS'); 
});