Gulp BrowserSync nicht aktualisiert

Question

Link zu Github Repo: https://github.com/janschloss/boilerplate

Mein Problem ist, dass nur SCSS Änderungen von BrowserSync in Gulp anerkannt zu bekommen (kein HTML oder js oder/img Änderungen). Ich denke, das liegt daran, dass scss-Änderungen direkt gestreamt werden. Seltsamerweise hatte ich einen Build, der HTML und IMG Änderungen erkannte, obwohl ich das nicht wieder finden kann.

Seht jemand den Fehler?

"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']); 
}); 

Ich denke

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

die entsprechende Zeile ist. Ist irgendetwas mit meinem Weg nicht in Ordnung?

Meine relevante Ordnerstruktur wie folgt aussieht:

gulpfile.js 

src 

dist 

Änderungen in src gemacht werden und kopiert auf Laufzeit mit großem Schluck Dist.

Danke!

Answer 1

Ich kann es nicht erklären. Aber wenn ich den Watch-Call von der browserSyncInit-Task entferne und ihn zusammen mit den anderen Watches in den Callback für die Standardaufgabe lege, funktioniert alles einwandfrei.

Relevante Teile des Codes:

// 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(); 
    }); 
}); 

Ist das ideal an alle für Ihre schluck-Datei? Ich kann den Gedanken, die Uhr ursprünglich in der anderen Aufgabe ausgelöst zu haben, irgendwie verstehen.

Sehr seltsame Sache, die ich bemerkte; Manchmal nahm die DIST-Uhr und alle anderen Uhren nicht. Als gäbe es eine Race Condition, bei der man sich registriert und die anderen überschreiben. Wenn sie getrennt wurden, so wie Sie sie ursprünglich hatten, arbeiteten entweder SRC-Uhren oder DIST-Uhren funktionierten. Ich konnte Dateien in DIST direkt bearbeiten, wenn die DIST-Uhr funktionierte und das erneute Laden auslöst.

Alle Uhren in dieser CB-Funktion zusammen zu halten funktioniert für mich mit Ihrem Github-Projekt.

Ich bemerkte auch ein anderes nicht verwandtes Problem. Wenn du deine Schluck-Datei neu läufst, musste ich rm -rf dist, sonst habe ich Fehler bekommen.

Answer 2

Ich denke, das Problem ist mit dem Glob: './dist/*' - es wird nur den Inhalt von dist zu sehen. Ich denke, Sie wollen './dist/**/*' den Ordner und alle Unterordner überwachen.