gulp 保存したら自動でブラウザをリロードする方法

  • このエントリーをはてなブックマークに追加
  • Pocket

今更だけど、html や css を書くときに便利なタスクランナーのメモ。
静的サイトやHTMLでのモックとか作る際に重宝する。

ファイルを保存したら自動でブラウザを再読み込みしてもらう方法。

環境

  • Mac OS X EI Capitan
  • node v5.6.0
  • npm 3.6.0
  • gulp 3.9.1

Gulpのインストール

npm のグローバルオプションを付けてインストール。

init でディレクトリを管理下に置く。

こんな感じになる。

次に、必要な物をインストール。

OK

モノは揃ったのでタスクを書いていく。

gulpfile

html と css が保存されたらブラウザをリロードするように設定。

gulpfile.js

ディレクトリ構成はこんな感じ。

実行

gulpfile.js がある場所で gulp  と入力するだけ。

ビルドインサーバが起動して、勝手にブラウザが立ち上がる。

あとはファイルを保存すると自動でリロードしてくれる。

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*