Browser Sync not injecting/updating styles

I’m using a similar gulpfile to the one on the website. I’m just compiling sass and reloading the styles. The site loads just fine at the BS localhost and IP address, works as it should. Sass compiles but styles don’t update on the sites. Any ideas?

    var gulp        = require('gulp');
    var browserSync = require('browser-sync').create();
    var sass        = require('gulp-sass');

    gulp.task('serve', ['sass'], function() {

    browserSync.init({
        proxy: "rwr.dev"
    });

    gulp.watch("sass/*.scss", ['sass']);
    gulp.watch("*.php, *.js").on('change', browserSync.reload);
    });

     // Compile sass into CSS & auto-inject into browsers
     gulp.task('sass', function() {
    return gulp.src("sass/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("css"))
        .pipe(browserSync.stream());
    });

    gulp.task('default', ['serve']);

It’s a wordpress site running in MAMP if that matters. I have gulp and browser-sync setup inside my theme directory.

[alxndrmlr]

We just solved this but it was due to a caching issue (we modify the css file names for links and then have an RewriteRule to resolve them)

/**
 *  Given a file, e.g. /css/base.css, replaces it with a string containing the
 *  file's mtime, e.g. /css/base.1221534296.css.
 *  See /app/.htaccess for the server rewrite rule that accompanies this function.
 *
 *  @param $file  The file to be loaded.  Must be an absolute path (i.e.
 *   starting with slash).
 */
function auto_version($file) { ... }

We simply removed our auto_versioning when in development mode and the issues was immediately resolve. While this is unique to our setup I’m mentioning it here so as to encourage others to consider that caching and their app is setup.

In our case the base.css file was being updated during the gulp-task, but since the browser had a <link> to base.1221534296.css it seems that browser-sync wasn’t able to know what css file to sync.

[Minasokoni]

On El Capitan: Ran: sudo chown -R $(whoami):admin /usr/local The reason BS reloads is because its firing off the generated souremaps. To prevent BS from reloading instead of injecting the CSS, browserSync.stream( {match: '**/*.css' } ) is required

My Code:

var gulp = require( 'gulp' );
var postcss = require( 'gulp-postcss' );
var autoprefixer = require( 'autoprefixer' );
var sass = require( 'gulp-sass' );
var sourcemaps = require( 'gulp-sourcemaps' );
var plumber = require( 'gulp-plumber' );
var notify = require( 'gulp-notify' );
var browserSync = require( 'browser-sync' );
var plumberErrorHandler = {
    errorHandler: notify.onError( {
        title: 'Gulp',
        message: 'Error: <%= error.message %>'
    } )
};
gulp.task( 'browser-sync', function () {
    var files = [
    '../**/*.php',
    '../js/*js'
    ];
    browserSync.init( files, {
        proxy: "localhost",
        notify: true,
        open: false
    } );
} );
gulp.task( 'sass', function () {
    gulp.src( '../sass/**/*.scss' ).pipe( sourcemaps.init() ).pipe( plumber( plumberErrorHandler ) ).pipe( sass() ).pipe( postcss( [ autoprefixer( {
        browsers: [ 'last 2 versions' ]
    } ) ] ) ).pipe( sourcemaps.write() ).pipe( gulp.dest( '../css' ) ).pipe( browserSync.stream( {
        match: '**/*.css' 
    } ) );
} );
gulp.task( 'default', [ 'sass', 'browser-sync' ], function () {
    gulp.watch( "../sass/**/*.scss", [ 'sass' ] );
} );