※ BrowserSyncの細かい解説はしません。
※ Macとか向け
※ Winでもできますがググって下さい。
便利なBrowserSync
Webサイトコーディングでとても面倒なのが、コードをひとしきり書いた後の
ブラウザに移動して更新ボタンをポチること。
GulpなどのタスクランナーでBrowserSyncを使ってこの操作を自動化してる
人も多いと思いますが、さくっとHTMLを書きたいときわざわざ gulpfile.js を書くのもぁ…と思います。
Command Line
BrowserSyncのサイトをみればわかりますが、実は実行にはGulpやGruntは必要ありません。
Command Line = 黒い画面からコマンドを入力することで自動更新入りのローカルサーバーが手には入ります。
コマンド
私がよく使うコマンドは以下のものです。
browser-sync start --server --files "./**/*.html" --files "./**/*.css" --files "./**/*.js"
これは
- コマンドを入力したディレクトリでローカルサーバーを起動
- ディレクトリ階層化に含まれるHTML/CSS/JavaScriptファイルを監視し、更新があったらブラウザを更新
という意味を表しています。
BrowserSyncの終了には Ctrl + c を入力します。
JavaScriptやSASSなどのコンパイルが必要なければ十分すぎる内容ですね。
つまりコレを常に暗記すればOK…
ってめんどくせぇよ！！！
エイリアス
僕らの使っているぱそこんには エイリアス という長いコマンドを短くするための仕組みが備わっています。
あなたもドヤ顔で「エイリアス…エイリアス…」ぶつぶつつぶやいてるプログラマを、一度みたことはあるんじゃないですかね。
例えば「ホイミ」と唱えるとケアルラ・プロテス・ヘイストがかかるようにするようなものです。
ェィリアス
ではエイリアスはどうやって作ることができるのでしょうか。
Macでは ~/.bash_profile というファイルをゴニョゴニョすれば良いみたいです。
ターミナルを開き、以下のようにして、 ~/.bash_profile に記述を追加して下さい
vi ~/.bash_profile
alias bs='browser-sync start --server --files "./**/*.html" --files "./**/*.css" --files "./**/*.js"'
viエディタに蕁麻疹が出る？がんばってください。
それか隣の人に土下座して書いてもらいましょう。
ごちゃごちゃ書いてますが、下のようなことを書いています。
エイリアス名=`登録するコマンド`
記述が終わったらターミナルを再起動しましょう。
使用法
おもむろに編集したいサイトのディレクトリをターミナルで開き、
以下を入力しましょう。
bs
ブラウザが立ち上がり、サイトが表示されればOKです。
テンション上がってきた。
以上です。