Performance: Flexible file watch & browserSync settings

Cyclodex commented 6 years ago

Context

We are using the styleguide as part of a bigger project, which doesn't allow to use the styleguide as straight forward. To improve the performance I made the fileWatchPaths and BrowserSync options available to the configuration, allow to be more precise. On the browsr, it also looks not necessary to watch for all files outside of the output directory.

My styleguide is now crashing much less and the performance is much better.

Changes

Adding new config options to add

"fileWatchPaths"
"fileWatchOptions"
"browserSyncOptions"

This allows to be more precise with watching for files and improves performance if done correctly. Documentation still needs some examples, if you like it.

Example config entries

Here a quick example settings:

fileWatchPaths:
    - inputFolder/folder1/folder1_sub
    - inputFolder/folder2/folder2_sub

# Further options for chokidar.watch (not yet used/tested)
#fileWatchOptions:

# Browsersync Options
browserSyncOptions:
    files:
        - outputFolder/*.*

If you like it this change, feel free to review and accept this PR ;)

Feature Sponsored by

This feature/PR is sponsored by the company I work: Garaio AG

mpetrovich commented 5 years ago

What specific fileWatch and browserSync custom options have you found to be helpful for your projects?

mpetrovich commented 5 years ago

Generally, these changes look good. Either you or I will need to apply them to the latest code with some brief testing.

Cyclodex commented 5 years ago

We should re-use the already existing getConfig function, I will do this later.

Cyclodex commented 5 years ago

Hi @mpetrovich , I finally got the time to update the code. I also fixed the duplication code, and made the getConfig function exportable and reusable. I also added a test for this function. We could further improve it and make the default config loaded within the function instead of before the function, but let's keep this PR small. We could split up the functionality (of the whole stylemark app) a bit better to generate more tests more easily, but I am not sure how you are thinking about that...

Please review & test.

Cyclodex commented 5 years ago

To the project setup I have, and how the config settings would help:

Its a bit a complicated setup, related to Visual Studio Solutions / Projects setup... ;) I changed the names so it is an example and not real data.

package.json
SubProjectA
SubProjectA.Web
SubProjectB
SubProjectB.Web
- FolderA
- FolderB
- Content
- images
- dist
- src
  - scss
- Scripts
- dist
- src
  - libs
  - XYScripts
- Styleguide

Lets ignore why its like that, I just took this over ;) So now to make things work more smoother with the styleguide, I use options like that:

fileWatchPaths:
    - SubProjectB.Web\Content\src\
    - SubProjectB.Web\Scripts\src\XYScripts

browserSyncOptions:
    files:
        - SubProjectB.Web/Styleguide/*.*

excludeDir:
- dist

baseDir: SubProjectB.Web

assets:
 - Content\images

Without this, I had a not well performing styleguide because of so many files laying around.

Hope this helps. Maybe we should have some example data in a branch or similar to test better... Because the current branch does not have any example setup or data for better testing...

mpetrovich / stylemark