質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

0回答

846閲覧

gulp4(dart scss対応)にてbrowserSyncのリロードが終わらない

hayakawatakuma

総合スコア21

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2022/05/07 04:17

表題の通り、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);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問