时间戳

首页 > 解决方案 > Gulp Watch 不工作并且没有抛出错误

gulp - Gulp Watch 不工作并且没有抛出错误

问题描述

我正在使用我迁移到使用 gulp 4 并使用的 gulp 配置browserSync，但我无法让构建和观察工作。我能够browserSync启动并运行，但我在scss目录中所做的任何更改都没有更新，并且没有错误表明代码错误。我的配置有什么突出的吗？

我正在运行gulp watch以启动配置。

这是输出：

> gulp watch

[12:19:58] Using gulpfile ~/Desktop/Projects/node/theme-kit/gulpfile.js
[12:19:58] Starting 'watch'...
[12:19:58] Starting 'browserSync'...
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3012
    External: http://xx.xx.xx.xxx:3012
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Serving files from: ./

这是我的gulp.js：

var gulp = require("gulp"),
  sass = require("gulp-sass"),
  sourcemaps = require("gulp-sourcemaps"),
  cleanCss = require("gulp-clean-css"),
  rename = require("gulp-rename"),
  postcss = require("gulp-postcss"),
  autoprefixer = require("autoprefixer"),
  browserSync = require("browser-sync").create();

gulp.task("browserSync", function() {
  browserSync.init({
    port: 3012,
    server: {
      baseDir: "./",
      port: 3011
    }
  });
});

gulp.task("build-theme", function() {
  return gulp
    .src(["scss/*.scss"])
    .pipe(sourcemaps.init())
    .pipe(sass().on("error", sass.logError))
    .pipe(
      postcss([
        autoprefixer({
          browsers: [
            "Chrome >= 35",
            "Firefox >= 38",
            "Edge >= 12",
            "Explorer >= 10",
            "iOS >= 8",
            "Safari >= 8",
            "Android 2.3",
            "Android >= 4",
            "Opera >= 12"
          ]
        })
      ])
    )
    .pipe(sourcemaps.write())
    .pipe(gulp.dest("css/"))
    .pipe(cleanCss())
    .pipe(rename({ suffix: ".min" }))
    .pipe(gulp.dest("css/"))
    .pipe(
      browserSync.reload({
        stream: true
      })
    );
});

gulp.task("watch", gulp.series("browserSync", "build-theme", function() {
  gulp.watch(["scss/*.scss"], ["build-theme"]);
}));

gulp.task("default", gulp.series("watch", function() {}));

标签： gulp

解决方案

我有点惊讶这条线没有给你一个错误：

gulp.watch(["scss/*.scss"], ["build-theme"]);

改成：

gulp.watch("scss/*.scss", gulp.series("build-theme"));

以下是不必要的复杂，但在技术上可能不是错误：

gulp.task("default", gulp.series("watch", function() {}));

简化为：

gulp.task("default", gulp.series("watch"));

推荐阅读