使用Gulp进行更改后,browser-sync不会刷新页面

Question

我是Gulp的新手,我想利用它的自动scss编译和浏览器同步.但我无法让它发挥作用.

我删除了所有内容,只在Browsersync网站上留下了示例的内容:

http://www.browsersync.io/docs/gulp/#gulp-sass-css

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

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./app"
    });

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

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

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

我可以打电话给gulp发球.该网站正在显示,我收到了来自Browsersync的消息.当我修改HTML时,页面被重新加载.然而,当我修改scss时,我可以看到:

[BS] 1 file changed (test.css)
[15:59:13] Finished 'sass' after 18 ms

但我必须手动重装.我错过了什么？

Answer 1

当我不熟悉浏览器同步使用时,我也面临类似的问题,命令行说"重新加载浏览器"但浏览器根本没有刷新,问题是我没有在我的HTML页面中包含body标签browser-sync可以为其功能注入脚本,确保您的HTML页面具有正文标记.

Answer 2

您可以注入更改,而不必在SASS编译时强制完全浏览器刷新,如果您愿意.

browserSync.init({
    injectChanges: true,
    server: "./app"
});

gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream({match: '**/*.css'}));
});

Answer 3

这是因为你正在调用browserSync.reloadhtml手表而不是scss手表.

试试这个:

gulp.watch("app/scss/*.scss", ['sass']).on('change', browserSync.reload);
gulp.watch("app/*.html").on('change', browserSync.reload);

Answer 4

这是我使用的,它在sass或任何其他文件中工作正常

gulp.task('browser-sync', function () {
   var files = [
      '*.html',
      'css/**/*.css',
      'js/**/*.js',
      'sass/**/*.scss'
   ];

   browserSync.init(files, {
      server: {
         baseDir: './'
      }
   });
});