表題の通り、gulp4(dart scss対応)にてHTMLデータを保存すると、browserSyncのリロードが終わりません。SCSSの更新は問題ありませんでした。
恐れ入りますがご教示お願いします。
現象(ターミナル)
[Browsersync] 2 files changed (style.css, style.css.map) [13:03:41] gulp-notify: [Gulp notification] Sassをコンパイルしました! [13:03:41] Finished 'cssSass' after 128 ms [13:03:44] Starting 'html'... [13:03:45] Finished 'html' after 683 ms [13:03:45] Starting 'browserSyncReload'... [13:03:45] Finished 'browserSyncReload' after 1.86 ms [13:03:45] Starting 'html'... [13:03:45] Finished 'html' after 396 ms [13:03:45] Starting 'browserSyncReload'... [13:03:45] Finished 'browserSyncReload' after 183 μs [13:03:46] Starting 'html'... [Browsersync] Reloading Browsers... [13:03:46] Finished 'html' after 537 ms [13:03:46] Starting 'browserSyncReload'... [13:03:46] Finished 'browserSyncReload' after 152 μs [13:03:46] Starting 'html'... ・ ・ ・ ・ ずっと続く
以下gulpfire.jsです。
javascript
1const gulp = require('gulp');//gulp本体 2 3const sass = require('gulp-dart-sass');//Dart Sass はSass公式が推奨 @use構文などが使える 4const plumber = require("gulp-plumber"); // エラーが発生しても強制終了させない 5const notify = require("gulp-notify"); // エラー発生時のアラート出力 6const browserSync = require("browser-sync"); //ブラウザリロード 7const autoprefixer = require('gulp-autoprefixer');//ベンダープレフィックス自動付与 8const postcss = require("gulp-postcss");//css-mqpackerを使うために必要 9const mqpacker = require('css-mqpacker');//メディアクエリをまとめる 10 11 12const srcPath = { 13 'scss':'./assets/scss/**/*.scss', 14 'html': './**/*.html' 15}; 16 17const distPath = { 18 'css': './assets/css/', 19 'html': './' 20}; 21 22//scss 23const cssSass = () => { 24 return gulp.src(srcPath.scss, { 25 sourcemaps: true 26 }) 27 .pipe( 28 //エラーが出ても処理を止めない 29 plumber({ 30 errorHandler: notify.onError('Error:<%= error.message %>') 31 })) 32 .pipe(sass({ outputStyle: 'expanded' })) //指定できるキー expanded compressed 33 .pipe(autoprefixer(TARGET_BROWSERS))// ベンダープレフィックス自動付与 34 .pipe(postcss([mqpacker()])) // メディアクエリをまとめる 35 .pipe(gulp.dest(distPath.css, { sourcemaps: './' })) //コンパイル先 36 .pipe(browserSync.stream()) 37 .pipe(notify({ 38 message: 'Sassをコンパイルしました!', 39 onLast: true 40 })) 41} 42 43 44/** 45 * html 46 */ 47 const html = () => { 48 return gulp.src(srcPath.html) 49 .pipe(gulp.dest(distPath.html)) 50} 51 52/** 53 * ローカルサーバー立ち上げ 54 */ 55const browserSyncFunc = () => { 56 browserSync.init(browserSyncOption); 57} 58 59const browserSyncOption = { 60 server: './' 61} 62 63/** 64 * リロード 65 */ 66const browserSyncReload = (done) => { 67 browserSync.reload(); 68 done(); 69} 70 71 72 73//ベンダープレフィックスを付与する 74const TARGET_BROWSERS = [ 75 'last 2 versions',//各ブラウザの2世代前までのバージョンを担保 76 'ie >= 11'//IE11を担保 77]; 78 79/** 80 * 81 * ファイル監視 ファイルの変更を検知したら、browserSyncReloadでreloadメソッドを呼び出す 82 * series 順番に実行 83 * watch('監視するファイル',処理) 84 */ 85const watchFiles = () => { 86 gulp.watch(srcPath.scss, gulp.series(cssSass)) 87 gulp.watch(srcPath.html, gulp.series(html, browserSyncReload)) 88} 89 90/** 91 * seriesは「順番」に実行 92 * parallelは並列で実行 93 */ 94exports.default = gulp.series( 95 gulp.parallel(html, cssSass), 96 gulp.parallel(watchFiles, browserSyncFunc) 97);
あなたの回答
tips
プレビュー