Gulp Browsersync Aufgabe nicht neu laden bei Dateiänderungen mit neuer Dateistruktur

Question

Nach dem Ändern meines Projekts in und dist/ Ordnern organisiert werden meine Änderungen nicht kompiliert und meine Browsersync Aufgabe wird nicht mehr die Seite neu zu laden. Wenn ich zum Beispiel die Farbe eines Divs ändere, wird die Farbe nicht aktualisiert, selbst wenn ich den Schluck-Task stoppe und neu starte. Meine Frage ist also, wie ändere ich meine Schluckaufgaben, um nach Änderungen in der neuen Dateistruktur zu suchen, die ich verwende, und wie trigger ich die Neuladeaufgabe, sobald die Überwachungsaufgabe eine Änderung an einer Datei erkennt? Ich denke, die Neulade-Aufgabe funktioniert, auf einer früheren funktionierenden Version dieser gulpfile gulp.watch funktionierte, so scheint es kein Problem damit zu sein. Ich versuchte, gulp.watch zu browserSync.watch wie this Antwort zu ändern, aber das hat es nicht behoben.

Ich vermute, das ist ein Problem mit meiner Watch Task oder der browsersync.init, aber ich bin total ratlos.

Um klar zu sein, mache ich eine statische Webseite mit Jade, Bourbon Neat, SCSS, Gulp und Browsersync.

Hier ist a link zum vollen GitHub Repo für dieses Projekt, wenn das hilft!

Dies ist meine aktuelle Dateistruktur:

/ 
    dist/ 
    css/ 
    js/ 
    index.html 
    node_modules/ 
    src/ 
    jade/ 
    js/ 
    scss/ 
    .gitignore 
    gulpfile.js 
    package.json 

Und das ist mein gulpfile.js:

// VARIABLES 

var gulp     = require('gulp'); 
var jade     = require('gulp-jade'); 
var sass     = require('gulp-sass'); 
var sourcemaps    = require('gulp-sourcemaps'); 
var autoprefixer   = require('gulp-autoprefixer'); 
var cssmin     = require('gulp-cssmin'); 
var neat     = require('node-neat').includePaths; 
var concat     = require('gulp-concat'); 
var uglify     = require('gulp-uglify'); 
var rename     = require('gulp-rename'); 
var browserSync    = require('browser-sync'); 
var reload     = browserSync.reload; 


// TASKS 



// Jade task 
gulp.task('jade', function() { 
    return gulp.src('src/jade/**/*.jade') 
    .pipe(jade({ pretty: true })) 
    .pipe(gulp.dest('dist/')) 
}); 


// SCSS task 
gulp.task('scss', function() { 
    return gulp.src('src/scss/**/*.scss') 
    .pipe(sass({ style: 'compressed', 
     noCache: true, 
     includePaths: neat })) 
    .pipe(autoprefixer()) 
    .pipe(cssmin()) 
    .pipe(rename({ 
     suffix: '.min' 
    })) 
    .pipe(gulp.dest('dist/css')) 
}); 

// JS task 
gulp.task('js', function() { 
    return gulp.src('src/js/**/*.js') 
    .pipe(uglify()) 
    .pipe(rename({ 
     suffix: '.min' 
    })) 
    .pipe(gulp.dest('dist/js/')) 
}); 

// Watch files for changes 
gulp.task('watch', ['browser-sync'], function() { 
    gulp.watch('dist/**/*.html', reload); 
    gulp.watch('src/scss/**/*.scss', ['scss', reload]); 
    gulp.watch('src/**/*.jade', ['jade']); 
    gulp.watch('src/**/*.js', ['js']); 
}); 

// Start Browsersync server 
gulp.task('browser-sync', function() { 
    browserSync.init(['dist/css/**/*.css', 'dist/js/**/*.js'], { 
     server: { 
      baseDir: "dist/" 
     } 
    }); 
}); 

// Default task 
gulp.task('default', ['scss', 'jade', 'js', 'watch', 'browser-sync']); 

Answer 1

ich Ihre Repo und einige Korrekturen gezogen habe, werde unter dem "fixen" Zweig drücken. Wenige Dinge:

• Ihre index.html bezog sich auf Ihre unminifizierte CSS, während Sie nur minimiert exportiert.
• die Merkliste benötigte der Unterordner prefxied, so gulp.watch('src/js/**/*.js', ['js']); und nicht gulp.watch('src/**/*.js', ['js']);
• Ihre browserSync.init Referenzierung wurde die falschen Verzeichnisse (src und nicht dist).

Answer 2

Was für mich gearbeitet wurde gulp.watch zu browserSync.watch wechseln. Die Dokumentation von BrowserSync weist darauf hin, dass diese Funktion mindestens Version 2.6.0 erfordert. Daher müssen Sie möglicherweise Ihre Version von BrowserSync aktualisieren, wenn Sie diese Version nicht verwenden.