Browser-Sync CSS files Cache?

Question

I have the following setup

• Host
  • Windows 10
  • BrowserSync 2.9.11 in Proxy Mode (localhost:8888)

• VirtualBox (as local development server)

  • Debian 7
  • Apache 2.2.22 and PHP 5.6.14-1
  • Port 80 is forwarded to Host:8888
  • shared folder from Host where served files are located

• Browsersync is working and CSS is injected (I see the notification)

  • currently served via gulp, but also without gulp, the problem is there
  • see the gulpfile.js

 var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), notify = require('gulp-notify'), cache = require('gulp-cache'), browserSync = require('browser-sync').create(), reload = browserSync.reload; // processing sass into css - 'gulp styles' gulp.task('styles', function() { return sass('css/*.scss', { style: 'compressed' }) .pipe(autoprefixer('last 3 version')) .on('error', function (err) { console.log(err.message); }) .pipe(gulp.dest('css')) .pipe(reload({stream: true})); /*.pipe(notify({ message: 'Styles task complete' }));*/ }); // listening for changes to scss and images - 'gulp watch' gulp.task('watch', function() { gulp.watch('css/**/*.scss', ['styles']); }); // live reload via browser-sync - 'gulp serve' gulp.task('serve', function() { browserSync.init({ browser: "Firefox", open: "external", proxy: "localhost:8888", startPath: "fatfree-master" }); gulp.watch("css/**/*.scss", ['styles']); gulp.watch([ "app/views/**/*.html", "**/*.php", "**/*.ini" ]).on('change', reload); }); // default tasks enacted by typing 'gulp' gulp.task('default', function() { gulp.start('styles'); }); 

Problem

• Changes to the CSS file are not injected correctly
  • If I change a few lines, BrowserSync detects changes and injects CSS, but this CSS is old
  • If I change a large part of the css file, BrowserSync detects changes and injects CSS( the correct one )
• I have tried a different Server(Nginx) but the problem is still there
• Here are some strange things
  • If I use the internal php server( php -s ), the injected CSS is correct
  • If I use Apache directly and not via BrowserSync-Proxy, the CSS is correct
  • The file in Host/Guest is changed, checked via nano/editor
  • Restarting BrowserSync does not change the behaviour, only restarting the guest machine

Solution?

Please help me. I would love to use BrowserSync but with these problems, it is not real help for me.

Answer 1

I found the solution. Virtualbox was the problem, it caches some files internaly. Problem described here

Answer 2

I had the exact same issue and it wasn't gulp at all. I had Mod PageSpeed Apache plugin installed. It caches CSS and JS files for page serving only. So if you downloaded files via SSH or FTP they would still be the live version not the page cached versions. Disabling Mod PageSpeed fixed my issue.

apache2/conf/pagespeed.conf
 //turn it off
   ModPagespeed off