HTML
Bash
gulp
BrowserSync

BrowserSyncコマンド(エイリアス)をつくろう

More than 1 year has passed since last update.

※ 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です。
テンション上がってきた。

以上です。