gulp 4 で browser-sync が、1度しかリロードしない。

Question

前提・実現したいこと

絶対つまずかないGulp 4入門(2019年版) – インストールとSassを使うまでの手順

こちらの記事を元に gulp 4 を試してみました。

その後自分で browser-sync を試してみたところ、きちんと server が起動しブラウザが立ち上がりました。一度は、sass を更新するとリロードするのですが、２度目以降は、ブラウザが更新されません。２度目以降もリロードされるようにしたいです。

回答に足りない事項があれば、ご指摘いただけれると助かります。

筆者のレベル

html, sass, javascript: 1ヶ月程

発生している問題・エラーメッセージ

[02:12:04] Starting 'default'...
[02:12:04] Starting 'sass'...
[02:12:04] Starting 'sync'...
[02:12:04] Starting 'reload'...
[02:12:04] Starting 'watch'...
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: ****
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Serving files from: ../html/
[02:12:05] Finished 'sass' after 347 ms
[02:12:29] Starting 'sass'...
[02:12:29] Starting 'reload'...
[02:12:29] Finished 'sass' after 52 ms
[Browsersync] Reloading Browsers...
[02:12:32] Starting 'sass'...
[02:12:32] Finished 'sass' after 83 ms
[02:12:36] Starting 'sass'...
[02:12:36] Finished 'sass' after 77 ms
[02:12:39] Starting 'sass'...
[02:12:39] Finished 'sass' after 75 ms
[02:12:40] Starting 'sass'...
[02:12:40] Finished 'sass' after 73 ms

該当のソースコード

// gulp 4 で記述
// 実行後の処理については、最下部に記載


// gulpプラグインの読み込み
var gulp = require('gulp');

// Sassをコンパイルするプラグインの読み込み
var sass = require('gulp-sass');

// browser-syncのプラグインの読み込み
var browserSync = require("browser-sync");


// ローカルサーバーの立ち上げ
gulp.task("sync", function () {

    // browsre-sync のサーバー立ち上げ処理
    browserSync({
        server: {
            baseDir: "../html/", // ルートとなるディレクトリを指定
            notify: true, // 画面右上の通知の設定
        }
    });

});


// リロード処理
gulp.task("watch", function () {

  gulp.watch('../html/flocss/**/*.scss', gulp.task('sass'))
  gulp.watch('../html/flocss/**/*.scss', gulp.task('reload'))

});


// watch 処理
gulp.task("reload", function () {

  browserSync.reload();   // ファイルに変更があれば同期しているブラウザをリロード

});


// scss の監視タスクを作成する
gulp.task('sass', function () {

  // ('')内で取得する scss ファイルを指定
  return gulp.src('../html/flocss/**/*.scss')

    // sassのコンパイルを実行
    .pipe(sass({

      outputStyle: 'compressed', // expanded（{}の頭が揃う）、nested（ネストがインデントされる）、compact（規則集合毎が1行になる）、compressed（全CSSコードが1行になる）

    })

    // Sassのコンパイルエラーを表示
    // (これがないと自動的に止まってしまう)
    .on('error', sass.logError))

    // ('')内でコンパイル後の保存場所を指定
    .pipe(gulp.dest('../html/assets/css/'))
    .pipe(gulp.dest('../../public/assets/css/'))

});


gulp.task('default',
  gulp.parallel('sass', 'sync', 'reload', 'watch')
);

試したこと

日本のブログは20ページくらい、youtube（英語、ロシア語）などを閲覧して、当たりどころを付けてやっていましたが、なかなか回答に至りませんでした。

補足情報（FW/ツールのバージョンなど）

package.json の内容を記述します。

  "name": "****",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "****"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.1"
  }

Comments

[s8_chu]

ディレクトリ構造がどのようになっているのかを、質問文に追記していただけませんか？

Answer 1

私も同じ場所ではまりました。今はこのようにしています。

// ローカルサーバーの立ち上げ
const browserSyncOption = {
  port: 8080,
  server: {
    baseDir: './dist/',
    index: 'index.html'
  },
  reloadOnRestart: true
};

function sync(done) {
  browserSync.init(browserSyncOption);
  done();
}
// watch&リロード 処理
function watchFiles(done) {
  const browserReload = () => {
    browserSync.reload();
    done();
  };
  gulp.watch(paths.styles.src).on('change', gulp.series(styles, browserReload));
  gulp.watch(paths.scripts.src).on('change', gulp.series(scripts, esLint, browserReload));
  gulp.watch(paths.html.src).on('change', gulp.series(html, browserReload));
}

gulp.task('default', gulp.series(gulp.parallel(scripts, styles, html), gulp.series(sync, watchFiles)));
);

Comments

[gaun518]

こちらのコードを参考にやってみたところ、無事に解決しました！ありがとうございました。

Answer 2

//変更前
gulp.task("reload", function () {
  browserSync.reload();
});

//変更後
gulp.task("reload", function (done) {
  browserSync.reload();
  done();
});

これで動作しませんかね？