LiveReload から BrowserSync に乗り換えてる

2014-06-24

この記事を書いて放置していたら、GoogleからWebアプリケーション開発用テンプレートのWeb Starter Kitに、BrowserSyncが利用されていました。
まだまだ把握しきれていませんが、需要がありそうなので、どんなことができるか簡単な導入方法を紹介します。

BrowserSyncの利点

BrowserSyncは、その名の通り「ブラウザを同期」してくれます。
LiveReloadのように、HTMLファイルなどを編集、保存するとブラウザをリアルタイムに更新を行い、さらにGoogle Chromeで行ったブラウザの「操作」が、Firefoxなどの他のブラウザにも、リアルタイムに反映されます。

BrowserSyncを利用すると、開発から確認までが、スムーズに行えます。

BrowserSyncの導入

gulpを利用したBrowserSyncの導入方法を紹介します。
Gruntはプラグインがあるので、そちらを利用してください。

gulpのプラグインは、以下のものを利用します。

• gulp v3.8.0 (gulpfile.coffeeが利用できるようになった)
• coffee-script (gulpfile.coffeeにするなら必要)
• gulp-load-plugins (gulpプラグインを自動で読み込む)
• gulp-less (気分的にless)
• gulp-autoprefixer (ベンダープリフィックスをプリプリする)
• browser-sync (今回の主役)

package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "demo",
  "author": "tomoki kubo",
  "dependencies": {},
  "devDependencies": {
    "browser-sync": "^0.9.1",
    "coffee-script": "^1.7.1",
    "gulp": "^3.8.1",
    "gulp-autoprefixer": "0.0.7",
    "gulp-less": "^1.2.3",
    "gulp-load-plugins": "^0.5.1"
  }
}

package.jsonからインストールを行ってください。
上記のpackage.jsonを利用しない方は、下記のコマンドで、BrowserSyncをインストールしてください。

npm i -D browser-sync

gulpfileは、以下のものを利用します。

gulpfile.coffee

g = require('gulp')
$ = require('gulp-load-plugins')()
browserSync = require('browser-sync')

# BrowserSync
g.task 'bs', ->
  browserSync.init(null, {
    server:
      baseDir: './'
  })

# Tasks
g.task 'bsReload', ->
  browserSync.reload()

# Watch
g.task 'default', ['bs'], ->
  g.watch './**/*.html', ['bsReload']

これで準備ができました。
ターミナルで[gulp]を実行してみてください。

ブラウザが自動で立ち上がり、browserSyncが利用できる状態になります。
この状態で、ブラウザの操作やHTMLの編集を行うと、リアルタイムにブラウザが同期します。

さらにPre-processorやPost-processorも利用してみましょう。

g = require('gulp')
$ = require('gulp-load-plugins')()
browserSync = require('browser-sync')

# BrowserSync
g.task 'bs', ->
  browserSync.init(null, {
    server:
      baseDir: './'
  })

# Tasks
g.task 'bsReload', ->
  browserSync.reload()

g.task 'less', ->
  g.src('less/**/*.less')
    .pipe $.less()
    .pipe $.autoprefixer()
    .pipe g.dest('./')
    .pipe browserSync.reload(stream: true, once: true)

# Watch
g.task 'default', ['bs', 'less'], ->
  g.watch './**/*.html', ['bsReload']
  g.watch 'less/**/*.less', ['less']

タスクの最後に browserSync.reload() を入れるだけなので、簡単ですね。

PHPを利用したい場合

PHPを利用する場合は、「**/*.html」を「**/*.php」にしただけでは動きません。
PHPが利用できるサーバーを立ち上げ(XAMPP, MAMPでも何でも構いません)、BrowserSyncにproxyを設定します。

g = require('gulp')
$ = require('gulp-load-plugins')()
browserSync = require('browser-sync')

# BrowserSync
g.task 'bs', ->
  browserSync.init(null, {
    proxy: 'localhost:8888' # ここを変更
  })

# Tasks
g.task 'bsReload', ->
  browserSync.reload()

g.task 'less', ->
  g.src('less/**/*.less')
    .pipe $.less()
    .pipe $.autoprefixer()
    .pipe g.dest('./')
    .pipe browserSync.reload(stream: true, once: true)

# Watch
g.task 'default', ['bs', 'less'], ->
  g.watch './**/*.php', ['bsReload'] # 拡張子を変更
  g.watch 'less/**/*.less', ['less']

あとは、先ほどと同様に、ターミナルで[gulp]を実行します。

サーバーの環境によって、うまく動かない時もあります。

BrowserSyncを触ってみて

まだ試してないですが、bodyの閉じタグの前などにJSを仕込めば、リモートのサイトもBrowserSyncができそうです。

ツイート