BrowsersyncはCSSインジェクションの前にページをリロードする

CSS用にGulp,Browsersync,Sass、HTML用にPugを使用してビルドを実装しています。また、スタイルとマークアップをコンパイルした後に、スタイルシート<link>をHTMLに挿入しています。BrowsersyncはCSSインジェクションの前にページをリロードする

初期ビルドは正常ですが、Gulpを使用してCSSやHTMLファイルの変更を監視するのに問題があります。ブラウザー同期がブラウザーをリロードすると、スタイルシートが挿入されていないスタイルのないページが残ります（<head>）。 pug（PugからHTMLへのコンパイル）の後にBrowsersyncのリロードが実行されたようですが、sass（SassからCSSへのコンパイル）の前に終了するので、何も挿入する必要はありません。

メイン質問：Gulpで正しい順序を強制する方法を教えてください。

エクストラ質問：マークアップの変更、フルページのリロードを行うような方法でそれを行うが、スタイルシートの変更にフルページのリロードをしない、this articleと下Gulp docsで説明したようにだけではなく<head>にCSSを注入する方法"SASS + CSS注入"

これは私のコードです：

gulpfile.babel.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"]);

一気/ブラウザsync.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 
    } 
    }); 
});

一気/ styles.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"]); 
});

グッ/ markup.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"]); 
});

グッ/ inject.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)); 
});

グッ/ watch.js

import gulp from "gulp"; 


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

そして、ここでは、gulpを実行し、ソースサスのファイルの1つに変更を加えた後、コンソールの出力です：

[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

出典

2017-04-04 Robert Kusznier

最初に行うべきこと、それ以外の場合はリロードしないだろう、あなたのinject:stylesタスクにbrowserSyncを追加することですスタイルリンクが注入された後

// 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()); 
});

出典

2017-04-05 08:32:42 lofihelsinki

真。私は昨日それを追加してしまった。私は私の主な質問に答えると思う。 –

余計な質問については、 'browserSync.stream（）'にパイプすると、browserSyncが自動的に注入を処理するはずです。ページ全体をリロードしないでください。 – lofihelsinki

私の経験から 'browserSync。あなたが 'sass'タスクの中でSassファイルをパイプする時だけ、stream（）'は注入でうまく動作します。それで、 'sass'と' inject：styles'タスクの両方で 'browserSync.stream（）'を 'watch：styles'で実行して、ファイルが追加または削除されたときのみi'inject：styles'を実行し、' sass'それ以外の場合（ファイルが変更された場合） –

BrowsersyncはCSSインジェクションの前にページをリロードする

答えて

関連する問題