use node-dev and easy-livereload

.node-dev.json

@@ -0,0 +1,5 @@
+{
+  "ignore": [
+    "package.json"
+  ]
+}

config/webpack.common.js

@@ -42,6 +42,18 @@ module.exports = function (options) {
             loader: 'babel-loader?cacheDirectory',
           }]
         },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+          // comment out 'include' spec for crowi-plugins
+          // include: [helpers.root('resource')]
+        },
+        {
+          test: /\.scss$/,
+          use: ['style-loader', 'css-loader', 'sass-loader'],
+          // comment out 'include' spec for crowi-plugins
+          // include: [helpers.root('resource')]
+        },
         /*
          * File loader for supporting images, for example, in CSS files.
          */

config/webpack.dev.js

@@ -16,6 +16,7 @@ const AssetsPlugin = require('assets-webpack-plugin');
 const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;
+const LiveReloadPlugin = require('webpack-livereload-plugin');
 
 /*
  * Webpack Constants
@@ -34,9 +35,10 @@ module.exports = function (options) {
   return webpackMerge(commonConfig({ env: ENV }), {
     devtool: 'cheap-module-source-map',
     entry: {
-      dev: WATCH ?
-        ['./resource/js/dev', 'reload/lib/reload-client']:
-        ['./resource/js/dev'],
+      // dev: WATCH ?
+      //   ['./resource/js/dev', 'reload/lib/reload-client']:
+      //   ['./resource/js/dev'],
+      dev: './resource/js/dev',
     },
     output: {
       path: helpers.root('public/js'),
@@ -50,16 +52,6 @@ module.exports = function (options) {
     },
     module: {
       rules: [
-        {
-          test: /\.css$/,
-          use: ['style-loader', 'css-loader'],
-          include: [helpers.root('resource')]
-        },
-        {
-          test: /\.scss$/,
-          use: ['style-loader', 'css-loader', 'sass-loader'],
-          include: [helpers.root('resource')]
-        },
       ],
     },
     plugins: [
@@ -80,6 +72,8 @@ module.exports = function (options) {
         })
       }),
 
+      new LiveReloadPlugin(),
+
       new webpack.NoEmitOnErrorsPlugin(),
 
     ]

config/webpack.prod.js

@@ -33,16 +33,6 @@ module.exports = function (env) {
     },
     module: {
       rules: [
-        {
-          test: /\.css$/,
-          use: ['style-loader', 'css-loader'],
-          include: [helpers.root('resource')]
-        },
-        {
-          test: /\.scss$/,
-          use: ['style-loader', 'css-loader', 'sass-loader'],
-          include: [helpers.root('resource')]
-        },
       ]
     },
     plugins: [

lib/crowi/dev.js

@@ -21,31 +21,21 @@ class CrowiDev {
   }
 
   setupTools() {
-    if (helpers.hasProcessFlag('autorefresh')) {
-      this.setupReload();
-    }
+    this.setupEasyLiveReload();
   }
 
-  setupReload() {
-    const reload = require('reload');
-    const chokidar = require('chokidar');
-
-    // refreshing browser settings
-    // see: https://github.com/jprichardson/reload
-    const reloadServer = reload(this.server, this.app);
-
-    const watcher = chokidar.watch([
-      path.join(this.crowi.viewsDir),
-      path.join(this.crowi.publicDir),
-    ]);
-
-    // fire reload() when changes detected
-    watcher.on('all', (event, path) => {
-      reloadServer.reload();
-    });
-
-    debug(`watching for live-reloading -> ${this.crowi.libDir}`);
+  setupEasyLiveReload() {
+    const livereload = require('easy-livereload');
+    this.app.use(livereload({
+      watchDirs: [
+        path.join(this.crowi.viewsDir),
+      ],
+      checkFunc: function(x) {
+        return /\.(html|css|js)$/.test(x);
+      },
+    }));
   }
+
 }
 
 module.exports = CrowiDev

package.json

@@ -104,8 +104,10 @@
     "concurrently": "^3.4.0",
     "copy-webpack-plugin": "^4.0.0",
     "css-loader": "^0.27.1",
+    "easy-livereload": "^1.2.0",
     "express-webpack-assets": "0.0.2",
     "mocha": "~2.2.0",
+    "node-dev": "^3.1.3",
     "optimize-js-plugin": "0.0.4",
     "proxyquire": "~1.4.0",
     "reload": "^1.1.1",
@@ -122,7 +124,7 @@
   },
   "license": "MIT",
   "scripts": {
-    "build:dev:withoutclean": "webpack --config config/webpack.dev.js --progress --profile",
+    "build:dev:watch": "npm run build:dev -- --watch",
     "build:dev": "npm run clean:public && npm run build:dev:withoutclean",
     "build:prod": "npm run clean:public && webpack --config config/webpack.prod.js  --progress --profile --bail",
     "build": "npm run build:dev",
@@ -131,14 +133,12 @@
     "clean": "npm cache clean && npm run rimraf -- public/js dll",
     "prestart": "npm run build:prod",
     "rimraf": "rimraf",
-    "server:watch": "supervisor --watch lib -- app.js",
+    "server:watch": "node-dev app.js",
     "server:prod": "node app.js --production",
     "server": "node app.js",
-    "watch": "concurrently --kill-others \"npm run build:dev:withoutclean -- --watch\" \"npm run server:watch -- --autorefresh\"",
     "start": "npm run server:prod",
     "test": "",
-    "webpack": "webpack",
-    "webpack:plugin": "webpack --config webpack.plugin.config.js"
+    "webpack": "webpack"
   },
   "bugs": {
     "url": "https://github.com/crowi/crowi/issues"