浏览器同步重新加载，但CSS不会随LESS和Gulp而改变

问题描述

我试图弄清楚如何将浏览器同步与gulp和less结合使用，以便浏览器在编译后更少的文件中自动更新。我现在所拥有的是造成系统中出现重新加载的消息，并显示连接到浏览器同步消息，但浏览器中没有发生变化。在禁用缓存的情况下进行完全手动重新加载时，我看到了预期的更改，因此css / less任务似乎正在部分工作，但我在浏览器同步中缺少某些内容。

哦，我在主.less文件中使用@import语句来为每个单独的模块提供更少的文件。感谢您的时间和帮助！

  gulp.task（'less'，function（）{
 return gulp。 src（basepath +'styles / emma.less'）
 .pipe（plumber（））
 .pipe（sourcemaps.init（））
 .pipe（less（））
.pipe（autoprefixer（{
 browsersers：['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'
}）; 
}）; 
 //开发任务，即时编译内容
 gulp.task（'dev'，['browser-sync']，function（）{
 gulp.watch（paths.scripts， ['scripts']）; 
 gulp.watch（paths.less，['less']）; 
 gulp.watch（paths.templates，['templates']）; 
} ）; 
  

解决方案

使browserSync以这种方式工作的一个好方法是对生成的文件有一个新的监听器。您将LESS编译为CSS，

  gulp.task（'less'，function（）{
 return gulp.src （basepath +'styles / emma.less'）
 .pipe（plumber（））
 .pipe（sourcemaps.init（））
 .pipe（less（））
 （autoprefixer（{
 browsersers：['last 2 versions'] 
}））
 .pipe（minifyCSS（））
 .pipe（sourcemaps.write（'。 /'））
 .pipe（filesize（））
 .pipe（gulp.dest（paths.dest +'/ css'））; 
}）; 
  

并将文件观察器放到结果中，触发重载：

  gulp.task（'dev'，['browser-sync']，function（）{
 gulp.watch（paths.less，['less ']）; 
 gulp.watch（paths.dest +'/css/**/*.css'，reload）; 
}）; 
  

原始代码不起作用的一个原因可能是源文件一旦丢失'重新编译（这只不过是一个假设）

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

解决方案

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)

这篇关于浏览器同步重新加载，但CSS不会随LESS和Gulp而改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！