Allow silent/minimal/standard output when building

[kjleitz]

What problem does this feature solve?

First: thank you guys so much for your time and effort on this project. It's seriously a life-saver.

So, I'm not sure if this is a feature request or actually kind of a bug report... maybe a little of both. But I think whatever bug I'm experiencing would be made moot were this feature to exist.

I'm looking for an option for "minimal output" from vue-cli-service build [--watch] which does not have a progress status line which is neither animated nor changed in-place.

When running vue-cli-service build --watch, it does something funky with the standard output. First you see "building for development", then a progress status line which changes in place:

 34% building 204/220 modules 16 active ...e_modules/core-js/modules/_string-at.js

...before finally logging the build output, something like:

 DONE  Compiled successfully in 10200ms1:42:48 PM

  File            Size                          Gzipped

  dist/blah.js    13645.43 KiB                  2565.83 KiB
  dist/app.js     980.16 KiB                    235.21 KiB

  Images and other types of assets omitted.

  DONE  Build complete. Watching for changes...

A similar thing happens when doing a plain, unwatched, vue-cli-service build.

If I try to redirect the output to a file and tail that file (e.g., yarn run vue-cli-service build > foo.log, tail -f foo.log), I still see the dynamically-replaced progress line appear in the terminal where I ran the build command, and in foo.log I see a logged line from the TypeScript type-checking service starting up, and then I see the build output appear appended to the file. When I make a change to a watched file (if I use build --watch), I see the progress line in the previous terminal appear and I see another build "DONE" output in the log file.

See the following gif for an example:

Also, if I use a process-management program (e.g., node-foreman) to start the vue-cli-service build --watch, it logs a line for every single time the progress line changes, which easily fills my terminal buffer in just a few seconds—thousands of lines of output... 10-11 lines to one "XX% building ..." line. Even if the feature provided a way for each "1% building ...", "2% building ...", etc. line to be simply appended to standard output, that would be fine (for me). I can always filter the lines by piping to grep/sed/awk/whatever if I'm logging to a file or running the process with foreman. But currently there's no way to do that.

See the following gif for an example:

So, if there were a way to simply log output "traditionally", line-by-line to STDOUT, without the observed hijacking (not sure what's going on), it would make it a heck of a lot easier to use vue-cli-service with other common development tools and basic utilities. I'm having a hard time setting up a simple local dev setup with vue-cli that reflects the workflow/practices of my team, so this feature would make our lives a lot smoother.

What does the proposed API look like?

I'm picturing something like:

vue-cli-service build --verbosity silent  # no output
vue-cli-service build --verbosity minimal # no progress, appends every line instead of modifying in-place
vue-cli-service build --verbosity log     # includes progress but appends every line instead of modifying in-place
vue-cli-service build --verbosity default # business as usual

But I'm sure there's a better idea than that. Not quite sure how it should look.

[AshGrowem]

Please allow this for vue-cli-service serve as well!

According to https://cli.vuejs.org/config/#devserver

All options for webpack-dev-server are supported.

But trying to set any output options like devServer.stats and devServer.noInfo via vue.config.js have no effect.

A simple --silent and --verbose option for both serve and build would be awesome!

[AshGrowem]

Alternative Solution

Similar to #1284.
@kjleitz The following will at least disable vue-cli-service's progress output until --silent and --verbose options can be properly implemented. I've also added a great replacement in the meantime, simple-progress-webpack-plugin, which does pretty much everything you requested.

// vue.config.js
// ...

module.exports = {
  chainWebpack: config => {
    // remove vue-cli-service's progress output
    config.plugins.delete('progress')
    // optionally replace with another progress output plugin
    // `npm i -D simple-progress-webpack-plugin` to use
    config.plugin('simple-progress-webpack-plugin').use(require.resolve('simple-progress-webpack-plugin'), [
      {
        format: 'minimal', // options are minimal, compact, expanded, verbose
      },
    ])
  }
}

For those interested in PR's...

Here's the current implementation defining the progress output, and here is where it's instantiated. It's just a customization of webpack's internal ProgressPlugin.

[kjleitz]

@ashrafhadden 👍 👍 👍 I'll definitely check out the plugin!

[vacri]

The 'build' action definitely needs a 'no progress bar' option - for a lot of CI systems, they just append all output text to log, and a progress bar is a lot of output text as it is rewritten constantly. An append-only log doesn't care about the 'clear line' character used in dynamic status bars.

I've got some builds at the moment that have 1.2MB worth of buildlog... about 1.1MB of which is progress bar spam.

Just piping up with another use case...

[kjleitz]

bump! :)

[mkorostoff]

I was able to accomplish basically what this thread is asking for simply by passing the --silent flag at the command line, e.g.

vue-cli-service build --watch --silent

This has the advantage of still printing errors, but doesn't give me an ultra long list of all the file chunks that have been built.

[georgyfarniev]

Is there any updates about it?

[kjleitz]

@mkorostoff that didn't change anything for me on v3.11.0 (still has the animated/changed-in-place progress line). Regardless, though, a --silent option doesn't satisfy the issue—I still do need success/informational output, just output that's not... broken.

[vpiskunov]

The verbose line logging now started happening for me in Vue-UI (of CLI) - didn't happen before - any way to fix?

Doesn't happen when running same command from terminal though.

[geekytime]

It took me some digging to figure it out, but there does seem to be a way to get this working with serve. I tried to explain the situation here: #4557 (comment)

[whme]

Please allow this for vue-cli-service test:unit as well!

According to https://cli.vuejs.org/config/#devserver

All options for webpack-dev-server are supported.

But trying to set any output options like devServer.stats and devServer.noInfo via vue.config.js have no effect.

A simple --silent and --verbose option for serve, build and test:unit would be awesome!