Gulpを使用してSCSSをCSSにコンパイルする(いくつかのSCSSファイルからCSSファイルを1つ作成する) CSSを使用して、ブラウザの同期を使用してファイルの変更を確認し、ページを再読み込みします。解決済み:Gulpが突然変更を監視しなくなり、scssを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ファイル内に間違いがありました。修正後は、他の変更を加えずにすべてが動作し始めました。
あなたの答えMark、ありがとう!私はあなたが言ったすべてをやったが、それはまだ動作しません。 私のhtmlファイルは、css:build(cssを連結して縮小したもの)によって生成されるCSSリンクを使用します。 "gulp"コマンドを実行した後、今すぐscssに1つのコメントを追加しましたが、このコメントはCSSファイル(オリジナルのCSSファイルでも縮小版でもない)には表示されません。 ミスティック! –
Sassはおそらくコメントを削除します。私が言及したように、 'sass'タスクの結果 - フォルダ 'css'を指すようにあなたのHTML CSSリンクを変更してください。それはあなたがcssをリロードしている場所です - 'sass'タスクの最後に。だから、browserSyncは 'css:build'タスクの後ではなく、再ロードしようとしています。それ以外の場合は、.pipe(browserSync.reload({stream:true}))を移動してみてください。 'css:build'タスクの最後を呼び出し、 'sass'タスクからそれを削除します。 – Mark
最後のコメント(htmlでCSSリンクを変更し、.pipe(browserSync.reload({stream:true})))に記述した最初と2番目のメソッドを使用しました。それは助けになりませんでした。 私はcss、html、gulpファイルに問題はないと思う。私は問題がnpmのパッケージか何かにあると思う...コマンドラインはローカルサーバーの宛先を表示せず、以前のようにファイルを監視しないので。 Windows、node、npm、packagesを再インストールしましたが、どちらも役に立ちませんでした。 –