1

For the life of me, I cannot somehow find what is wrong with this configuration! After injecting the master.css changes, instead of just reflecting the changes, my browser window automatically reloads although it says "injected". Could someone please help? I have a gulpfile.js with the following configuration:

var paths = {
master: {
    styles: 'default/less/master.less',
},
watch: {
    styles: 'default/less/**/*.less',
},
dist: {
    styles: 'default/less',
}
};

Less Task:

gulp.task('less', function(){
'use strict';
gulp.src(paths.master.styles)
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(less({compress:false})) 
.on('error', function (err) {
        gutil.log(err);
        this.emit('end');
 })
 .pipe(autoprefix())
 .pipe(sourcemaps.write('../sourcemaps', {
    includeContent: false, // Otherwise all the CSS would be included
    sourceRoot: paths.dist.styles
}))
.pipe(gulp.dest(paths.dist.styles))
.on('error', gutil.log)
.pipe(browserSync.stream());
});

Browsersync Task: 

gulp.task('browser-sync', ['less'], function() {
'use strict';
browserSync.init({
    proxy: "http://mywebsite.local",
    stream:true
});
gulp.watch(paths.watch.styles, ['less']);
});

And at the end: 

gulp.task('default', ['less', 'browser-sync']);

I see a notification that the changes were injected, my terminal says master.css and master.css.map changed and my changes in the less file are reflected as well, but somehow the browser reloads which I don't want at all for the css compilation.

zarun
  • 910
  • 9
  • 26
  • @ashfaq.p - I am sorry if I do not understand your question. But I believe its possible only to *inject* the css changes without reloading the browser? – zarun Feb 06 '16 at 18:52
  • @ashfaq.p - I have identical configuration with a SASS setup which works perfectly fine (no reload at all). You have to either tell me it is not possible with gulp-less or something is wrong in my setup, otherwise it does not make sense to me because my injection ALREADY happens half a second BEFORE the browser reloads. – zarun Feb 06 '16 at 18:56
  • The CSS changes are present in your new master.CSS file which is generated from your less file. If the browser does not reload, how will the new file be injected. It's just not possible without reload. – ashfaq.p Feb 06 '16 at 18:58
  • @ashfaq.p - Sir, again, I repeat - I have a similar configuration with working well without the page reloading just with gulp-sass (and this one is gulp-less). For your information - the new css file is injected as a stream by browserSync and hence I suggest you be specific with your answer in technical terms. – zarun Feb 06 '16 at 19:07

0 Answers0