所以,我遇到了一個問題,運行我的吞噬觀察任務打破了我的構建,但是;這隻發生在我編輯.scss
文件時,gulp檢測到這個變化。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);
});
如果我說的話沒有是有道理的,我會列出系統我怎麼調用這個問題。
- 一飲而盡:此運行默認任務(這並不休息造型)
- 編輯.scss文件在IDE:我想做出改變我的風格,所以我編輯文件時,吞噬監視任務檢測到這一點,並再次返回「默認」任務,重新開始循環。
- 打開瀏覽器並導航到網站以查看應用的樣式:這是它斷開的位置,我的所有樣式已被刪除,我的css的'gulp.dest'文件(我已經被uglified並傳入分發文件夾)爲空。
- 吞噬:取消先前的吞嚥過程並再次運行它可以修復問題。回到/ dist中的css文件 - 所有樣式都在那裏。
長話短說,我的風格只刪除當我「積極」編輯.scss
文件和吞氣表任務調用所需的任務,以構建文件到生產文件夾,所以有關的文件可以看到這些變化。
代替手錶的「默認」的任務做一個測試,只運行'sass'作業來查看是否正確編譯了樣式 – emvidi
嘗試過,同樣的事情。如果我像在gulp sass一樣自己運行sass任務 - 那很好。 如果我運行監視任務,並且監視任務檢測到更改,然後運行sass任務,那麼它就會中斷。 –
我面臨着類似的情況,我認爲問題在於任務沒有按順序完成。很確定'ugCSS'在'sass'完成工作之前運行。 – emvidi