BrowserSync не срабатывает при просмотре .html файлов - PullRequest
Новая
       73

BrowserSync не срабатывает при просмотре .html файлов

0 голосов
/ 23 февраля 2019

Я использую Gulp для компиляции и минимизации SASS.Это прекрасно работает, но я хочу расширить автоматизацию с помощью BrowserSync.

Я следовал инструкциям на нескольких сайтах учебников, но не могу заставить его работать - браузер не обновляется, когда я обновляю свои .scssили .html файлы, не появляются ошибки на терминале.

Мой gulpfile.js как таковой.Кто-нибудь знает, почему не запускается browserSync?

(ps, работающий gulp browserSync, успешно открывает окно браузера и индексирует файл с 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: './'
    },
  })
})

1 Ответ

0 голосов
/ 23 февраля 2019

Ваша задача наблюдения должна быть вашей задачей по умолчанию.Попробуйте включить browserSync.init () в задачу наблюдения и затем начните свой глоток с gulp watch

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);
});
...