はじめてのGulp(2)サーバーを立てて変更が発生したらブラウザもリロードする

はじめてのGulp(2)サーバーを立てて変更が発生したらブラウザもリロードするはじめてのGulp(1)CoffeeScriptとSassで環境を作る | Morizotter Blogの続きです。

今回は下記のことを行いたいと思っています。

  • ローカルサーバーを起動する
  • 変更を検知してブラウザ側もリロードする

ローカルサーバーを起動してlivereloadする

Chromeでlivereloadができるように拡張機能をインストールしておきます。

LiveReload – Chrome ウェブストア

他のブラウザはこちらを参考にします。: 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

次回やること

次は、今までやった設定を整理して使いやすくしていきます。

シリーズ

Pocket
LINEで送る

You may also like...