просмотр gulp не работает при добавлении browsersync

#gulp #browser-sync #gulp-watch #gulp-sass

#gulp #браузер-синхронизация #gulp-watch #gulp-sass

Вопрос:

Я пытаюсь запустить простой рабочий процесс, в котором изменения в sass-файле немедленно переводятся в css и отображаются в браузере (используя этот учебник: https://css-tricks.com/gulp-for-beginners /) Я просмотрел несколько ответов на похожие вопросы здесь, но не смог найти решение.

Это мой файл gulp:

 var gulp = require('gulp');
var sass = require('gulp-sass');


gulp.task('sass', function() {
  return gulp.src('app/**/*.sass') // Gets all files ending with .scss in app/scss
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
    stream: true
  }))
});

var browserSync = require('browser-sync').create();
gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'app'
    },
  })
})

gulp.task('watch', gulp.series(['browserSync'], ['sass']), function(){
  gulp.watch('app/**/*.sass', gulp.series(['sass']));
})
  

Когда я вызываю gulp sass , он работает отлично. Кроме того, когда я удаляю browsersync и использую только следующий код, само наблюдение работает:

 gulp.task('watch', function(){
  gulp.watch('app/scss/*.sass', gulp.series(['sass'])); 
})
  

Должно быть, что-то не так с тем, как происходит (не) синхронизация браузера. Может кто-нибудь мне помочь? Заранее большое спасибо!

Ответ №1:

В синтаксисе gulp v4 отсутствует следующее:

 gulp.task('watch', gulp.series(['browserSync'], ['sass']), function(){
  gulp.watch('app/**/*.sass', gulp.series(['sass']));
})
  

Переместите функцию в series аргументы. Так что попробуйте это вместо:

 gulp.task('watch', gulp.series('browserSync', 'sass', function(){
  gulp.watch('app/**/*.sass', gulp.series('sass'));
}));
  

Таким образом gulp.task() , принимает 2 аргумента вместо 3 — это способ gulp v4. К сожалению, эта статья была написана в синтаксисе v3 с несколькими предупреждениями об изменении кода для версии 4.

Комментарии:

1. Спасибо за ответ. К сожалению, он по-прежнему не будет просматривать файл .sass. В консоли написано «запуск ‘watch’ …» и «запуск’browsersync’ …», но, похоже, это не запускает задачу «sass». у вас есть идеи, что еще может быть не так?

2. я обнаружил ошибку: мне нужно было изменить задачу browsersync на var BrowserSync = require(‘browser-sync’).create(); gulp.task(‘BrowserSync’, функция (выполнена) { BrowserSync.init({ server: { baseDir: ‘app’ }, })готово (); }) Я уже пробовал эту часть раньше, но она не сработала, потому что я еще не включил предложенные вами изменения!