BLOG

Browsersyncで自動リロードさせる

2020.04.03 | フロントエンド

コーディング作業をしてて面倒なのが、ブラウザーのリロード作業。
みなさんも、作業してて少しでもその手間を省きたいと思いませんか？
ってことで、自分用のメモも兼ねてここに記載。

準備

下記が必要になので、それだけインストールしておいてください。

node.js

何はともあれ、Browsersyncのインストールから

$ npm init
$ npm install browser-sync --save-dev

npmの設定？初期設定をしてインストールをする
インストールが終わったら、package.jsonのscriptsに追加

"start": "browser-sync start --server --files='./*.html, ./*.css'"

{
  "name": "browsersync",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "browser-sync start --server --files='./*.html, ./*.css'"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.7"
  }
}

追加したうえのところに最後に,を忘れるとエラーでるから気をつけてね。
追加したら下のコマンドで、とりあえず見れます。

$ npm start

% npm start

> browsersync@1.0.0 start /Users/***/Sites/browsersync
> browser-sync start --server --files='./*.html, ./*.css'

[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.10.4:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...

こんな感じのがでてくるので、監視が始まるので、それで自動リロードが開始します。
で、僕は作業として、ｐｈｐとかWordPressを使ってすることがおおいのでプロキシとかの設定をすると使える。
package.jsonに追加して各方法はあるのだろうけど、面倒なので
package.jsonと同階層にserverset.jsを作って以下をコピペ！

var browserSync = require("browser-sync");
browserSync({
  proxy: 'hige.demo',
  files: [
    "./public_html/path/to/scss/**/*.scss",
    "./public_html/path/to/js/**/*.js",
    "./public_html/**/*.php",
  ]
});

proxyのところにローカルサーバーのアドレスで、filesのところに書き換えたらリロードするファイルを
んでまた、package.jsonのscriptsのところに

"localserv": "node ./serverset.js"

{
  "name": "browsersync",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "browser-sync start --server --files='./*.html, ./*.css'",
    "localserv": "node ./serverset.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.7"
  }
}