improve cli loading

lib/builder/builder.js

@@ -17,6 +17,7 @@ const { Options } = require('../common')
 const clientWebpackConfig = require('./webpack/client.config.js')
 const serverWebpackConfig = require('./webpack/server.config.js')
 const upath = require('upath')
+const ORA = require('ora')
 
 const debug = Debug('nuxt:build')
 debug.color = 2 // Force green color
@@ -36,6 +37,7 @@ module.exports = class Builder {
     this.webpackHotMiddleware = null
     this.filesWatcher = null
     this.customFilesWatcher = null
+    this.spinner = new ORA()
 
     // Mute stats on dev
     this.webpackStats = this.options.dev ? false : this.options.build.stats
@@ -92,6 +94,8 @@ module.exports = class Builder {
     }
     this._buildStatus = STATUS.BUILDING
 
+    this.spinner.start('Starting build')
+
     // Wait for nuxt ready
     await this.nuxt.ready()
 
@@ -115,8 +119,10 @@ module.exports = class Builder {
       }
     }
 
+    this.spinner.succeed()
+    this.spinner.start(`Generating nuxt files...`)
+
     debug(`App root: ${this.options.srcDir}`)
-    debug(`Generating ${this.options.buildDir} files...`)
 
     // Create .nuxt/, .nuxt/components and .nuxt/dist folders
     await remove(r(this.options.buildDir))
@@ -128,6 +134,11 @@ module.exports = class Builder {
     // Generate routes and interpret the template files
     await this.generateRoutesAndFiles()
 
+    this.spinner.succeed()
+
+    this.spinner.start('Building project...')
+    this.spinner.stopAndPersist()
+
     // Start webpack build
     await this.webpackBuild()
 

lib/builder/webpack/plugins/progress.js

@@ -2,6 +2,8 @@ const ProgressBar = require('node-progress-bars')
 const webpack = require('webpack')
 
 module.exports = function ProgressPlugin({ color, pcolor, title }) {
+  muteConsole()
+
   // https://github.com/bubkoo/ascii-progress
   const bar = new ProgressBar({
     schema: `${title}.${color} >.grey :filled.${pcolor}:blank.white :msg.grey`,
@@ -14,5 +16,50 @@ module.exports = function ProgressPlugin({ color, pcolor, title }) {
 
   return new webpack.ProgressPlugin((percent, msg) => {
     bar.update(percent, { msg })
+
+    if (percent >= 0.99) {
+      restoreConsole()
+    }
   })
 }
+
+// -----------------------------
+
+let consoleSpied = false
+
+const consoleQueue = {
+  log: [],
+  error: []
+}
+
+const silentConsole = {
+  log: (...args) => consoleQueue.log.push(args),
+  error: (...args) => consoleQueue.error.push(args)
+}
+
+const muteConsole = () => {
+  if (consoleSpied) return
+  consoleSpied = true
+
+  Object.assign(console, silentConsole)
+}
+
+const originalConsole = {
+  log: console.log, // eslint-disable-line no-console
+  error: console.error // eslint-disable-line no-console
+}
+
+const restoreConsole = () => {
+  if (!consoleSpied) return
+  consoleSpied = false
+
+  Object.assign(console, originalConsole)
+
+  const l = consoleQueue.log
+  consoleQueue.log = []
+  l.forEach(args => console.log(...args)) // eslint-disable-line no-console
+
+  const e = consoleQueue.error
+  consoleQueue.error = []
+  e.forEach(args => console.error(...args)) // eslint-disable-line no-console
+}

package.json

@@ -91,6 +91,7 @@
     "minimist": "^1.2.0",
     "node-progress-bars": "^1.0.8",
     "opencollective": "^1.0.3",
+    "ora": "^2.0.0",
     "postcss": "^6.0.17",
     "postcss-cssnext": "^3.1.0",
     "postcss-import": "^11.1.0",
@@ -98,6 +99,7 @@
     "postcss-loader": "^2.1.0",
     "postcss-url": "^7.3.0",
     "pretty-error": "^2.1.1",
+    "progress": "^2.0.0",
     "semver": "^5.5.0",
     "serialize-javascript": "^1.4.0",
     "serve-static": "^1.13.2",

yarn.lock

@@ -1708,7 +1708,7 @@ cli-cursor@^2.1.0:
   dependencies:
     restore-cursor "^2.0.0"
 
-cli-spinners@^1.0.0:
+cli-spinners@^1.0.0, cli-spinners@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.1.0.tgz#f1847b168844d917a671eb9d147e3df497c90d06"
 
@@ -2354,6 +2354,12 @@ default-require-extensions@^1.0.0:
   dependencies:
     strip-bom "^2.0.0"
 
+defaults@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
+  dependencies:
+    clone "^1.0.2"
+
 define-properties@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
@@ -4611,7 +4617,7 @@ lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5,
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
 
-log-symbols@^2.1.0:
+log-symbols@^2.1.0, log-symbols@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
   dependencies:
@@ -5279,6 +5285,17 @@ optionator@^0.8.1, optionator@^0.8.2:
     type-check "~0.3.2"
     wordwrap "~1.0.0"
 
+ora@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-2.0.0.tgz#8ec3a37fa7bffb54a3a0c188a1f6798e7e1827cd"
+  dependencies:
+    chalk "^2.3.1"
+    cli-cursor "^2.1.0"
+    cli-spinners "^1.1.0"
+    log-symbols "^2.2.0"
+    strip-ansi "^4.0.0"
+    wcwidth "^1.0.1"
+
 os-browserify@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
@@ -7831,6 +7848,12 @@ watchpack@^1.5.0:
     graceful-fs "^4.1.2"
     neo-async "^2.5.0"
 
+wcwidth@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
+  dependencies:
+    defaults "^1.0.3"
+
 webidl-conversions@^4.0.1, webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"