1

我有一个使用 Valet + 的本地服务器设置。我有一个 gulpfile.js 的 gulp v.4 设置（见下文），我正在尝试执行一个 watch 函数，它创建一个 css 注入作为默认任务。当 watch 任务触发 scss 文件的更改时，sass 编译任务起作用，但浏览器不会注入 css，除非我手动重新加载浏览器。我不确定这是 valet+、我的 gulpfile 设置还是浏览器的问题。请帮忙。

我已经为 gulp v.4 尝试了几种不同的 gulpfile 格式。我试过不同的浏览器。我已经在监视任务中全局和本地尝试了 browsersync init 函数，但没有任何效果。

"use strict";

// ------------------------------------------------- load plugins
const gulp         = require('gulp'),
      // svgSprite     = require('gulp-svg-sprite'),
      // imagemin      = require('gulp-imagemin'),
      rename       = require('gulp-rename'),
      uglify       = require('gulp-uglify'),
      autoprefixer = require('autoprefixer'),
      browserSync  = require('browser-sync').create(),
      sourcemaps   = require('gulp-sourcemaps'),
      cssnano      = require('cssnano'),
      del          = require('del'),
      plumber      = require('gulp-plumber'),
      postcss      = require('gulp-postcss'),
      sass         = require('gulp-sass');

// ------------------------------------------------- vars for site and browserSync
const siteName = 'gatesinsurance-wp',
      userName = 'evanmarshall';

// ------------------------------------------------- configs
const paths = {
  svg: {
    src: './src/images/icons/',
    dest: './build/assets/images/sprites/',
    glob: '**/*.svg',
    config: {
      "log": "debug",
      "shape": {
        "dimensions": {
          "maxWidth": 200,
          "maxHeight": 200
        },
      },
      "mode": {
        "css": {
          render: {
            scss: {
              dest: "/src/styles/modules/_sprite.scss",
              template: "./gulpfile.js/templates/sprite.scss"
            }
          }
        },
      },
      "variables": {}
    }
  },
  styles: {
    src: './src/styles/**/*.scss',
    dest: './build/themes/gatesinsurance/assets/styles',
    opts: {

    }
  },
  images: {
    src: './src/images/**/*',
    dest: './build/themes/gatesinsurance/assets/images',
    opts: {

    }
  },
  scripts: {
    src: './src/scripts/**/*.js',
    dest: './build/themes/gatesinsurance/assets/scripts',
    opts: {

    }
  },
  assets: './build/themes/gatesinsurance/assets',
  php: './build/themes/gatesinsurance/**/*.php'
};

// ------------------------------------------------- clean fxn
function clean() {
  return del(paths.assets)
}

// ------------------------------------------------- scripts fxn
function scripts() {
  // body omitted
}

// ------------------------------------------------- styles fxn
function styles() {
  return gulp
    .src(paths.styles.src)
    .pipe(sourcemaps.init())
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .on("error", sass.logError)
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(postcss([
      autoprefixer(), cssnano()
    ]))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.styles.dest))
    // .pipe(browserSync.stream());
}

// ------------------------------------------------- browserSync reload fxn
function reload(done) {
  browserSync.reload();
  done();
}

// ------------------------------------------------- browserSync fxn
function serve(done) {
  browserSync.init({
    proxy: 'http://' + siteName + '.test',
    host: siteName + '.test',
    open: 'external',
    port: 8000,
    http: {
      key:
          '/Users/' +
          userName +
          '/.valet/Certificates/' +
          siteName +
          '.test.key',
      cert:
          '/Users/' +
          userName +
          '/.valet/Certificates/' +
          siteName +
          '.test.crt'
    }
  });
  done();
}

// ------------------------------------------------- watch fxn
function watchFiles() {
  gulp.watch(paths.styles.src, {events: 'change'}, styles);
  gulp.watch(paths.php, {events: 'change'}, reload);
  // gulp.watch(paths.scripts.src, {events: 'change'}, gulp.series(scripts, reload));
}

// ------------------------------------------------- define complex fxn
const build = gulp.series(clean, styles),
      watch = gulp.parallel(watchFiles, serve);

// ------------------------------------------------- export fxn
exports.styles  = styles;
exports.scripts = scripts;
exports.clean   = clean;
exports.build   = build;
exports.watch   = watch;
exports.default = build;

当我对 scss 文件进行更改时，我希望 css 能够注入并且不需要手动重新加载浏览器。实际结果是 scss 文件正确编译成 css，但不是通过我的 watch 和 browsersync 任务注入的。

4

0 回答 0