Gulpfile changes css but doesnt save it

Question

I'm trying to create a gulpfile that works with scss and php.

All went well, but i tested it by changing an h1 from red to yellow. Browsersync kicked in. H1 was now yellow. Changed it to green. And it turned green. Yay! It works.

But when i change a php file, all css changed are gone. Even when i delete my style.css file, it doenst work 100%. Its like it caches the css?! I dont know where to look for the solution on this one.

Can anyone help me?

This is my gulpfile:

var gulp = require('gulp'),
connect = require('gulp-connect-php'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin'),
cache = require('gulp-cache');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');

gulp.task('browser-sync', function () {
connect.server({}, function () {
    browserSync({
        proxy: 'raak.test'
    });
  });
});

gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('images', function () {
  gulp.src('src/img/*')
    .pipe(cache(imagemin({optimizationLevel: 3, progressive: true, interlaced: true})))
    .pipe(gulp.dest('assets/img/'));
});

gulp.task('styles', function () {
    var processors = [
       autoprefixer,
       cssnano
];

gulp.src(['src/css/style.scss'])
    .pipe(plumber({
        errorHandler: function (error) {
            console.log(error.message);
            this.emit('end');
        }
    }))
    .pipe(sass())
    .pipe(postcss(processors))
    .pipe(gulp.dest('assets/css/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('assets/css/'))
    .pipe(browserSync.stream())
});

gulp.task('default', ['browser-sync'], function () {
    gulp.watch("**/*.scss", ['styles']);
    gulp.watch("**/*.php", ['bs-reload']);
});

Answer 1

Its like it caches the css

Have you investigated this? I'd make a comment but my frickin points suck. If you go into dev tools (right click 'inspect') in chrome you can do a hard-reload by holding refresh and clicking the last option. This will clear any chance of a cache. Also if you have a service worker or are using indexeddb this may happen. Usually everyone developes in incognito mode to avoid this happening in the first place! Hope this helps :D