Browsersync は body タグが無いと動かない #npm

概要

今年もよろしくお願いします。

Browsersync の紹介とハマったところを書きます。

Browsersync

browser-sync start --server --files "*.js,*.css,index.html",

このようなコマンドを実行すると、ローカルに HTTP サーバーが立てられ、そのページがブラウザで開かれます。

--files で指定したファイルが変更されると自動的にページがリロードされて便利です。

インストール

npm install browser-sync --save-dev

-g を付けずにインストールして、package.json の run script の start に書いておくとたいへん便利です。

pacakge.json

package.json

 {
  "name": "hogefuga",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "browser-sync start --server --files \"*.js,*.css,index.html\"",
    "compile": "browserify -t coffeeify main.coffee > main.js",
    "watch": "nodemon --watch *.coffee --ext coffee --exec \"npm run compile\""
  },
  "author": "ryohey",
  "license": "MIT",
  "devDependencies": {
    "browser-sync": "^2.10.1",
    "browserify": "^12.0.1",
    "coffeeify": "^2.0.1",
    "nodemon": "^1.8.1"
  }
}

npm run compile では browserify と coffeeify で CoffeeScript をコンパイルして js を1つにまとめてます。

npm run watch では coffee ファイルに変更があったら npm run compile を走らせるようにしています。

監視には coffee コマンドの -w オプションや watchify を使ってもいいのですが、nodemon で監視を行うことで、コンパイルする仕組みが変わったりしたときにも watch の方を変更しなくて済むので便利です。

nodemon は coffee を監視、browser-sync は js を監視という関係で、次のような流れでページがリロードされます。

coffee を変更
js が更新される
リロードされる

ハマったところ

<!DOCTYPE html>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<canvas id="canvas" width="960" height="640"></canvas>
<script src="main.js"></script>

そしてやっとタイトルの内容ですが、browser-sync は body タグの後に script タグを挿入して何やらやっているらしく、こういう body が省略された html では動きません。

Google HTML/CSS Style Guide を見てから body と html を省略してきたので、思わぬハマりどころでした。