1. niki-tstk

    Posted

    niki-tstk
Changes in title
+browser-syncを使う
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,96 @@
+# 導入手順
+* npmでbrowser-syncをインストール
+* browser-syncのコンフィグ設定
+
+# 事前に準備していた環境
+* Mac
+* node.jsはnodebrewでインストール済み
+
+#導入
+プロジェクトディレクトリに移動して
+
+```
+$ cd プロジェクトディレクトリ
+```
+
+npmでbrowser-syncを開発用でローカルインストール。 *npmを初期化していない場合は先に初期
+
+```
+$ npm install browser-sync --save-dev
+```
+
+インストールが終わってからbrowser-syncのコンフィグファイルを生成
+
+```
+$ npx browser-sync init
+```
+
+```js:bs-config.js
+
+**bs-config.js**が作られる
+
+/*
+ |--------------------------------------------------------------------------
+ | Browser-sync config file
+ |--------------------------------------------------------------------------
+ |
+ | For up-to-date information about the options:
+ | http://www.browsersync.io/docs/options/
+ |
+ | There are more options than you see here, these are just the ones that are
+ | set internally. See the website for more info.
+ |
+ |
+ */
+module.exports = {
+ "ui": {
+ "port": 3001
+ },
+ "files": false,
+ "watchEvents": [
+ "change"
+ ],
+ //~~~以下続く~~~
+}
+```
+
+設定が大量に記述された**bs-config.js**が作られるので必要な設定のみ残してあとは削除。
+今回は監視ファイルとプロキシの設定だけしたかったので以下のように書き換え
+
+```js:bs-config.js
+/*
+ |--------------------------------------------------------------------------
+ | Browser-sync config file
+ |--------------------------------------------------------------------------
+ |
+ | For up-to-date information about the options:
+ | http://www.browsersync.io/docs/options/
+ |
+ | There are more options than you see here, these are just the ones that are
+ | set internally. See the website for more info.
+ |
+ |
+ */
+module.exports = {
+ "files": ["**/index.php", "css/*.css","js/**/*.js"], //phpファイルはindex.phpのみ、cssファイルとjsファイルは全て監視する
+ "proxy": 'localhost:80', //ローカルホストのポートを指定
+};
+```
+
+最後に**package.json**にbrowser-syncを起動するコマンドを追加
+
+```json:package.json
+{
+ "scripts": {
+ "bs": "browser-sync start --config bs-config.js"
+ }
+}
+```
+
+これで設定完了!
+
+```
+$ npm run bs
+```
+
+npmでbrowser-syncを起動すれば監視ファイルを更新するたびにブラウザが再読み込みしてくれます。