Question

我正在使用gulp配置进行迁移，以迁移到gulp 4并使用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() {}));

Answer 1

这行没有给你一个错误，我感到有些惊讶：

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

Gulp手表无法正常工作且未引发任何错误

1 个答案: