はじめてのGulp(1)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
次回やること
次は、今までやった設定を整理して使いやすくしていきます。