package.jsonを設定する
scriptsに起動コマンドを定義する。
“bs”の部分は任意のコマンド名。
–config に続く部分がbrowsersyncの設定ファイルのパスになるので指定する。
devDependenciesにbrowser-sync:バージョンを記述する。
記述できたらnpm install する。
または以下のコマンドを打つと、自動的に最新のバージョンをインストールしてdevDependenciesに追記してくれる。
npm install browser-sync --save-devpackage.json
{
"name": "project_name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bs": "browser-sync start --config \"./bs-config.js\""
},
"author": "k_tabuchi",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.6",
"browser-sync": "^2.26.14",
"cssnano": "^5.0.5",
"node-sass": "^6.0.0",
"npm-run-all": "^4.1.5",
"postcss-cli": "^8.3.1",
"watch": "^1.0.2"
}
}設定ファイルの配置
filesのブロックに同期したいパスとファイルを記述する。
proxy:targetにApacheで動かしているローカル開発のURLを指定する。
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": [
"./**/*.php"
,"./**/*.html"
],
"watchEvents": [
"change"
],
"watch": false,
"ignore": [],
"single": false,
"watchOptions": {
"ignoreInitial": true
},
"server":
false
,
// "proxy": false,
"proxy": {
target:'http://develop6.local.com/'
},
"port": 3000,
"middleware": false,
"serveStatic": [],
"ghostMode": {
"clicks": true,
"scroll": true,
"location": true,
"forms": {
"submit": true,
"inputs": true,
"toggles": true
}
},
"logLevel": "info",
"logPrefix": "Browsersync",
"logConnections": false,
"logFileChanges": true,
"logSnippet": true,
"rewriteRules": [],
"open": "local",
"browser": "default",
"cors": false,
"xip": false,
"hostnameSuffix": false,
"reloadOnRestart": false,
"notify": true,
"scrollProportionally": true,
"scrollThrottle": 0,
"scrollRestoreTechnique": "window.name",
"scrollElements": [],
"scrollElementMapping": [],
"reloadDelay": 0,
"reloadDebounce": 500,
"reloadThrottle": 0,
"plugins": [],
"injectChanges": true,
"startPath": null,
"minify": true,
"host": null,
"localOnly": false,
"codeSync": true,
"timestamps": true,
"clientEvents": [
"scroll",
"scroll:element",
"input:text",
"input:toggles",
"form:submit",
"form:reset",
"click"
],
"socket": {
"socketIoOptions": {
"log": false
},
"socketIoClientConfig": {
"reconnectionAttempts": 50
},
"path": "/browser-sync/socket.io",
"clientPath": "/browser-sync",
"namespace": "/browser-sync",
"clients": {
"heartbeatTimeout": 5000
}
},
"tagNames": {
"less": "link",
"scss": "link",
"css": "link",
"jpg": "img",
"jpeg": "img",
"png": "img",
"svg": "img",
"gif": "img",
"js": "script"
},
"injectNotification": false
};