Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

概要

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

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 を監視という関係で、次のような流れでページがリロードされます。

  1. coffee を変更
  2. js が更新される
  3. リロードされる

ハマったところ

<!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 を省略してきたので、思わぬハマりどころでした。

ryohey
covelline
もっと楽しい明日をつくる
http://covelline.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away