Gulp Browsersync在CSS注入之前重新加载页面

我正在使用

Gulp

、

Browsersync

、CSS的

Sass

和HTML的

Pug

实现一个构建。在编译样式和标记之后，我还将样式表

注入HTML

初始构建工作正常，但我在使用Gulp实现监视CSS和HTML文件中的更改时遇到了一个问题。现在发生的事情是更改任何源文件（标记或样式表），当Browsersync重新加载浏览器时，我会看到一个未设置样式的页面，它的

中没有插入样式表。看起来Browsersync重新加载是在

pug

（pug到HTML编译）完成之后触发的，但是在

sass

（sass到CSS编译）完成之前触发的，因此没有什么可注入的

主要问题：请告诉我如何强制正确的顺序吞咽

额外问题：如何在标记更改时进行全页重新加载，而不是在样式表更改时进行全页重新加载，而是只将CSS注入到

中，如“SASS+CSS注入”中所述

这是我的代码：

gulpfile.babel.js

gulp/browser-sync.js

gulp/styles.js

gulp/markup.js

gulp/inject.js

gulp/watch.js

以下是运行

gulp

并更改其中一个源Sass文件后控制台的输出：

[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.88.32:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.88.32:3001
 --------------------------------------
[BS] Serving files from: .tmp/
[12:00:30] Starting 'clean:styles'...
[12:00:30] Starting 'clean:markup'...
[12:00:30] Finished 'clean:markup' after 3.12 ms
[12:00:30] Starting 'pug'...
[12:00:30] Finished 'clean:styles' after 8.61 ms
[12:00:30] Starting 'sass'...
[BS] Reloading Browsers...
[BS] 1 file changed (index.html)
[12:00:30] Finished 'pug' after 72 ms
[BS] 1 file changed (main.css)
[12:00:30] Finished 'sass' after 144 ms
[12:00:30] Starting 'inject:styles'...
[12:00:30] gulp-inject 1 files into index.html.
[12:00:30] Finished 'inject:styles' after 9.67 ms
[12:00:30] Starting 'inject'...
[12:00:30] Finished 'inject' after 2.99 μs
[12:00:30] Starting 'styles'...
[12:00:30] Finished 'styles' after 2.47 μs

---

首先要做的是将

browserSync

添加到

inject:styles

任务中，否则在注入样式链接后它将不会重新加载

// Inject generated stylesheets into HTML files.
gulp.task("inject:styles", ["pug", "sass"], () => {
  let sources = gulp.src(paths.styles.tmpGlob, { read: false });

  return gulp.src(paths.markup.tmpGlob)
         .pipe(inject(sources, { relative: true }))
         .pipe(gulp.dest(paths.markup.tmp))
         .pipe(browserSync.stream());
});

---

对。昨天我自己甚至还加了一句。我想这回答了我的主要问题。关于你的额外问题，我认为browserSync应该在你将其传输到

browserSync.stream（）

时自动处理注入。它不应该重新加载整个页面吗？根据我的经验，

browserSync.stream（）

只有在您将它导入到

Sass

任务中的Sass文件时，才能很好地进行注入。因此，我最终在

sass

和

inject:style

任务中运行

browserSync.stream（）

，并使用

watch:style

运行I

inject:style

仅当添加或删除某些文件时运行，否则（当文件更改时）运行

sass

。

import gulp from "gulp";
import sass from "gulp-sass";
import sassModuleImporter from "sass-module-importer";
import sourcemaps from "gulp-sourcemaps";
import browserSync from "browser-sync";
import del from "del";

import paths from "./paths.js";


gulp.task("styles", ["clean:styles", "sass", "inject"]);


// Compiles Sass stylesheets to CSS.
gulp.task("sass", ["clean:styles"], () => {
  const SASS_OPTIONS = {
    includePaths: paths.styles.src,
    importer: sassModuleImporter()
  };

  return gulp.src(paths.styles.srcMainGlob, { base: paths.styles.src })
             .pipe(sourcemaps.init())
             .pipe(sass(SASS_OPTIONS))
             .pipe(sourcemaps.write(paths.styles.maps))
             .pipe(gulp.dest(paths.styles.tmp))
             .pipe(browserSync.stream({ match: "**/*.css" }));
});


gulp.task("clean:styles", () => {
  let pathsToDel = [paths.styles.tmp, paths.styles.dist];
  return del(pathsToDel);
});


gulp.task("watch:styles", ["styles"], () => {
  gulp.watch(paths.styles.srcAllGlob, ["styles"]);
});

import gulp from "gulp";
import pug from "gulp-pug";
import browserSync from "browser-sync";
import del from "del";

import paths from "./paths.js";


gulp.task("markup", ["clean:markup", "pug", "inject"]);


// Compile Pug templates to HTML
gulp.task("pug", ["clean:markup"], () => {
  return gulp.src(paths.markup.srcMainGlob)
             .pipe(pug())
             .pipe(gulp.dest(paths.markup.tmp))
             .pipe(browserSync.stream());
});


gulp.task("clean:markup", () => {
  let pathsToDel = [paths.markup.tmp, paths.markup.dist];
  return del(pathsToDel);
});


gulp.task("watch:markup", ["markup"], () => {
  gulp.watch(paths.markup.srcAllGlob, ["markup"]);
});

import gulp from "gulp";
import inject from "gulp-inject";

import paths from "./paths.js";


gulp.task("inject", ["inject:styles"]);


// Inject generated stylesheets into HTML files.
gulp.task("inject:styles", ["pug", "sass"], () => {
  let sources = gulp.src(paths.styles.tmpGlob, { read: false });

  return gulp.src(paths.markup.tmpGlob)
             .pipe(inject(sources, { relative: true }))
             .pipe(gulp.dest(paths.markup.tmp));
});

import gulp from "gulp";


// Watching for all the changes in source files.
gulp.task("watch", ["watch:markup", "watch:styles"]);

[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.88.32:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.88.32:3001
 --------------------------------------
[BS] Serving files from: .tmp/
[12:00:30] Starting 'clean:styles'...
[12:00:30] Starting 'clean:markup'...
[12:00:30] Finished 'clean:markup' after 3.12 ms
[12:00:30] Starting 'pug'...
[12:00:30] Finished 'clean:styles' after 8.61 ms
[12:00:30] Starting 'sass'...
[BS] Reloading Browsers...
[BS] 1 file changed (index.html)
[12:00:30] Finished 'pug' after 72 ms
[BS] 1 file changed (main.css)
[12:00:30] Finished 'sass' after 144 ms
[12:00:30] Starting 'inject:styles'...
[12:00:30] gulp-inject 1 files into index.html.
[12:00:30] Finished 'inject:styles' after 9.67 ms
[12:00:30] Starting 'inject'...
[12:00:30] Finished 'inject' after 2.99 μs
[12:00:30] Starting 'styles'...
[12:00:30] Finished 'styles' after 2.47 μs

// Inject generated stylesheets into HTML files.
gulp.task("inject:styles", ["pug", "sass"], () => {
  let sources = gulp.src(paths.styles.tmpGlob, { read: false });

  return gulp.src(paths.markup.tmpGlob)
         .pipe(inject(sources, { relative: true }))
         .pipe(gulp.dest(paths.markup.tmp))
         .pipe(browserSync.stream());
});