Gulp 突然停止观察变化，将 scss 编译为 css 并打开并重新加载页面

Question

我一直在做一个项目，使用 Gulp 将 SCSS 编译成 CSS（从多个 S[= 制作一个 CSS 文件43=] 个文件），缩小 CSS，同时观察文件更改并使用浏览器同步重新加载页面。

在更改一些 scss 和 html 代码并且未对 gulpfile 执行任何操作且未重命名任何文件时，浏览器中的页面突然失败并表示找不到页面。

我尝试使用 "gulp" 命令重新加载页面，但没有帮助。

现在我有几个问题。 Gulp: - 停止观察变化； - 将 scss 编译为 css； - 打开并重新加载页面。

在出现这个问题之前，所有这些都运行良好。

这是我的 Gulp 代码：

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() {
 gulp.watch("css/*.css").on("change", function() {
  return gulp.src("css/*.css")
  .pipe(concat("style.concat.css"))
  .pipe(csso({
   comments: false
  }))
  .pipe(gulp.dest("css_result"));
 });
});

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

如果我现在在命令行中运行 "gulp" 它会显示： enter image description here

为什么会发生，我现在应该采取什么步骤？

已解决

问题已解决。一个 sass 文件中有一个错误。更正后一切都开始工作，没有任何其他更改。

Answer 1

我会简化这个：

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

至

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

因为您已经在 'sass' 任务结束时调用了 browserSync.stream()。另外，试试这个而不是 browserSync.stream() 调用：

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

我假设您的 html 文件由 browserSync 提供 css 链接由 'sass' 任务生成 NOT css 由 'css:build' 任务生成。否则你会遇到其他问题，可能是竞争问题，因为你的 'css:build' 任务是运行在 'sass' 产生的任务 css 重新加载到浏览器后。

让我知道这是否适合你。

Answer 2

问题已解决。一个 sass 文件中有一个错误。更正后一切都开始工作，没有任何其他更改。

Gulp 突然停止观察变化，将 scss 编译为 css 并打开并重新加载页面

Gulp suddenly stopped watching changes, compiling scss to css and opening and reloading page

gulp

gulp-sass

gulp-watch

gulp-concat

browser-sync

已解决