search

mpetrovich / stylemark

Generate interactive style guides from Markdown.
MIT License
218 stars 35 forks source link

Styleguide reloads on source map change #40

Open mrdziuban opened 6 years ago

mrdziuban commented 6 years ago

I'm seeing behavior when using the -w flag where the browser reloads twice due to the output CSS file being written, then the source map being written. If I disable source map generation, the browser only reloads once. I've tried using the match config option in .stylemark.yml, but I can't seem to get it to work. These are the patterns I've tried:

match: \.css$
match: "\\.css$"
match: css$
match: "css$"

Any idea how I could get this to work? Thanks in advance!

mpetrovich commented 6 years ago

The browser is likely reloading because the source map is taking longer than 2 seconds to create, which causes Stylemark to rebuild the styleguide which subsequently triggers a browser refresh.

Have you tried increasing how long Stylemark waits before rebuilding the styleguide? This is also controlled via the -w flag:

stylemark -i <input> -w [<delay>] …
Name Description
-w (optional) Will watch for file changes in <input> and rebuild the style guide, waiting at least <delay> milliseconds between successive changes (defaults to 2000)
mrdziuban commented 6 years ago

Thanks for the quick response, @mpetrovich. Increasing the timeout does work, but this doesn't seem like an ideal solution. Is there a way to exclude the source map from the watched files?

mpetrovich commented 6 years ago

Here's what's happening:

  1. Your match: "\\.css$" configuration will indeed only process .css files. This is similar to the default match value: "\\.(css|less|scss|…|js|jsx)$". This just means that Stylemark will parse only .css files for documentation.

  2. However, during styleguide generation everything specified in the assets config will be copied to the <output> directory.

  3. The browser autoloader watches the entire <output> path for changes.

What it sounds like you want is either:

  1. The ability to exclude specific files (ie. globs) from being copied to the <output> path by supporting exclusions in the assets config (eg. assets: !*.map).
  2. The ability to exclude specific files (ie. globs) from being watched by the browser for changes.

Approach #1 sounds like the best answer. What do you think?

Cyclodex commented 6 years ago

(same as in #44) but I want to mention it here. (@mrdziuban )

I also had big issues with the performance. I forked and tried to improved it a bit for me. It is a lot more flexible with setting which files you want to watch, both on file(stylemark) and browserSync side. I have nearly no problems now and performance is well.

I created now a PR. Maybe it might help you guys as well: