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

Question

在我的 gulfile.js 中，我使用 watch 将 scss 文件编译为 css 文件。它运行s 没有错误，当我在 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

您错过了 return。 gulp 不知道任务已经完成。在您的情况下，您必须 return 流。您的代码应该是这样的：

"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。

Answer 2

为了解决问题，正如@Gabriel 提到的并根据 this link，我将我的代码更改为此并解决了问题。但是当我运行 npm start 时，手表停止工作；因此，我通过 npm 安装了 "concurrently" 并在 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);

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

Gulp Watch is not working in gulp 4.0.2 until run gulp again

css

sass

gulp-sass

gulp-watch

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

Gulp Watch is not working in gulp 4.0.2 until run gulp again

css

sass

gulp-sass

gulp-watch

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