PROSAGA码农传奇-gulp-在观看.html文件时，BrowserSync不会触发

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

作者: 听风～
发布时间: 2024-12-17 09:03:17 (21天前)
转自：

<div class =“post-text”itemprop =“text”>
  <P>
    您的监视任务应该是您的默认任务。尝试将browserSync.init（）放入watch任务中，然后启动你的gulp
    的<strong>
       <code>
        gulp watch
      </code>
    </强>
  </p>
   <pre class="lang-js prettyprint-override">
    <code>
      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);
});

</code>
  </pre>
</DIV>