Question

我正在使用Gulp，Browsersync，Sass用于CSS和Pug用于HTML来实现构建。在编译样式和标记之后，我还将样式表<link>注入到HTML中。

初始构建工作正常，但我在使用Gulp实现监视CSS和HTML文件的更改时遇到问题。现在发生的事情是更改任何源文件（标记或样式表），当Browsersync重新加载浏览器时，我留下了一个没有样式的页面，其中没有注入样式表<head>。似乎Browsersync在pug（Pug到HTML编译）完成后重新加载，但在sass（Sass到CSS编译）完成之前，因此没有什么可以注入的。

主要问题：请告诉我如何在Gulp强制执行正确的订单。

额外的问题：如何在标记更改时以完整页面重新加载的方式执行此操作，但不对样式表更改执行完整页面重新加载，而只是将CSS注入{{1} }如“{3}}和this article中”SASS + CSS注入“中所述。

这是我的代码：

gulpfile.babel.js

<head>

吞/浏览器的sync.js

import gulp from "gulp";

// Gulpfile is split across multiple files located in .gulp/.
// Importing them executes them and registers appropriate tasks.
import "./gulp/browser-sync.js";
import "./gulp/inject.js";
import "./gulp/markup.js";
import "./gulp/styles.js";
import "./gulp/watch.js";


// Build all the source files.
gulp.task("build", ["markup", "styles"]);

// Default task ran when `gulp` executed with no arguments.
gulp.task("default", ["build", "browser-sync"]);

吞/ styles.js

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

import paths from "./paths.js";


// Running a local server, which posts live updates to connected browsers when
// any of the source files change.
gulp.task("browser-sync", ["build", "watch"], () => {
  browserSync.init({
    server: {
      baseDir: paths.global.tmp
    }
  });
});

吞/ markup.js

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

吞/ inject.js

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

吞/ watch.js

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"]);并对其中一个源Sass文件进行更改后控制台的输出：

gulp

Answer 1

要做的第一件事是将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在CSS注入之前重新加载页面

1 个答案: