Browsersync + gulp-watch не работает - PullRequest
Новая
       106

Browsersync + gulp-watch не работает

0 голосов
/ 05 июня 2018

В моем проекте я использую gulp + browsersync.После обновления gulp v.4.0.0. Браузерная синхронизация не работает, и мои стили не компилируются при запуске часов (только после перезапуска вручную gulp watch).

Это мой gulpfile.js: 

var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
concat = require('gulp-concat'),
uglify = require('gulp-uglifyjs'),
cssnano = require('gulp-cssnano'),
rename = require('gulp-rename'),
del = require('del'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss')
    .pipe(sass())
    .pipe(autoprefixer(['last 15 versions', '> 1%'], {cascade: true}))
    .pipe(cssnano())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('css'))
    .pipe(browserSync.reload({stream: true}))
 });

gulp.task('css-libs', gulp.parallel('sass'), function(){
return gulp.src('app/css/main.css')
    .pipe(cssnano())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('app/css'));
});


gulp.task('browser-sync', function(){
browserSync({
    server: {
        //baseDir: 'app'
        baseDir: './'
    },
    notify:false
})
});


gulp.task('watch', gulp.parallel('browser-sync', 'css-libs'), function(){
gulp.watch('app/scss/*.scss', ['sass']);
gulp.watch('*.html', browserSync.reload);
});

Как это исправить?

UPD

Это мои package.json

Часы Gulp не работают, когда я изменяю файл scss.

1 Ответ

0 голосов
/ 05 июня 2018

Я считаю, что ваша задача 'watch' должна быть переписана следующим образом: 

gulp.task('browser-sync', function(){

  // note the .init

  browserSync.init({
      server: {
          //baseDir: 'app'
          baseDir: './'
      },
      notify:false
  })
});

gulp.task('watch', gulp.parallel('browser-sync', 'css-libs', function(done){

   //   change in the previous line and the following line

  gulp.watch('app/scss/*.scss', gulp.series('sass'));
  gulp.watch('*.html', browserSync.reload);
  done();
}));

, чтобы вызов функции с часами был частью вызова gulp.parallel.См. Документацию параллельных задач и подпись gulp.task . 

gulp.task('default', gulp.parallel('one', 'two', function(done) {
  // do more stuff
  done();
}));
...