Gulp.jsを使ってWeb開発を効率化しよう

修正したHTMLドキュメントをブラウザに再読み込みさせる

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プラグインによりHTMLドキュメントが修正されたら、ローカルサーバーで自動的にブラウザの再読み込みを行います。
講師:
08:28

字幕

このレッスンでは、プラグインbrowser-sync を使ってhtmlドキュメントが修正されたらローカルサーバーで自動的にブラウザーの再読み込みを行ってみます。先ず、dreamweaver のサンプルページを今開いているんですけれどもこれは、こんな感じのページです。ブラウザで確認しましょうか。「ファイル」>「 ブラウザーでプレビュー 」ということで見て見ます。この程度の簡単な練習用のページということになっています。gulpfile.js には先ず大枠だけ入力してあります。require で gulp をgulpという変数を読み込んでタスクの登録ですね。タスクは今回 browser-syncという風に名前を決めました。そして、ファンクションですが中身は書いてありません。ここに、ブラウザーを自動的に読み込むための処理を加えるわけなんですけれども先ずはプラグインの読み込みですね。var browser-SyncSync の S は大文字にしておきましょう。require でプラグインですね。gulpはつけません。browser-Sync です。そしてgulp専用のプラグインではないのでちょっと、書き方が普通とは違うという感じがあるんですがここで、 .create と入れます。 create というメソッドをこの require のオブジェクトに対して実行してそれを変数に入れるという形になります。そして、 function の中ですねbrowser-Sync変数に入っていますのでこのオブジェクトに対して初期化 init です。init というメソッドを実行します。「不明」ますね、 initinitialize の省略形です。そして、このなかにはいくつか設定があるので改行しておきます。そして、ここはオブジェクトが入りますので波括弧ですね波括弧も入れて起きます。この中に、プロパティとしてサーバーを設定します。server というプロパティ名ですね。そして、この中にまた設定は波括弧、中括弧ですね。ここに、 baseDirこれはローカルのディレクトリをどこに置くかということですよね。今回この index.html ですねこれはプロジェクトのフォルダの一番ルートに置いています。ですから、bassディレクトリは./ ということで指定をします。ここまででいったん確認して見ましょう。ファイルを保存します。タスクはbrowser-Sync としました。コマンドラインツールのターミナルでgulpのタスクを実行します。 browser-sync ですね。実行しますと、すぐにローカルでlocalhostこれは3000となってますね。ですから、ローカルサーバーが作り上げれれてそこで index.html が開いたという形になっています。そしてこれを閉じますけれどもターミナルのほうですね先頭にプロンプトがあります。つまり今監視状態になっています。それで、 sync させると同期させるということなんですがまだ同期の設定を書いていませんのでいったんこれは ctrl+C で中断しておきます。ここは clear しましょうか。ここまでで browser-Sync はいつでも更新できる状態にはなっているですけれども何時更新したらいいかは教えてあげないといけません。ここでは、ですから gulp のwatch を使います。gulp.watch何を見ていいかですねここでは今回は html ファイルしかもルートをですねですから *.html ということでこれがもし変更されたらということで指定をします。普通 watch では、第二引数にこのディレクトリが変更されたら何をするかという指定をするんですがここでもちょっと browser-Sync は変わっています。 第一引数だけでそのあとに .on とします。これは、何が起こったなにはないをするというメソッドなんですけれどもなにが起こったらというのはイベントという風に言われますけれどもいくつか指定があるわけなんですが今回は change ですね。change というイベントが発生したらつまり watch していてこのディレクトリに変更が行われたらという意味になります。そしてここでファンクションです。やりたいことを書くわけですね。このなかでやりたいことというのはbrowser-Sync の中のreloadというメソッドを実行します。これでも構わないですがやりたいことはこの一行だけです。そして change の後に第二引数はfunction を指定するんですがbrowser-Sync.reloadこれはファンクションです。なので、ここをわざわざ書かなくてもbrowser-Syncそして、ここはfunction の呼び出しではなくで指定ですので()は無しに、括弧を閉じてしまいます。これで、 watch をしていてこのディレクトリに変更が起こったらreload しましょうねという意味になります。ここで保存しておきましょう。 後、)}の閉じが呼ぶになってますね。これを消してもう一度保存します。ターミナルからの使用にかえて先ほどとのタスクの実行ですねこれをもう一度実行し直します。ローカルでindex.html が開きました。では変更をしましょう。分かれやすくこのタイトルの色ですねこれは、 class で設定してあるのでここですね、caption-mainこのコードでこれはhtmlドキュメントの中にスタイルが設定してあるですがブルーとなっていますからグリンーにしましょう。そして更新にして保存します。ブラウザーに切り替えると自動的に reload が済んでいてタイトルがグリンーに変更されています。このレッスンでは、プラグインbrowser-sync でhtmlドキュメントが修正されたらローカルサーバーで自動的にブラウザーの再読み込みを行うという方法についてご説明しました。ちょっと通常のgulpのプラグインとは違っていてrequire の後にcreate というメソッドを呼び出してそれを変数に入れます。そして、先ずブラウザーの初期化の設定ですねinit というところでsever がどこにあるのかというパスをbassディレクトリbassDir に設定します。 そして、これでいつでも監視できる状態になったですけれどもどこを監視するのかということについてはwatch のメソッドで監視するディレクトリを指定して第二引数は使わずに .on でchange というイベントを指定しそして実行したいファンクション今回は reload というメソッドをその場使ってしまいましたけれどもそれを指定すればいいということでした。

Gulp.jsを使ってWeb開発を効率化しよう

GulpはWeb開発におけるコンパイルやビルドを自動化してくれるタスクランナーツールです。モジュールやプラグインなどを使って、ビルド用のJavaScriptファイルでタスクを定義します。このコースではGulpとプラグインのインストール、タスクの定義や画像ファイルの圧縮、JavaScriptファイルの連結やSASSによるスタイルシートの生成などを学べます。

1時間48分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年07月27日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。