gulp不要。Browsersyncで2行のLiveReloadみたいな環境
Advent calenderの時期というわけで、フロントエンドエンジニアAdventCalenderの５日目久しぶりに更新です。
主にフロントエンドのデバッグの話で、色々作業していくときに、LiveReloadを使うと非常に効率が良い。保存と同時にブラウザ再読み込み☆
で、ブラウザの自動更新の環境を作る際には、GulpとBrowserSyncを使ったりReactなんかのWebpack/Hot Moduleを使うという方法をよく見かける気がしますが、
ここではブラウザの自動更新の機能のためだけにGulpしてるとか、逆にnode_modulesのフォルダがうっとおしいから、Gulpしたくなくてをライブリロードを断念している人に向けて、ターミナルとbrowsersyncコマンドだけでシンプルに解決してみたいと思います。（何かしらフレームワーク使ってる場合は、そのフレームワークでのベストプラクティスが案内されているのでそれを利用するといいと思います。）
結局GulpをつかったとしてもBrowserSyncのラッパーみたいな感じなので、それCLIだけでできるよって。
というわけで、Gulpを使わずにターミナルだけで今すぐ使える、簡易のライブリロードみたいなブラウザの自動再読込の環境を作ってみよう。
（MACを使ってる前提です。）
簡易Webサーバを立ち上げる
あ、WebサーバはMAMPでもいいです、その場合は、次のステップへ。
さて、ターミナルからワンライナーで簡易Webサーバ起動する方法ですが、こちらのQiita記事にいい感じにまとめられてあります。
個人的に手軽な部分だけ抜粋してみます。自分は前まで、以前はpython版使っていたけど、今はphpビルトインサーバばっかりです。
まず、プロジェクトのルートディレクトへ移動して、上記の方法で、ビルトインサーバを立ち上げて、ブラウザでhttp://127.0.0.1:8000 へアクセスして、動作確認。「Ctrl＋C」でWebサーバを終了できます。
ターミナルを閉じてしまうと、サーバが終了するので、ターミナルは開きっぱなしにしておきます。
Browsersyncでブラウザ自動リロード
ここで、Browsersyncを使います。インストールしましょう。
$ npm install -g browser-sync #エラー出た場合は、sudoつけて管理者権限で、インストール $ sudo npm install -g browser-sync
次に、ターミナルで、新しいタブorウィンドウを開き、先の手順と同様に、プロジェクトフォルダに移動します。
あとは、次のコマンドを叩くだけで、新しいブラウザが立ち上がります！
自動的にブラウザが立ち上がり（localhost:3000かな）、適当にファイルを保存するとブラウザが再読み込みしてくれます！！
簡易サーバと同じで、ターミナルを閉じてしまうと、Browsersyncが終了してしまうと、ウィンドウは開いておかないといけない。
これだけで出来上がりました。終了はCtrl+Cで。
まとめ
というわけで、最後に自分用のコピペを乗せて記事を終了します。
php -S 127.0.0.1:8000 -t=./ browser-sync start --proxy "127.0.0.1:8000" --files="./**/*.php,./**/*.css,./**/*.js/,./**/*.html"
2行で簡単、Gulpを使わずにBrowesrSyncだけでブラウザの自動更新/ライブリロードできる環境を作ってみるといいですよ！
注意点
- ターミナルを常時２つのタブ/ウィンドウを開いておく必要がある。
- 簡易サーバをlocalhost:8000として立ち上げてしまうと、Browersyncがうまく動作しないので、127.0.0.1:8000とする。（ポート番号は8000でなくても良い）←結構ハマった。
参照
写真はBrowsesyncの本家から拝借しました。
