社内共有用に書きました。手順の検証をしてないのでまた修正するかも
※BrowserSyncのインストールでこける環境があるっぽいです。。。（調査中）
↑公式ページに解決方法でていました。Windowsで発生すると
http://www.browsersync.io/docs/#windows-users (追記 2015/08/07)
Gulpを使ったLiveReload環境を構築しましょう。
BrowserSyncというソフトを使い、ファイルを編集するたびに表示確認で開いている画面が自動更新される便利なローカルサーバーを動作させます。
詳しく言うとnpde.js上で動作するBrowserSyncというローカルサーバツールを、これまたnode.js上で動作するgulpから起動し、gulpがあなたが編集しているディレクトリ以下のファイルを常に監視し、ファイルの更新を検知したらリロードの命令をBrowserSyncに行うということをやります。
はい、頭が痛くなってきましたね。今は詳しい中身について理解しなくとも問題ありません。
目的
- ソース編集！ブラウザ自動リロード！サクサクコーディング！な環境を作る
- Gulpもついでにぶっこむ！気づいたらGulp入門してたジャン
手順
- node.jsインストール
- gulpインストール
- gulpfileの準備
- 実行環境(LiveReload)インストール
- gulpの起動
- シュパパパパパパパ
node.jsインストール
node.jsとはサーバサイドで動作するJavaScript実行環境です。 Web制作の現場においては各種制作ツールを動作させるために使わることが多いです。
-
https://nodejs.org/ にアクセス
-
「INSTALL」ボタンをクリック
-
DLしたインストーラーでnode.jsをインストール
-
「Win + R」でファイル名を指定して実行ウィンドウを開き、「cmd」と入力してコマンドプロンプトを起動
-
下のコマンドを入力しnode.jsがインストールされていることを確認
node -v
# v 0.XX.XX.XXみたいなバージョンが表示されるはず
※エラーがでたら、Windowsを再起動してみる
Gulpのインストール
- 引き続きコマンドプロンプトで下のコマンドを力のかぎり叩き込む
- 正座して待つ
- Welcome to underground.
npm install -g gulp
※もしかしたら管理権限が必要かも
npmとは
node.jsに付属するパッケージ管理ツールのこと。黒い画面からnode.js上で動くツールのインストール・更新・削除が行える。ネットを駆けずり回っていろんなソフトを拾ってくるよりはるかに便利。
gulpfileの準備
LiveReloadを行うために、gulpを通してBrowserSyncを実行する。gulpの動作を設定するにはgulpfile.jsが必要。
Githubに準備しておいた。右にあるメニューから「Download ZIP」ボタンを押してファイルをダウンロード、解凍しておく。
解凍後は以下のようなフォルダ構成になっていることを確認。
livereload_template/
├── document_root
├── gulpfile.js
└── package.json
LiveReloadで検証するファイルの準備
document_root以下にそのまま製作中のファイル群をぶちこむ
document_root/index.html
がサイトルートになり、一番初めに表示されます。
実行環境(Gulp&BrowserSync)インストール
上で落としたファイルを解凍してできたフォルダにコマンドプロンプト上で移動する。そして下のコマンドを叩いて逆立ちし、待つ。
cd livereload_templateのディレクトリパス
npm install
gulpの起動
続けてコマンドプロンプトで下のコマンドを実行
cd livereload_templateのディレクトリパス
gulp
自動的にブラウザが立ち上がってサイトが表示されるはず。時たまエラーで動作が止まるのでそうしたら再度同じコマンドを実行する
document_root/以下のファイルを編集すると、ブラウザがリロードされることを確認する。
シュパパパパパパ
バリバリバリバリ r( ﾟω ﾟ )r （コーディングイメージ）
こんな機能もありまっせ - 複数ブラウザでの同期
Gulpを立ち上げると
http://localhost:3002
みたいなURLに自動接続される。（後半の3002は動作させた状況によって3001とか3003とか変わる）
このURLは複数ブラウザからアクセス可能で、ファイルを変更した際にアクセスしている ブラウザ全部 がリロードされる。
また
- ページスクロール
- ページ遷移
なんかも同期される。
えらいこっちゃ！
説明は長いので避けるが、例えばgulpを立ち上げているPCにAndroidやiPhoneでアクセスすると同時に複数端末での検証が可能。
そもそもなぜLiveReloadか
高速に失敗するワークフローを作りたい
一発でコードをかける人は稀、我々は必ず失敗する。
十分な品質のあるコードを書くのにN回失敗するとしたら。
そのN回、リライトする時間を極力少なくしたい。
コーディング → 検証
の検証工程にかかる時間を減らしたい。ブラウザのリロードを人力でやるのは回数を重ねると意外に多くの時間を使う。
ローカルサーバを立てよう
単純な静的サイトの構築では、リモート（開発）サーバとローカルサーバでの検証に違いはない。Ajaxもローカルサーバなら動く。
リモートサーバでの検証は大きなイテレーションの区切りで行えば良い。
その検証用ファイルアップロードに使う時間は、本当に問題を解決するための時間になっていますか？
終わりに
正直、BrowserSync立ち上げるためにGulp入れる必要もあまりない気がしますが、Gulpが使えるとSassやJadeのコンパイル、コードの圧縮・結合などいろんなタスクを自動化できるようになります。Gulp入門のきっかけとしてどうぞ。
暇ができたらgulpfile.jsの中身の解説を書きます。ではではー。