use Browsersync instead of livereload

lib/crowi/dev.js

@@ -6,7 +6,7 @@ const helpers = require('./helpers');
 
 const swig = require('swig-templates');
 const onHeaders = require('on-headers')
-const LRWebSocketServer = require('livereload-server/lib/server');
+
 
 class CrowiDev {
 
@@ -25,7 +25,6 @@ class CrowiDev {
 
     this.initPromiseRejectionWarningHandler();
     this.initSwig();
-    this.hackLRWebSocketServer();
   }
 
   initPromiseRejectionWarningHandler() {
@@ -50,32 +49,6 @@ class CrowiDev {
     });
   }
 
-  /**
-   * prevent to crash socket with:
-   * -------------------------------------------------
-   * Error: read ECONNRESET
-   *     at exports._errnoException (util.js:1022:11)
-   *     at TCP.onread (net.js:569:26)
-   * -------------------------------------------------
-   *
-   * @see https://github.com/napcs/node-livereload/pull/15
-   *
-   * @memberOf CrowiDev
-   */
-  hackLRWebSocketServer() {
-    const orgCreateConnection = LRWebSocketServer.prototype._createConnection;
-
-    // replace https://github.com/livereload/livereload-server/blob/v0.2.3/lib/server.coffee#L74
-    LRWebSocketServer.prototype._createConnection = function(socket) {
-      // call original method with substituting 'this' obj
-      orgCreateConnection.call(this, socket);
-
-      socket.on('error', (err) => {
-        console.warn(`[WARN] An insignificant error occured in client socket: '${err}'`);
-      });
-    }
-  }
-
   /**
    *
    *
@@ -86,7 +59,7 @@ class CrowiDev {
    */
   setup(server, app) {
     this.setupHeaderDebugger(app);
-    this.setupEasyLiveReload(app);
+    this.setupBrowserSync(app);
   }
 
   setupHeaderDebugger(app) {
@@ -100,23 +73,20 @@ class CrowiDev {
     });
   }
 
