WebDesign Dackel

今更ながらGulp+BrowseSyncが気持ちいい

今更ながらGulp+BrowseSyncが気持ちいい

Hatena0
Google+0
Pocket0
Feedly0

ブラウザの同期ができるBrowserSyncですが、存在自体は知っていたのに、最近まで使ったことがありませんでした。
なんだか設定が面倒なんじゃないかなぁ〜と勝手な思い込みをしていました。

しかし、実際使ってみると簡単に使えます。
何よりファイルを更新したと同時に、複数のブラウザで同期されるのがとても気持ちいいのです!

BrowserSyncの動作イメージ

今回はGulpからBrowserSyncをとりあえず使えるように、最低限の設定でいきたいと思います。

Gulp+BrowserSyncのインストール

作業用のディレクトリでnpmの初期化を行います。
NodeやGulpが使えるという前提で進めていきます。

npm init

いろいろと聞かれますが、今回はサンプルなのですべてEnterを押しておきます。
次に必要なモジュールをインストールしていきます。gulpfileはCoffeeScriptで書いていきたいので、CoffeeScriptのインストールもしておきます。

npm install --save-dev gulp gulp-load-plugins browser-sync coffee-script

必要なモジュールの準備が出来ましたので、次にgulpfileの編集をしていきます。

gulpfileの作成

先ほどと同じディレクトリでgulpfile.coffeeファイルを作成します。

touch gulpfile.coffee

エディタでファイルを開いて編集していきます。

# モジュールの読み込み
gulp = require "gulp"
$ = do require "gulp-load-plugins"
browserSync = require "browser-sync"

# 同期を開始
gulp.task "bs", ->
  browserSync({
    server: {
      baseDir: "./" #HTMLのあるディレクトリを指定
    }
  })

# リロード
gulp.task "bs-reload", ->
  browserSync.reload()

# デフォルトのタスク(ファイルを監視)
gulp.task "default", ["bs"], ->
  gulp.watch "./*.html", ["bs-reload"]

ここまでで、作業ディレクトリにあるHTMLを編集するたびにブラウザが同期するようになりました。
index.htmlを作って確認してみます。中身はとりあえず下のような感じにしてみました。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>BrowserSync - Sample</title>
</head>
<body>
  <h1>BrowserSyncの同期テスト</h1>
  <textarea rows="10" cols="60"></textarea>
</body>
</html>

ここまでで作業ディレクトリは下記のような感じです。

├── gulpfile.coffee
├── index.html
├── node_modules
│   ├── browser-sync
│   ├── coffee-script
│   ├── gulp
│   └── gulp-load-plugins
└── package.json

では早速、ターミナルで下記を実行して同期してみます。

gulp

HTML編集の動作イメージ

ちゃんと動作しました。とても気持ちいいです…!
保存するたびに内容も更新されるので最高です。

画面右上の表示を消す

これでも勿論いいのですが、右上に表示されるConnected to BrowserSyncがちょっと邪魔なので消したいです。
そんな時は同期を開始する際、notifyオプションにfalseを指定しておくと良いみたいです。
gulpfile.coffeeを少し編集します。

# 同期を開始
gulp.task "bs", ->
  browserSync({
    notify: false
    server: {
      baseDir: "./" #HTMLのあるディレクトリを指定
    }
  })

これで再度実行すると、右上に出ていた表示が消えました。

ついでにSassのコンパイル+AutoPrefixerも実行する

Sassのコンパイルをしたいので、追加で必要なモジュールをインストールします。
ここでは出力スタイルが選べるのでRuby版のSassを使ってみます。

npm install --save-dev gulp-ruby-sass gulp-autoprefixer

Sassファイルは適当なものを用意して、コンパイルのための設定をgulpfile.coffeeに書いていきます。

gulp = require "gulp"
$ = do require "gulp-load-plugins"
browserSync = require "browser-sync"

# 同期を開始
gulp.task "bs", ->
  browserSync({
    notify: false
    server: {
      baseDir: "./" #HTMLのあるディレクトリを指定
    }
  })

# リロード
gulp.task "bs-reload", ->
  browserSync.reload()

# Sassのコンパイル、AutoPrefixer、リロード
gulp.task "sass", ->
  $.rubySass("./", {style: "compressed"})
  .pipe $.autoprefixer()
  .pipe gulp.dest "./" #cssの出力先フォルダ
  .pipe browserSync.reload({stream:true})

# デフォルトのタスク
gulp.task "default", ["sass", "bs"], ->
  gulp.watch "./*.html", ["bs-reload"]
  gulp.watch "./*.scss", ["sass"]

準備ができたので、試してみます。

gulp

ブラウザが開いたら、HTMLやSassを編集してみてください。ファイルを保存するたびに、コンパイルとブラウザの同期がされるようになったかと思います。
何度も言いますが、とても気持ちいいです。

参考サイト

BrowserSync
LiveReload から BrowserSync に乗り換えてる|Web Design KOJIKA17

とても参考にさせていただきました。
ただ、上記記事では同期の開始をbrowserSync.init()で行っていましたが、現在はバージョンがあがってbrowserSync()のようにinit()を使わなくなっている点に気を付ける必要があります。
最近のフロントエンドは特に流れが早いし、使うときは必ず公式のドキュメントを確認しないとダメだなぁと思いました…。

まとめ

今回作ったサンプルはSassやHTMLのファイルをすべて同じ階層にしているのですが、実際はちゃんとディレクトリを分けて管理するのが良いかと思います!