css - Gulp Watch 在 gulp 4.0.2 中无法工作，直到再次运行 gulp

Question

在我的 gulfile.js 中，我使用 watch 将 scss 文件编译为 css 文件。它运行没有错误，当我在 powershell 中运行 gulp 时，它说它正在监视，但是每当我在 scss 文件中定义样式时，它不会影响创建的 css 文件，我必须停止 gulp 并运行它再次。其实是没仔细看! 这是我的代码。 谢谢你的帮助。

"use strict";

var gulp = require("gulp");
var sass = require("gulp-sass");
var minifyCSS = require("gulp-clean-css");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var changed = require("gulp-changed");
var { task, series } = require("gulp");

var SCSS_SRC = "./src/Assets/scss/**/*.scss";
var SCSS_DEST = "./src/Assets/css";


task("compile_scss", function() {


	gulp
		.src(SCSS_SRC) 
		.pipe(sass().on("error", sass.logError)) 
		.pipe(minifyCSS())
		.pipe(rename({ suffix: ".min" }))
		.pipe(changed(SCSS_DEST)) 
		.pipe(gulp.dest(SCSS_DEST)); 
});


task("watch_scss", function() {
	gulp.watch(SCSS_SRC, series(["compile_scss"]));
});

task("default", series("watch_scss"));

Answer 1

您错过了返程。 gulp并不知道任务已经完成。在你的情况下，你必须返回流。您的代码应如下所示:

"use strict";

var gulp = require("gulp");
var sass = require("gulp-sass");
var minifyCSS = require("gulp-clean-css");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var changed = require("gulp-changed");
var { task, series } = require("gulp");

var SCSS_SRC = "./src/Assets/scss/**/*.scss";
var SCSS_DEST = "./src/Assets/css";

function compile_scss() {
    return gulp
        .src(SCSS_SRC) 
        .pipe(sass().on("error", sass.logError)) 
        .pipe(minifyCSS())
        .pipe(rename({ suffix: ".min" }))
        .pipe(changed(SCSS_DEST)) 
        .pipe(gulp.dest(SCSS_DEST)); 
}


function watch_scss() {
    gulp.watch(SCSS_SRC, series(compile_scss));
}

exports.default = series(watch_scss);

我还冒昧地删除了“task()”，因为

Reminder: This API isn't the recommended pattern anymore - export your tasks.

如前所述here .