Browser sync reloading but CSS not changing with LESS and Gulp

问题

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']);
});

回答1:

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)

来源：https://stackoverflow.com/questions/29907196/browser-sync-reloading-but-css-not-changing-with-less-and-gulp