Gulp.js renders CSS from Sass faster than Middleman can display it

#1

Is there any way to increase the speed at which Middleman serves (or becomes aware of) asset file changes?

The animated gif below demonstrates what I mean.

See how I’m saving a Scss file on the left which spits out a compiled and Autoprefixed CSS file on the right almost instantaneously?

Then BrowserSync sees that change and injects it, but the color is wrong.

It seems that Middleman server caches the old file for 500-1000ms, so even though the CSS is correct on the filesystem, it’s outdated in the browser.

I tried playing with middleman --latency=0.1, but didn’t seem to make much difference. The only thing that works is setting BrowserSync delay to something conservative like 500-1000ms, but that’s unfortunate when Gulp can spit out CSS in under 100ms.

Middleman slow CSS pickup.gif1339×546 1.17 MB

You can clone my sample project here: https://github.com/NathanBowers/mm-template/releases/tag/v1.0.0

Note that I’ve locked the MM gem to 4.1.2 because there’s apparently a bug in 4.1.3 with external pipeline and Gulp. https://github.com/middleman/middleman/issues/1844

Also try playing with BrowserSync’s reloadDelay: 200 in the gulpfile.js.

1 Like
Gulp and Middleman 4
#2

Thanks for the template! This is something that I was trying to figure out myself and saved me some hours.

#3

Your template is greaaaat! thank you :slight_smile:

#4

Template has since been updated, and this concurrency problem is resolved.

The trick was to use Gulp ‘watch’ to build Sass and JS, but to watch output CSS, JS, and HTML/templates with Browsersync.