Add watch mode (#322)

Author: egoist

bin/vue-build

@@ -29,9 +29,10 @@ program
   .option('--port [port]', 'Server port')
   .option('--host [host]', 'Server host', 'localhost')
   .option('--prod, --production', 'Build for production')
+  .option('-w, --watch', 'Run in watch mode')
   .option('-m, --mount', 'Auto-create app instance from given component, true for `.vue` file')
   .option('-c, --config [file]', 'Use custom config file')
-  .option('-w, --webpack [file]', 'Use custom webpack config file')
+  .option('--wp, --webpack [file]', 'Use custom webpack config file')
   .option('--disable-config', 'You do not want to use config file')
   .option('--disable-webpack-config', 'You do not want to use webpack config file')
   .option('-o, --open', 'Open browser')
@@ -73,7 +74,8 @@ var options = merge({
   mount: program.mount,
   proxy: program.proxy,
   production: program.production,
-  lib: program.lib
+  lib: program.lib,
+  watch: program.watch
 })
 
 function help () {
@@ -254,12 +256,12 @@ if (production) {
     new ExtractTextPlugin(options.lib ? `${replaceExtension(options.entry, '.css')}` : '[name].[contenthash:8].css')
   )
 } else {
+  if (!options.watch) {
+    webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin())
+    webpackConfig.entry.client.unshift(require.resolve('webpack-hot-middleware/client') + '?reload=true')
+  }
   webpackConfig.devtool = 'eval-source-map'
-  webpackConfig.entry.client.unshift(
-    require.resolve('webpack-hot-middleware/client') + '?reload=true'
-  )
   webpackConfig.plugins.push(
-    new webpack.HotModuleReplacementPlugin(),
     new FriendlyErrorsPlugin(),
     new PostCompilePlugin(() => {
       console.log(`> Open http://${options.host}:${options.port}`)
@@ -300,36 +302,15 @@ try {
 
 checkEntryExists(options.entry)
 
-if (production) {
+if (options.watch) {
+  console.log('> Running in watch mode')
+  rm(path.join(options.dist, '*'))
+  compiler.watch({}, (err, stats) => handleBuild(err, stats, true))
+} else if (production) {
   console.log('> Creating an optimized production build:\n')
   // remove dist files but keep that folder in production mode
   rm(path.join(options.dist, '*'))
-  compiler.run((err, stats) => {
-    if (err) {
-      process.exitCode = 1
-      return console.error(err.stack)
-    }
-    // output warning
-    if (stats.hasWarnings() && !stats.hasErrors()) {
-      console.error(stats.toString('errors-only'))
-    }
-    // output wanring and errors
-    if (stats.hasErrors()) {
-      process.exitCode = 1
-      return console.error(stats.toString('errors-only'))
-    }
-    console.log(stats.toString({
-      chunks: false,
-      children: false,
-      modules: false,
-      colors: true
-    }))
-    console.log(`\n${chalk.bgGreen.black(' SUCCESS ')} Compiled successfully.\n`)
-    console.log(`The ${chalk.cyan(options.dist)} folder is ready to be deployed.`)
-    console.log(`You may also serve it locally with a static server:\n`)
-    console.log(`  ${chalk.yellow('npm')} i -g serve`)
-    console.log(`  ${chalk.yellow('serve')} ${options.dist}\n`)
-  })
+  compiler.run(handleBuild)
 } else {
   var server = createServer(compiler, options)
 
@@ -369,3 +350,30 @@ function replaceExtension (entry, ext) {
 function getLibraryName (fileName) {
   return fileName.replace(/[-_.]([\w])/, (_, p1) => p1.toUpperCase())
 }
+
+function handleBuild (err, stats, watch) {
+  if (watch) {
+    process.stdout.write('\x1Bc')
+  }
+  if (err) {
+    process.exitCode = 1
+    return console.error(err.stack)
+  }
+  if (stats.hasErrors() || stats.hasWarnings()) {
+    process.exitCode = 1
+    return console.error(stats.toString('errors-only'))
+  }
+  console.log(stats.toString({
+    chunks: false,
+    children: false,
+    modules: false,
+    colors: true
+  }))
+  console.log(`\n${chalk.bgGreen.black(' SUCCESS ')} Compiled successfully.\n`)
+  if (!watch) {
+    console.log(`The ${chalk.cyan(options.dist)} folder is ready to be deployed.`)
+    console.log(`You may also serve it locally with a static server:\n`)
+    console.log(`  ${chalk.yellow('npm')} i -g serve`)
+    console.log(`  ${chalk.yellow('serve')} ${options.dist}\n`)
+  }
+}

docs/build.md

@@ -52,7 +52,15 @@ This will create an optimized bundle in UMD format, and the name of exported lib
 
 Note that in some cases you may use [`externals`](https://webpack.js.org/configuration/externals/) to exclude some modules from your bundle.
 
-For more CLI usages:
+**Watch mode:**
+
+```bash
+$ vue build index.js --watch
+```
+
+It's similar to `development mode` but does not add hot-reloading support and uses a real file system.
+
+**For more CLI usages:**
 
 ```bash
 $ vue build -h