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

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

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

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

受付中

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

hayakawatakuma
hayakawatakuma

総合スコア21

gulp

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

0回答

0評価

0クリップ

386閲覧

投稿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

const gulp = require('gulp');//gulp本体 const sass = require('gulp-dart-sass');//Dart Sass はSass公式が推奨 @use構文などが使える const plumber = require("gulp-plumber"); // エラーが発生しても強制終了させない const notify = require("gulp-notify"); // エラー発生時のアラート出力 const browserSync = require("browser-sync"); //ブラウザリロード const autoprefixer = require('gulp-autoprefixer');//ベンダープレフィックス自動付与 const postcss = require("gulp-postcss");//css-mqpackerを使うために必要 const mqpacker = require('css-mqpacker');//メディアクエリをまとめる const srcPath = { 'scss':'./assets/scss/**/*.scss', 'html': './**/*.html' }; const distPath = { 'css': './assets/css/', 'html': './' }; //scss const cssSass = () => { return gulp.src(srcPath.scss, { sourcemaps: true }) .pipe( //エラーが出ても処理を止めない plumber({ errorHandler: notify.onError('Error:<%= error.message %>') })) .pipe(sass({ outputStyle: 'expanded' })) //指定できるキー expanded compressed .pipe(autoprefixer(TARGET_BROWSERS))// ベンダープレフィックス自動付与 .pipe(postcss([mqpacker()])) // メディアクエリをまとめる .pipe(gulp.dest(distPath.css, { sourcemaps: './' })) //コンパイル先 .pipe(browserSync.stream()) .pipe(notify({ message: 'Sassをコンパイルしました!', onLast: true })) } /** * html */ const html = () => { return gulp.src(srcPath.html) .pipe(gulp.dest(distPath.html)) } /** * ローカルサーバー立ち上げ */ const browserSyncFunc = () => { browserSync.init(browserSyncOption); } const browserSyncOption = { server: './' } /** * リロード */ const browserSyncReload = (done) => { browserSync.reload(); done(); } //ベンダープレフィックスを付与する const TARGET_BROWSERS = [ 'last 2 versions',//各ブラウザの2世代前までのバージョンを担保 'ie >= 11'//IE11を担保 ]; /** * * ファイル監視 ファイルの変更を検知したら、browserSyncReloadでreloadメソッドを呼び出す * series 順番に実行 * watch('監視するファイル',処理) */ const watchFiles = () => { gulp.watch(srcPath.scss, gulp.series(cssSass)) gulp.watch(srcPath.html, gulp.series(html, browserSyncReload)) } /** * seriesは「順番」に実行 * parallelは並列で実行 */ exports.default = gulp.series( gulp.parallel(html, cssSass), gulp.parallel(watchFiles, browserSyncFunc) );

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

gulp

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