在再次运行 gulp 之前，Gulp Watch 无法在 gulp 4.0.2 中工作答案

【问题标题】：Gulp Watch is not working in gulp 4.0.2 until run gulp again在再次运行 gulp 之前，Gulp Watch 无法在 gulp 4.0.2 中工作
【发布时间】：2020-02-12 12:52:18
【问题描述】：

在我的 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"));

【问题讨论】：

您的监视任务正在使用 compile_scss，这对我来说很奇怪，它会进行缩小。不确定这是否会导致任何问题，但我会为 watch 创建一个新任务，它只使用最少的设置，例如 gulp .src(SCSS_SRC).pipe(sass().on("error", sass.logError)).pipe(gulp.dest(SCSS_DEST));
我希望我的 compile_scss 被观看。 @Gabriel Lima 解决方案解决了这个问题。 tnx

标签： css sass gulp-watch gulp-sass

【解决方案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()”，因为

提醒：此 API 不再是推荐模式 - 导出您的任务。

如here所说。

【讨论】：

另外，那些“series()”也不需要，因为它只是一项任务。
你拯救了我的一天，加布里埃尔，很好的解决方案。我不知道那个提醒。也谢谢你的链接。

【解决方案2】：

为了解决问题，正如@Gabriel 提到的并根据this link，我将代码更改为此问题并解决了问题。但是当我运行 npm start 时，手表停止工作；因此，我通过 npm “并发”安装并更改了我在 package.json 中的开始，如下所述：

npm install concurrently

"start": "concurrently \"react-scripts start \" \"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);

【讨论】：