Grunt.jsを使ったWeb制作のワークフロー

ブラウザを自動的にリロードする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プラグインgrunt-contrib-connectでローカルにサーバーを設定したうえで、HTMLドキュメント修正時に自動的にロードし直します。
講師:
06:34

字幕

このレッスンでは プラグイン grunt-contrib-connect を使って サーバーの設定をローカルに行って そこで html ドキュメントを開きます そしてそのドキュメントが変更された時に 自動的にロードをする様に 設定をしたいと思います 先にファイルのパスを確かめておきましょう プロジェクトの gruntworkflows を開いてあります そして その中で開きたい トップページになるのは この index.html です どこにあるかというと プロジェクトの中の builds 更にその中の development にある訳なので ここをローカルのルートとして 定めたいと思います Dreamweaver で gruntfile.js を開きました プラグインを読み込む loadNpmTasks で 既に grunt-contrib-connect は 読み込んでいますので 後はタスクを加えるだけです ではタスクはこの watch の前に 加える事にしましょう タスクの名前は connect とします そして中括弧始まり中括弧閉じ サーバーについての設定を行います サーバーで また中括弧始まり 中括弧閉じ そして options という 設定を加えていきます options 複数の設定をします 中括弧始まり中括弧閉じ この中に幾つか設定を加えていきます プロパティで設定を加えます まずホストネームです ここはローカルホストとしましょう そしてカンマ区切りで 次はポートです ここでは 3000 にしておきます またカンマ区切りで ベース先程の サイトのルートとする場所です それを文字列で加えます builds の development でしたね そして最後に 自動的にリロードできる機能として livereload と これは true false の ルール値で設定します これを有効にしますよ という事で true としておきます そしてこれを デフォルトに加える事にしましょう concat-sass の後に connect コピーを持ってきましょう これで保存をします connect のタスクの 中括弧閉じの後に カンマ区切りが抜けていますね カンマを入れて もう一度保存します コマンドラインツールの ターミナルを開きましたので 先ずディレクトリをプロジェクトの ディレクトリに変更します gruntworkflows ですね ディレクトリが変わりました connect のタスクは デフォルトに入れましたので Grunt だけで大丈夫です watch が働いていますので waiting になっていますけれども ちゃんと connect を 動いています ローカルホスト 3000 ここにアクセスをしてみましょう ブラウザを開きましたので ここで URL ですが ローカルホスト3000 これで html ドキュメントが開きました 唯ローカルの ディレクトリを辿って行ったのではなくて ローカルホスト 3000 で アクセスしていますから これはローカルのサーバーとして 動いているという事です gruntfile.js の方に戻りまして watch のタスクで オプションに リロードの設定を加えます spawn false になっていますが この後のカンマ区切りで livereload を これも やはり true false で true という風にしておきます そしてファイルを保存します ターミナルの watch は 一旦コントロール C で中断します そして改めて grunt をコマンド実行して 今設定した gruntfile の設定で実行を行います そうしたらブラウザの方も リロードをかけておく必要があります さて この後 html ドキュメントを変更すると その変更が直ちに このブラウザのページに反映されます ではこの Contemporary Conference とありますので ここを html ドキュメントを開いて 修正してみることにしましょう Dreamweaver で html ドキュメントを開きました 先程のタイトルですね もうちょっと下の方でしょうか ここです ここで では コードの方を見て ここに Contemporary Art としましょう 勿論 Dreamweaver の中は 直ぐに変更されるんですが これを保存します ブラウザに切り替えました リロードはしていませんけれども Contemporary Art もうちょっと下ですか Conference という風に ライブで 自動的にリロードが行われたという事が 確かめられました このレッスンでは プラグインの grunt-contrib-connect を使って サーバーをローカルに設定した上で しかもファイルの変更を行うと 自動的にリロードされるという設定にしました その場合にはタスクを loadNpmTasks でプラグインを読み込んだ後 この様なタスクを設定しました サーバーの プロパティの中の options で ホストの名前と それからポート どこをルートにするかという起点 そして liveload の true という設定 そして合わせて watch のタスクの方にも liveload true という設定をすると html ドキュメントの 修正が直ちにローカルホストの 開いているページの内容に 反映されたという事です

Grunt.jsを使ったWeb制作のワークフロー

Gruntは開発におけるコンパイルやビルドを自動化するツールです。これを使えば煩わしい作業の繰り返しから解放されます。このコースではGruntのインストールや定義ファイルの作り方、JavaScriptファイルの連結やSASSによるスタイルシートの生成などを実際に使いながら説明します。またフロントエンド用のパッケージマネージャBowerについても紹介します。

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

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

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

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