解決済み：Gulpが突然変更を監視しなくなり、scssをCSSにコンパイルして開き、再読み込みするページ

Question

Gulpを使用してSCSSをCSSにコンパイルする（いくつかのSCSSファイルからCSSファイルを1つ作成する） CSSを使用して、ブラウザの同期を使用してファイルの変更を確認し、ページを再読み込みします。

いくつかのscssとhtmlコードを変更し、gulpfileに何もせず、ファイルの名前を変更しない間に、ブラウザのページが突然失敗し、ページを見つけることができないと言いました。

"gulp"コマンドでページをリロードしようとしましたが、それが役に立たなかった。

私はいくつかの問題があります。 Gulp： - 変更を監視しなくなりました。 - scssをCSSにコンパイルする。 - ページを開いて再読み込みします。

これらはすべてこの問題以前に完全に機能しました。

ここでガルプのための私のコードです：

var gulp = require("gulp"); 
 
var sass = require("gulp-sass"); 
 
var watch = require("gulp-watch"); 
 
var csso = require("gulp-csso"); 
 
var concat = require("gulp-concat"); 
 
var browserSync = require("browser-sync").create(); 
 

 
/* Static Server + watching scss/html files */ 
 
gulp.task("serve", ["sass"], function() { 
 

 
    browserSync.init({ 
 
     server: "./" 
 
    }); 
 

 
    gulp.watch("*.html").on("change", browserSync.reload); 
 
    gulp.watch("sass/*.scss", ["sass"]).on("change", browserSync.reload); 
 
}); 
 

 
/* Compile Sass into CSS & auto-inject into browsers */ 
 
gulp.task("sass", function() { 
 
    return gulp.src("sass/*.scss") 
 
     .pipe(sass().on('error', sass.logError)) 
 
     .pipe(gulp.dest("css")) 
 
     .pipe(browserSync.stream()); 
 
}); 
 

 
/* Concatenate and minify CSS */ 
 
gulp.task("css:build", function() { 
 
\t gulp.watch("css/*.css").on("change", function() { 
 
\t \t return gulp.src("css/*.css") 
 
\t \t .pipe(concat("style.concat.css")) 
 
\t \t .pipe(csso({ 
 
\t \t \t comments: false 
 
\t \t })) 
 
\t \t .pipe(gulp.dest("css_result")); 
 
\t }); 
 
}); 
 

 
gulp.task("default", ["serve", "css:build"]);

私は、コマンドラインで "がぶ飲み" を実行した場合、今ではこのことを示しています enter image description here

なぜそれが起こるとどのような手順ができ私は今どうすればいいですか？

ありがとうございます！

UPD：問題が解決しました。 1つのSassファイル内に間違いがありました。修正後は、他の変更を加えずにすべてが動作し始めました。

Answer 1

問題が解決しました。 1つのSassファイル内に間違いがありました。修正後は、他の変更を加えずにすべてが動作し始めました。

Answer 2

私はこの単純化：あなたはすでにあなたの 'SASS' タスクの終了時にbrowserSync.stream（）を呼び出しているので、

gulp.watch("sass/*.scss", ["sass"]); 

に

を。また、これを試す代わりにbrowserSync.stream（）の呼び出し：

.pipe(browserSync.reload({stream: true})); 

私はあなたのhtmlファイルがbrowserSyncによって提供されていると仮定は、「SASS」タスクませ」によって作らCSSによって生成されるcssリンクを持っていますcss：build 'タスク。さもなければあなたの 'css：build'タスクが 'sass'タスクの後に実行されているので、おそらくレースの問題があります。cssがブラウザに再ロードされます。

これがうまくいくかどうか教えてください。