初心者向けのgulpの導入④自動的に画面が読み込まれるブラウザシンク

初心者向けのgulpの導入④自動的に画面が読み込まれるブラウザシンク

みなさんこんにちは、WEB制作のエンジニアのjonioです。

今回はhtmlやscssを変更すると自動的に画面が再読み込みされて変更が適用された状態で表示されるブラウザシンクの解説です。

初めてgulpを導入する人はここまでできれば十分です。

それでは説明します。

 

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の書き方に変えます。

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

 

複数のファイルの変更を監視する

gulpfile.jsのコードを↓にします。

このコードを見て意味が理解できないのは13行目と17行目の「*」のはずです。

これは「glob文字」と言うのですが「何でもいい」という意味です。(「scss *」とかで検索してもヒットしません)

だから13行目の「./*.html」は任意のhtmlという意味です。

任意のフォルダの指定もすることができ「**」になります。

例えばですがフォルダとhtmlが何でもいい場合の書き方は↓になります。

scssに関しても同じことができますが今回はcssフォルダの下の任意のscssに指定しています。

12行目〜14行目がHTMLファイルの指定で16行目〜18行目がscssファイルの指定です。

scssファイルのパスの指定方法を変えた事で25行目・65行目・77行目の変更が発生します。

77行目は75行目の「css/style.scss」を変更しているだけです。

HTMLに関しては69行目から71行目に変更になります。

これで完成です。

次回はjueryや画像の圧縮と画像の拡張子をwebp(ウェッピー)に変換する解説です。