Глоток BrowserSync не обновляется

Question

Ссылка на Github Repo: https://github.com/janschloss/boilerplate

Моя проблема заключается в том, что только изменения SCSS не получают признание BrowserSync в Глоток (без HTML или JS или/IMG изменения). Я предполагаю, что это связано с тем, что изменения scss передаются напрямую. Странно, что у меня была одна сборка, которая признавала изменения html и img, хотя я не могу найти это снова.

Кто-нибудь видит ошибку?

"use strict"; 

// Define packages 

var gulp   = require('gulp'), 
    sass   = require('gulp-sass'), 
    clean   = require('gulp-clean'), 
    sourcemaps  = require('gulp-sourcemaps'), 
    autoprefixer = require('gulp-autoprefixer'), 
    plumber   = require('gulp-plumber'), 
    imagemin  = require('gulp-imagemin'), 
    uglify   = require('gulp-uglify'), 
    concat   = require('gulp-concat'), 
    strip   = require('gulp-strip-comments'), 
    browserSync  = require('browser-sync'); 

// Define file paths 

var scssSrc = 'src/scss/**/*.scss', 
    jsSrc = 'src/js/*.js', 
    htmlSrc = 'src/*.html', 
    imgSrc = 'src/img/*'; 

// BrowserSync config 

gulp.task('browserSyncInit', function() { 
    browserSync.init({ 
     server: { 
      baseDir: 'dist' 
     } 
    }); 
    gulp.watch('./dist/*').on('change', browserSync.reload); 
}); 

// Concat scss files, compile compressed to css, prefix css, strip comments and create sourcemap 

gulp.task('sass', function() { 
    return gulp.src(scssSrc) 
     .pipe(plumber()) 
     .pipe(sourcemaps.init()) 
     .pipe(concat('main.min.scss')) 
     .pipe(sass({outputStyle: 'compressed'})) 
     .pipe(autoprefixer()) 
     .pipe(strip.text()) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('dist/css')) 
     .pipe(browserSync.reload({ 
      stream: true 
     })); 
}); 

// Concatenate, uglify, strip comments and create sourcemap for js files 

gulp.task('js', function() { 
    return gulp.src(jsSrc) 
     .pipe(plumber()) 
     .pipe(sourcemaps.init()) 
     .pipe(concat('main.min.js')) 
     .pipe(uglify()) 
     .pipe(strip()) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('dist/js')); 
}); 

// Image optimization 

gulp.task('img', function() { 
    return gulp.src(imgSrc) 
     .pipe(imagemin({ 
      progressive: true 
     })) 
     .pipe(gulp.dest('dist/img')); 
}); 

// Clean task 

gulp.task('clean', function() { 
    return gulp.src('dist') 
     .pipe(clean()); 
}); 

// Copy html 

gulp.task('copy', function() { 
    return gulp.src(htmlSrc) 
     .pipe(gulp.dest('dist/')); 
}); 

// Default Task 

gulp.task('default', ['clean', 'copy', 'sass', 'js', 'img', 'browserSyncInit'], function() { //todo asynchronous 
    gulp.watch(scssSrc, ['sass']); 
    gulp.watch(jsSrc, ['js']); 
    gulp.watch(imgSrc, ['img']); 
    gulp.watch(htmlSrc, ['copy']); 
}); 

Я думаю

gulp.watch('./dist/*').on('change', browserSync.reload); 

является соответствующая строка. Что-то не так с моим путем?

Моя соответствующая структура папок выглядит следующим образом:

gulpfile.js 

src 

dist 

внесены изменения в ГКЗ и копируются в DIST во время выполнения с глотком.

Спасибо!

Answer 1

Я не могу это объяснить. Но когда я удаляю вызов watch из задачи browserSyncInit и помещаю его в обратный вызов для задачи по умолчанию вместе с другими часами, все работает нормально.

Соответствующие части кода:

// BrowserSync config 

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

}); 


// Default Task 

gulp.task('default', ['clean', 'copy', 'sass', 'js', 'img', 'browserSyncInit'], function() { //todo asynchronous 
    gulp.watch(scssSrc, ['sass']); 
    gulp.watch(jsSrc, ['js']); 
    gulp.watch(imgSrc, ['img']); 
    gulp.watch(htmlSrc, ['copy']); 
    gulp.watch('./dist/**/*').on('change', function() { 

     console.log("Watch hit"); 
     browserSync.reload(); 
    }); 
}); 

Является ли этот идеал вообще для файла глотком? Я могу понять, как заставить часы смотреть в другой задаче.

Очень странная вещь, которую я заметил; Иногда часы DIST будут принимать, и все остальные часы не будут. Как будто происходит состояние гонки, на котором регистрируются, а остальные перезаписываются. Когда они были отделены, как вы их первоначально, либо часы SRC работали, либо часы DIST работали. Я мог редактировать файлы в DIST непосредственно, когда часы DIST работали и запускали перезагрузку.

Сохранение всех часов вместе в этой функции CB работает для меня, используя ваш проект github.

Я также заметил еще одну несвязанную проблему. Повторное использование вашего файла gulp требовало от меня rm -rf dist first other wise. У меня были ошибки.

Answer 2

Я думаю, что проблема с глобусом: './dist/*' - он будет смотреть только содержимое dist. Я думаю, вы хотите, чтобы './dist/**/*' смотрел папку и все подпапки.