Browser sync reloading but CSS not changing with LESS and Gulp

Question

I'm trying to figure out how to use browser sync in conjunction with gulp and less to get the browser to automatically update upon changes in less files after compilation. What I've got right now is causing what appears to be a reload in the system with a message "Connected to Browser Sync" but I'm not seeing changes occur in the browser. On a full manual reload with cache disabled I see the expected changes, so the css / less task seems to be working partially but I'm missing something on the browser sync.

Oh, I'm using @import statements in a main .less file to pull in less files for each individual module. Thanks for your time and help!

gulp.task('less', function(){
return gulp.src(basepath + 'styles/emma.less')
    .pipe(plumber())
    .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(minifyCSS())
    .pipe(sourcemaps.write('./'))
    .pipe(filesize())
    .pipe(gulp.dest( paths.dest + '/css' ))
    .pipe(reload({stream: true}));
});
gulp.task('browser-sync', function() {
    browserSync({
        proxy: 'localhost:8080'
    });
});    
//dev task to compile things on the fly
gulp.task('dev', ['browser-sync'], function(){
    gulp.watch(paths.scripts, ['scripts']);
    gulp.watch(paths.less, ['less']);
    gulp.watch(paths.templates, ['templates']);
});

Simon Arnold · Accepted Answer · 2015-07-13 22:02:35Z

6

A good way to make browserSync work that way is to have a new listener on to the generated files. You compile LESS to CSS,

gulp.task('less', function(){
return gulp.src(basepath + 'styles/emma.less')
    .pipe(plumber())
    .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(minifyCSS())
    .pipe(sourcemaps.write('./'))
    .pipe(filesize())
    .pipe(gulp.dest( paths.dest + '/css' ));
});

and put a file watcher onto the results, triggering reload:

gulp.task('dev', ['browser-sync'], function(){
    gulp.watch(paths.less, ['less']);
    gulp.watch(paths.dest + '/css/**/*.css', reload);
});

One reason the original code won't work might be of the lost reference to the source files once they're compiled (that's nothing more than an assumption, though)

edited Jul 13, 2015 at 22:02

Simon Arnold

16.2k8 gold badges70 silver badges89 bronze badges

answered Apr 28, 2015 at 8:52

ddprrt

7,6143 gold badges33 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

paniclater Over a year ago

Thanks for your input, I went ahead and changed to this approach and the browser is reloading after the less task, so it appears to be refreshing after the css has compiled. However, even with caching disabled it takes a manual refresh after the auto refresh for the changes to show in the browser. This is the output I get from gulp: [13:34:35] Starting 'less'... [13:34:35] Size emma.css.map : 208.83 kB [13:34:35] Size emma.css : 204 B [13:34:35] Finished 'less' after 396 ms [BS] Reloading Browsers...

ddprrt Over a year ago

Can you also give me the output from the Chrome developer's console.. it should say something on it, too :-)

ddprrt Over a year ago

or if not the console, then the network tab? Btw: I updated my answer a little bit to make it more clear. This setup for instance: gist.github.com/ddprrt/391c3ba29bd0ec05261d works perfect with me

paniclater Over a year ago

I am 99% sure that my issue is because this is a Java Spring / Angular project being launched by Intellij IDE and that the Intellij Tomcat instance isn't redeploying the resources in sync with the gulp task being finished. I verified your answer works so I'm accepting it, even though I'm still having some issues in my environment.

Collectives™ on Stack Overflow

Browser sync reloading but CSS not changing with LESS and Gulp

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related