Gulp watchはプロダクションファイルを破損します

Question

しかし、私はgulp watchタスクを実行するとビルドが中断されるという問題に遭遇しました。これは、.scssファイルを編集し、gulpが変更を検出した場合にのみ発生します。

たとえば、ウェブサイトの特定のドキュメントにスタイルが正しく適用されています。私はgulpを呼び出すことによって資産を見始める。私はgulpを実行して、デフォルトのタスク（すべてを正しくビルドし、資産を連結します）を呼び出します。

これは私の実動ファイルを破壊しません。私はファイルを編集するまでではありません（そしてgulpがそれを検出し、必要なタスクを再度実行します）。

これは私が言ったことは意味を成していない場合、私はこの問題を呼び出す方法を体系的にリストアップします

//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); 
}); 

私gulpfileです。

1. 一気：、私は私のスタイリングに変更をしたいので、私は、ファイルを編集します。これはデフォルトタスク（このdoesntのブレークスタイリング）IDEで
2. 編集.scssファイルを実行しますgulp watchタスクはこれを検出し、再び 'default'タスクを返し、サイクルをもう一度開始します。
3. ブラウザを開いて、適用されたスタイリングを確認するためにサイトに移動します：これはどこでも壊れています。私のスタイリングはすべて削除されています。私のCSSの 'gulp.dest'ファイル配布フォルダ）は空白です。
4. gulp：以前のgulpプロセスをキャンセルしてもう一度実行すると、問題が解決されます。/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'); 
});