观看 .html 文件时不会触发 BrowserSync

Question

我正在使用 Gulp 编译和缩小我的 SASS。这工作正常，但我想通过使用 BrowserSync 扩展自动化。

我已经按照一些教程网站上的说明进行操作，但无法正常工作 - 当我更新我的 .scss 或 .html 文件时，浏览器没有刷新，也没有出现任何错误终端.

我的gulpfile.js就是这样。谁知道为什么 browserSync 无法运行?

(ps 运行ning gulp browserSync 确实成功打开了浏览器 window 和 http://localhost:3000/ 索引文件，但没有自动刷新).

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

// Normal .scss compilation
gulp.task('sass', function(){
  return gulp.src('scss/main.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'))
});

// Minifys .css, is meant to reload browser
gulp.task('mini-css', function() {
    return gulp.src('dist/css/main.css')
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// Do both of the above
gulp.task('do-sass', gulp.series('sass', 'mini-css'))

gulp.task('watch', function(){
  gulp.watch('scss/**/*.scss', gulp.series('do-sass'));
  gulp.watch("*.html").on('change', browserSync.reload);
});

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: './'
    },
  })
})

Answer 1

您的监视任务应该是您的默认任务。尝试将 browserSync.init() 放入监视任务中，然后使用 gulp watch

启动您的 gulp

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

// Normal .scss compilation
gulp.task('sass', function(){
  return gulp.src('scss/main.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'))
});

// Minifys .css, is meant to reload browser
gulp.task('mini-css', function() {
    return gulp.src('dist/css/main.css')
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// Do both of the above
gulp.task('do-sass', gulp.series('sass', 'mini-css'))

gulp.task('watch', function(){
  browserSync.init({
    server: {
      baseDir: './'
    }
  });

  gulp.watch('scss/**/*.scss', gulp.series('do-sass'));
  gulp.watch("*.html").on('change', browserSync.reload);
});

观看 .html 文件时不会触发 BrowserSync

BrowserSync not trigger when watching .html files

javascript

node.js

gulp

browser-sync

gulp-watch