browser-syncのインストール

ターミナルで↓のコマンドを入力します。

そしてgulpfile.jsの設定です。

今回は複雑に感じると思います。

サイトのコーディングをする時に1つのページだけを作るのではなく複数ページを作るのが普通ですがまずは1つのページのHTMLかscss（css）を変更した時に画面が更新されるようにします。

まずはコピペで使いたい人用です。

gulpfile.js （コピペ用）

gulpfile.jsを↓にします。

次は内容を理解したい人用です。

gulpfile.js （理解したい人用）

まずはbrowser-syncを導入するためにコードを↓にします。

次は自動更新する時のブラウザの設定です。

コードを↓にします。

29行目〜39行目がブラウザを開く時の設定です。

31行目はgulpで自動更新するページをどこに表示するかですが「external」だと「http://localhost:3000/」になります。

32行目はgulpを起動した時に最初に表示するページの設定です、デフォルト設定で「./」は「index.html」になります。

33行目は「false」にすると自動更新をする時に画面に「更新しました」みたいな表示がされなくなります。

35行目は画面が更新されてからすぐに更新しても1秒後の更新になるという意味で1000で1秒で10000で10秒と言った感じです。

あまりに早いタイミングで自動更新するのを何度も繰り返すとパソコンに負荷がかかるために自動更新の間隔を開ける設定をします。

41行目〜44行目は自動更新をするための設定でこれはこんなもんと思っていいです。

次はHTMLかscss（css）を更新した時の画面の自動読み込みの設定です。

コードを↓にします。

48行目・49行目で画面が立ち上がるのとHTMLかscss（css）を変更した時に画面が再表示されるようになります。

58行目がどこのHTMLが変更された時に画面が再読み込みになるかで59行目が どこのscssが変更された時に画面が再読み込みになるかです。

58行目の「index.html」と59行目の「css/style.scss」は変更を監視するファイル名です。

「{ delay: 1500 }」は1.5秒後という意味で「2000」になったら2秒後・「300」になったら0.3秒後といった感じです。

66行目で「browserOpen」を追加することでgulpをindex.htmlかstyle.scssを変更した時に画面の再読み込みが始まります。

これでindex.htmlかstyle.scssを変更した時に画面を再表示する設定は完了しましたが実際のコーディングでは1つのファイルやstyle.scssだけ変更するのはなく色んなファイルの変更があります。

そんな時にも対応できるgulpfile.jsの書き方に変えます。

一部についてネットを見る限り解説している人が多分いないので知らないと理解できないですが私が説明するから大丈夫です。