Question

我一直在研究一个项目，使用Gulp将SCSS编译为CSS（从几个SCSS文件制作一个CSS文件），缩小CSS，同时观察文件更改并使用Browser Sync重新加载页面。

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

我尝试使用＆＃34; gulp＆＃34;重新加载页面命令并没有帮助。

现在我有几个问题。咕嘟咕嘟： - 停止观察变化; - 将scss编译为css; - 打开和重新加载页面。

在这个问题出现之前，所有这些都完美无缺。

这是我的Gulp代码：

＆＃13;

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"]);

＆＃13;

如果我跑了＆＃34; gulp＆＃34;现在在命令行中显示： 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文件具有由＆＃39; sass＆＃39;生成的css链接。任务不由css：build＆＃39;生成的css任务。否则你会遇到其他问题，可能是因为你的css：build＆＃39;任务在＆＃39; sass＆＃39;之后运行任务生成的css被重新加载到浏览器中。

请告诉我这是否适合您。

Answer 2

问题解决了。一个sass文件中有一个错误。经过修正后，一切都开始工作，没有任何其他变化。

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

解决

2 个答案: