Merge pull request #274 from cj/cleaner_terminal

cleaner build/error outputs for terminal

lib/build.js

@@ -13,6 +13,8 @@ import { createBundleRenderer } from 'vue-server-renderer'
 import { join, resolve, sep } from 'path'
 import clientWebpackConfig from './webpack/client.config.js'
 import serverWebpackConfig from './webpack/server.config.js'
+import chalk from 'chalk'
+import PostCompilePlugin from 'post-compile-webpack-plugin'
 const remove = pify(fs.remove)
 const readFile = pify(fs.readFile)
 const writeFile = pify(fs.writeFile)
@@ -36,6 +38,12 @@ const r = function () {
   args = args.map(normalize)
   return wp(resolve.apply(null, args))
 }
+const webpackStats = {
+  chunks: false,
+  children: false,
+  modules: false,
+  colors: true
+}
 // force green color
 debug.color = 2
 
@@ -327,24 +335,39 @@ function getWebpackServerConfig () {
 
 function createWebpackMiddleware () {
   const clientConfig = getWebpackClientConfig.call(this)
+  const host = process.env.HOST || '127.0.0.1'
+  const port = process.env.PORT || '3000'
   // setup on the fly compilation + hot-reload
   clientConfig.entry.app = _.flatten(['webpack-hot-middleware/client?reload=true', clientConfig.entry.app])
   clientConfig.plugins.push(
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoEmitOnErrorsPlugin()
+    new webpack.NoEmitOnErrorsPlugin(),
+    new PostCompilePlugin(stats => {
+      process.stdout.write('\x1Bc')
+
+      if (stats.hasErrors() || stats.hasWarnings()) {
+        console.log(stats.toString('errors-only')) // eslint-disable-line no-console
+        console.log() // eslint-disable-line no-console
+        console.log(chalk.bgRed.black(' ERROR '), 'Compiling failed!') // eslint-disable-line no-console
+      } else {
+        console.log(stats.toString(webpackStats)) // eslint-disable-line no-console
+        console.log(chalk.bold(`\n> Open http://${host}:${port}\n`)) // eslint-disable-line no-console
+        console.log(chalk.bgGreen.black(' DONE '), 'Compiled successfully!') // eslint-disable-line no-console
+      }
+      console.log() // eslint-disable-line no-console
+    })
   )
   const clientCompiler = webpack(clientConfig)
   // Add the middleware to the instance context
   this.webpackDevMiddleware = pify(require('webpack-dev-middleware')(clientCompiler, {
     publicPath: clientConfig.output.publicPath,
-    stats: {
+    stats: webpackStats,
-      colors: true,
+    quiet: true,
-      chunks: false
-    },
-    quiet: false,
     noInfo: true
   }))
-  this.webpackHotMiddleware = pify(require('webpack-hot-middleware')(clientCompiler))
+  this.webpackHotMiddleware = pify(require('webpack-hot-middleware')(clientCompiler, {
+    log: () => {}
+  }))
 }
 
 function webpackWatchAndUpdate () {
@@ -354,11 +377,8 @@ function webpackWatchAndUpdate () {
   const serverCompiler = webpack(serverConfig)
   const outputPath = join(serverConfig.output.path, serverConfig.output.filename)
   serverCompiler.outputFileSystem = mfs
-  this.webpackServerWatcher = serverCompiler.watch({}, (err, stats) => {
+  this.webpackServerWatcher = serverCompiler.watch({}, (err) => {
     if (err) throw err
-    stats = stats.toJson()
-    stats.errors.forEach(err => console.error(err)) // eslint-disable-line no-console
-    stats.warnings.forEach(err => console.warn(err)) // eslint-disable-line no-console
     createRenderer.call(this, mfs.readFileSync(outputPath, 'utf-8'))
   })
 }
@@ -369,7 +389,7 @@ function webpackRunClient () {
     const serverCompiler = webpack(clientConfig)
     serverCompiler.run((err, stats) => {
       if (err) return reject(err)
-      console.log('[nuxt:build:client]\n', stats.toString({ chunks: false, colors: true })) // eslint-disable-line no-console
+      console.log('[nuxt:build:client]\n', stats.toString(webpackStats)) // eslint-disable-line no-console
       if (stats.hasErrors()) return reject('Webpack build exited with errors')
       resolve()
     })
@@ -382,7 +402,7 @@ function webpackRunServer () {
     const serverCompiler = webpack(serverConfig)
     serverCompiler.run((err, stats) => {
       if (err) return reject(err)
-      console.log('[nuxt:build:server]\n', stats.toString({ chunks: false, colors: true })) // eslint-disable-line no-console
+      console.log('[nuxt:build:server]\n', stats.toString(webpackStats)) // eslint-disable-line no-console
       if (stats.hasErrors()) return reject('Webpack build exited with errors')
       const bundlePath = join(serverConfig.output.path, serverConfig.output.filename)
       readFile(bundlePath, 'utf8')

package.json

@@ -56,6 +56,7 @@
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^1.1.3",
     "chokidar": "^1.6.1",
     "co": "^4.6.0",
     "css-loader": "^0.26.1",
@@ -71,6 +72,7 @@
     "memory-fs": "^0.4.1",
     "path-to-regexp": "^1.7.0",
     "pify": "^2.3.0",
+    "post-compile-webpack-plugin": "^0.1.1",
     "progress-bar-webpack-plugin": "^1.9.3",
     "serialize-javascript": "^1.3.0",
     "serve-static": "^1.11.2",