概要
今年もよろしくお願いします。
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 を省略してきたので、思わぬハマりどころでした。