-  setupEasyLiveReload(app) {
-    if (!helpers.hasProcessFlag('livereload')) {
-      return;
-    }
-
-    debug('setupEasyLiveReload');
-
-    const livereload = require('easy-livereload');
-    app.use(livereload({
-      watchDirs: [
-        path.join(this.crowi.viewsDir),
-        path.join(this.crowi.publicDir),
-      ],
-      checkFunc: function(x) {
-        return /\.(html|css|js)$/.test(x);
-      },
-    }));
+  setupBrowserSync(app) {
+    debug('setupBrowserSync');
+
+    const browserSync = require('browser-sync');
+    const bs = browserSync.create().init({
+      logSnippet: false,
+      notify: false,
+      files: [
+        `${this.crowi.viewsDir}/**/*.html`,
+        `${this.crowi.publicDir}/**/*.js`,
+        `${this.crowi.publicDir}/**/*.css`,
+      ]
+    });
+    app.use(require('connect-browser-sync')(bs));
   }
 
   loadPlugins(app) {

lib/crowi/index.js

@@ -368,13 +368,12 @@ Crowi.prototype.start = function() {
     .then(function(app) {
       server = http.createServer(app).listen(self.port, function() {
         debug(`[${self.node_env}] Express server listening on port ${self.port}`);
+        // setup for dev
+        if (self.node_env === 'development') {
+          self.crowiDev.setup(server, app);
+        }
       });
 
-      // setup
-      if (self.node_env === 'development') {
-        self.crowiDev.setup(server, app);
-      }
-
       io = require('socket.io')(server);
       io.sockets.on('connection', function (socket) {
       });

lib/views/layout/layout.html

@@ -64,6 +64,10 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
   {% if env === 'development' %}
     <script src="/dll/vendor.dll.js"></script>
     <script src="{{ webpack_asset('dev').js }}" async></script>
+    <!-- Browsersync -->
+    <script id="__bs_script__">//<![CDATA[
+      document.write("<script async src='http://HOST:3001/browser-sync/browser-sync-client.js?v=2.23.6'><\/script>".replace("HOST", location.hostname));
+    //]]></script>
   {% endif %}
 
   <script src="{{ webpack_asset('commons').js }}" defer></script>
@@ -223,10 +227,10 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
 
 </div><!-- /#wrapper -->
 
+{% include '../modal/shortcuts.html' %}
+
 {% block body_end %}
 {% endblock %}
-
-{% include '../modal/shortcuts.html' %}
 </body>
 {% endblock %}
 

package.json

@@ -20,15 +20,14 @@
   },
   "scripts": {
     "build:dev:analyze": "cross-env ANALYZE=1 npm run build:dev",
-    "build:dev:watch": "npm run build:dev -- --watch",
-    "build:dev": "npm run clean:js && webpack --config config/webpack.dev.js  --progress --profile",
+    "build:dev": "npm run clean:js && webpack --config config/webpack.dev.js --progress --profile --watch",
     "build:prod:analyze": "cross-env ANALYZE=1 npm run build:prod",
-    "build:prod": "npm run clean && webpack --config config/webpack.prod.js  --progress --profile --bail",
+    "build:prod": "npm run clean && webpack --config config/webpack.prod.js --progress --profile --bail",
     "build": "npm run build:dev",
     "clean:js": "rimraf -- public/js",
     "clean:dll": "rimraf -- public/dll",
     "clean:report": "rimraf -- report",
-    "clean": "npm run clean:js && npm run clean:dll && npm run clean:report",
+    "clean": "npm-run-all -p clean:*",
     "heroku-postbuild": "sh bin/heroku/install-plugins.sh && npm run build:prod",
     "mkdirp": "mkdirp",
     "plugin:def": "node bin/generate-plugin-definitions-source.js",
@@ -36,11 +35,10 @@
     "prebuild:prod": "npm run plugin:def",
     "prestart": "npm run build:prod",
     "postserver:prod:container": "echo ---------------------------------------- && echo [WARNING] && echo   'server:prod:container' is deprecated. && echo   Please use 'sever:prod' && echo ----------------------------------------",
-    "server:dev:watch": "env-cmd config/env.dev.js node-dev --respawn app.js --livereload",
-    "server:dev": "env-cmd config/env.dev.js node app.js",
+    "server:dev": "env-cmd config/env.dev.js node-dev --respawn app.js",
     "server:prod:container": "npm run server:prod",
     "server:prod": "env-cmd config/env.prod.js node app.js --production | pino-clf common",
-    "server": "npm run server:dev:watch",
+    "server": "npm run server:dev",
     "start": "npm run server:prod",
     "test": "mocha --timeout 10000 -r test/bootstrap.js test/**/*.js",
     "version": "node -p \"require('./package.json').version\"",
@@ -117,6 +115,7 @@
     "nodemailer": "^4.0.1",
     "nodemailer-ses-transport": "~1.5.0",
     "normalize-path": "^2.1.1",
+    "npm-run-all": "^4.1.2",
     "optimize-js-plugin": "0.0.4",
     "passport": "^0.4.0",
     "passport-ldapauth": "^2.0.0",
@@ -149,11 +148,12 @@
     "xss": "^0.3.5"
   },
   "devDependencies": {
+    "browser-sync": "^2.23.6",
     "chai": "^4.1.0",
     "cli": "~1.0.1",
     "colors": "^1.1.2",
     "commander": "^2.11.0",
-    "easy-livereload": "^1.2.0",
+    "connect-browser-sync": "^2.1.0",
     "eslint": "^4.18.2",
     "eslint-plugin-react": "^7.7.0",
     "mocha": "^5.0.0",
@@ -165,9 +165,9 @@
     "webpack-dll-bundles-plugin": "^1.0.0-beta.5"
   },
   "engines": {
-    "node": ">=6.11 <7",
-    "npm": ">=4.6 <5",
-    "yarn": "^1.1.0"
+    "node": ">=6.11 <9",
+    "npm": ">=4",
+    "yarn": "^1.3.1"
   },
   "config": {
     "blanket": {