Every time I open the BrowserSync docs I find something awesome.
Versions used below
BrowserSync is a great module that I use for a static web server with auto-reload. It does a lot more than auto-reload but that’s my main use for it.
When paired with Gulp, BrowserSync can inject css into a page – no page reload needed.
Given this project structure
Here is a simple gulp build that uses BrowserSync to serve static files and reload browsers when css or html changes.
This is nice but the browser reloads the entire page when the css changes.
BrowserSync can do better.
Injecting Styles into the Page
With a small change to the watches it will push css updates without a page reload.
This is a very simple example but you can move the call to
browserSync.stream() elsewhere in more complex builds. As long as css files are going in, it should work.
Using a CSS Preprocessor
We’ll use Sass to generate css. Now the project looks like
Bringing in a CSS preprocessor requires another small change to the build.
You could do something similar for Less and Stylus.