はじめてのGulp（１）CoffeeScriptとSassで環境を作る | Morizotter Blogの続きです。
今回は下記のことを行いたいと思っています。
- ローカルサーバーを起動する
- 変更を検知してブラウザ側もリロードする
ローカルサーバーを起動してlivereloadする
Chromeでlivereloadができるように拡張機能をインストールしておきます。
他のブラウザはこちらを参考にします。: How do I install and use the browser extensions? – LiveReload Help & Support
仮想サーバーを立ち上げるためのパッケージを追加します。実は最初に、gulp-connectを試したのですが、こちらはdeprecatedということで新しいgulp-webserverを試してみることにしました。
$ npm install --save-dev gulp-webserver
gulpファイルに追記します。
gulp.task('webserver', ->
gulp.src('dist')
.pipe(webserver({
livereload: true
port: 9000
fallback: 'dist/index.html'
open: true
}))
)
下記のコマンドで、仮想ウェブサーバーを立ち上げます。
$ gulp webserver
別ターミナルを立ち上げて下記のコマンドを実行します。ファイルが変わるとlivereloadが実行されます。
$ gulp watch
参考: 2015年はgulpで決まり！開発環境をgruntから乗り換えよう！（コーダー編）
参考: gulp＋node＋expressでlivereload使いたい – ぶるーすくりーん
ここまでのコード
Release Step2 · morizotter/first-gulp
次回やること
次は、今までやった設定を整理して使いやすくしていきます。
