BrowserSync / browser-sync

Keep multiple browsers & devices in sync when building websites. https://browsersync.io
https://discord.gg/2d2xUThp
Apache License 2.0
12.19k stars 757 forks source link

Browser-sync injects old css file to browser (non-existent) #1160

Open aronmgv opened 8 years ago

aronmgv commented 8 years ago

Issue details

Browser-sync injects old css version into browser (chrome and ff tested).

I have disabled caching in chrome (devtools->options->disable cache when devtools is opened)

Hard reload with emptying cache reflects most recent changes.

Steps to reproduce/test case

I made a change to the less file -> less compiled to css -> see injected css file into the chrome, but it is not the one I have saved on disk - it is non existent anymore and it is being injected for some period of time..

I repeat this process and observe that in order to get the actual changes injected into the chrome first it injects all change history of the css file.. so I do a white space changes to force it further.. (I see in chrome all versions of the css file which was injected.. and e.g. first 5 have the original css file, then I start seeing my changes)

I repeated the process editing just from the notepad.. same results.

Please specify which version of Browsersync, node and npm you're running

var gulp = require('gulp');
var bs = browserSync.create();
var config = require('./gulp.config.js')();

function startBrowserSync(isDev) {
    if(args.nosync || bs.active) {
        return;
    }

    log('Starting browser-sync on port ' + config.tomcatPortHTTPS);

    if (isDev) {
        log('Watching Dev settings...');
        gulp.watch(config.appLess, gulp.series('styles-app'));
            .on('change', changeEvent); // function (event) { changeEvent(event); }
    } else {
        log('Watching Build settings...');
       gulp.watch([config.appLess, config.js, config.html],
       gulp.series('optimize', browserSync.reload))
           .on('change', changeEvent); // function (event) { changeEvent(event); }
    }

    var options = {
        proxy: {
            target: 'https://localhost:' + config.tomcatPortHTTPS + '/wind/app/index.html'
        },
        port: 3000,
        startPath: '/wind/app/index.html',
        browser: 'Chrome',
        files: isDev ? [
            config.client + '**/*.*',
            '!' + '**/*.less',
            '!' + '**/*.scss',
            '!' + '**/*.css'
        ] : [],
        ghostMode: { // these are the defaults t,f,t,t
            clicks: true,
            location: false,
            forms: true,
            scroll: true
        },
        injectChanges: true,
        logFileChanges: true,
        logLevel: 'debug',
        logPrefix: 'gulp-patterns',
        notify: true,
        reloadDelay: 0
    };
    bs.init(options);
}

gulp.task('styles-app', function() {
    log('Compiling APP Less --> CSS' + ' :: [' + config.appLess + ']');

    return gulp
        .src(config.appLess)
        .pipe($.plumber()) // exit gracefully if something fails after this
        .pipe($.less())
        // .on('error', errorLogger) // more verbose and dupe output. requires emit.
        .pipe($.autoprefixer({browsers: ['last 2 version', '> 5%']}))
        .pipe(gulp.dest(config.temp + 'styles'))
        .pipe(bs.stream()); // browserSync.reload({ stream: true }) // {match: "**/*.css"}
});

gulp.task('serve-dev', gulp.series('inject', function() {
    gulp.watch([config.js], gulp.series('wireapp'));
    startBrowserSync(true /*isDev*/);
}));
gijsroge commented 8 years ago

Same setup, same result. I can confirm this. When I run this on macOS it works fine.

npm 3.9.1 node v4.2.6

Edit: doesn't work on macOS either.

Edit: I found out i've set the bs.stream before the gulp.dest. So ignore this post :)