browserSync.reload nicht mit Gulp Aufgabe

Question

Ich habe mit einem Problem auf Gulp Aufgabe für viele Stunden zu kämpfen. Ich konnte nicht herausfinden, wie es funktioniert.

Lassen Sie mich zuerst meine Projektstruktur:

project/ 
| 
|-- Gulp/ 
| |-- Base/ 
|  |-- start-server.js 
|  |-- sass.js 
|   ... 
| |-- Watch/ 
|  |-- watch-sass.js 
|   ... 
| |-- config.js 
|  ... 
|-- gulpfile.js 
| ... 

Auch mir Code jeder Datei in dieser Struktur erwähnt zeigen lassen. gulpfile.js

/*jslint node: true */ 
"use strict"; 

var requireDir = require('require-dir'); // Node module to require whole directories 

// ***** Require all tasks from Gulp folder ***** 
requireDir('./Gulp', { 
    recurse: true 
}); 

Gulp/config.js

module.exports = { 
    paths: { 
    Project: { 
     dir:   './', 
     src:   './www', 
     dist:   './dist' 
    }, 

    HTML: { 
     all:   './www/Views/**/**/*.html', 
     dir:   './www/Views', 
     entry:   './www/Views/index.html' 
    }, 

    Sass: { 
     all:   './www/StyleSheets/Sass/**/**/*.scss', 
     dir:   './www/StyleSheets/Sass', 
     entry:   './www/StyleSheets/Sass/main.scss', 
     map:   '../../../dist/maps/sass', 
     vendor:   './www/StyleSheets/Sass/Vendor/**/*.scss' 
    }, 

    CSS: { 
     all:   './www/StyleSheets/CSS/**/**/*.css', 
     dir:   './www/StyleSheets/CSS', 
     entry:   './www/StyleSheets/CSS/main.css', 
     map:   '../../../dist/maps/css', 
     vendor:   './www/StyleSheets/CSS/Vendor/**/*.css' 
    }, 

    JS: { 
     all:   './www/JavaScripts/**/**/*.js', 
     dir:   './www/JavaScripts', 
     entry:   './www/JavaScripts/app.js', 
     map:   '../../../dist/maps/js', 
     vendor:   './www/JavaScripts/Vendor/**/*.js' 
    }, 
    // ... 
    } 
}; 

Gulp/Basis/Auto-reload.js

var gulp   = require('gulp'), 
    config  = require('../config'); 

// ********* IMPORTS ********* 
var browserSync = require('browser-sync').create(); 
// ***END*** IMPORTS ***END*** 

// ***** Start server on localhost for live preview ***** 
gulp.task('start-server', function() { 
    browserSync.init({ 
    server: { 
     baseDir: config.paths.Project.dir 
    }, 
    open: true 
    }); 
}); 

Gulp/Basis/sass.js

var gulp   = require('gulp'), 
    config  = require('../config'); 

// ********* IMPORTS ********* 
var sass   = require('gulp-sass'), 
    browserSync = require('browser-sync'), 
    notify  = require('gulp-notify'), 
    sourceMaps = require('gulp-sourcemaps'); 
// ***END*** IMPORTS ***END*** 

// ***** Sass compiler ***** 
gulp.task('sass', function() { 
    return gulp.src(config.paths.Sass.all) 
    .pipe(sourceMaps.init()) 
    .pipe(sass({ 
     style: 'compressed' 
    })) 
    .on("error", notify.onError(function (error) { 
     return "Error: " + error.message; 
    })) 
    .pipe(sourceMaps.write(config.paths.Sass.map)) 
    .pipe(gulp.dest(config.paths.CSS.dir)) 
    .pipe(browserSync.reload({ 
     stream: true 
    })); 
}); 

Gulp/Uhr/Wacht sass.js

var gulp   = require('gulp'), 
    config  = require('../config'); 

// ********* IMPORTS ********* 
var browserSync = require('browser-sync'), 
    runSequence = require('run-sequence'); 
// ***END*** IMPORTS ***END*** 

// ***** Gulp watch Sass files ***** 
gulp.task('watch-sass', ['start-server'], function() { 
    gulp.watch(config.paths.Sass.all, ['sass', browserSync.reload]); 
}); 

PROBLEMBESCHREIBUNG:

In der letzten Datei Gulp/Uhr/watch-sass.js die Funktion browserSync.reload nicht Arbeit. die Aufgabe 'watch-sass', 'start-server' und dann 'sass' funktioniert, es wird ohne Probleme ausgeführt. Allerdings es nicht automatisch aktualisieren Seite mit browserSync.reload nach Abschluss der Kompilierung * .scss Dateien und ich kann nicht herausfinden, warum. Kann mir jemand helfen?

Answer 1

Ich bin ein bisschen zu Schluck, aber es sieht so aus, als ob Sie keine Schluckuhr installiert oder importiert haben. Installieren/importieren Sie es.

var watch = require("gulp-watch"); 

Dann ersetzen gulp.watch mit Uhr:

// ***** Gulp watch Sass files ***** 
gulp.task('watch-sass', ['auto-reload'], function() { 
    watch(config.paths.Sass.all, ['sass'], function() { 
     browserSync.reload(); 
    }); 
}); 

Wenn nicht die oben, vielleicht haben Sie Ihren Code zu meinen großen Schluck Dateien hier vergleichen können: https://github.com/FunkSoulNinja/travel-site

Answer 2

fand ich heraus, dass, wenn Ich legte Schluck Aufgabe 'Start-Server' in 'watch-sass.js' Datei, anstatt es auf seine eigene Datei zu trennen, es funktioniert.

Der Code für Uhr-sass.js sieht wie folgt aus:

var gulp   = require('gulp'), 
    config  = require('../config'); 

// ********* IMPORTS ********* 
var browserSync = require('browser-sync').create(), 
    runSequence = require('run-sequence'); 
// ***END*** IMPORTS ***END*** 

// ***** Start server on localhost for live preview ***** 
gulp.task('start-server', function() { 
    browserSync.init({ 
    server: { 
     baseDir: config.paths.Project.dir 
    }, 
    open: true 
    }); 
}); 

// ***** Gulp watch Sass files ***** 
gulp.task('watch-sass', ['start-server'], function() { 
    gulp.watch(config.paths.Sass.all, function() { 
    runSequence(
     'sass', 
     'useref-css', 
     'move-index', 
     browserSync.reload 
    ); 
    }); 
}); 

Die Funktion browserSync.reload funktioniert. Zumindest in dieser Methode. Ich wollte zwar eine 'Start-Server'-Aufgabe in separater Datei haben und weiß nicht, wie ich das machen soll.

Also, basierend auf dieser Methode wollte ich etwas ähnliches für JS-Dateien tun. Ich nannte die Aufgabe und Datei 'watch-js.js'. Der Code ist fast identisch, nur unterschiedliche Konfigurationswege und Aufgaben in runSequence. Wacht js.js

var gulp   = require('gulp'), 
    config  = require('../config'); 

// ********* IMPORTS ********* 
var browserSync = require('browser-sync').create(), 
    runSequence = require('run-sequence'); 
// ***END*** IMPORTS ***END*** 

// ***** Start server on localhost for live preview ***** 
gulp.task('start-server', function() { 
    browserSync.init({ 
    server: { 
     baseDir: config.paths.Project.dir 
    }, 
    open: true 
    }); 
}); 

// ***** Gulp watch JS files ***** 
gulp.task('watch-js', ['start-server'], function() { 
    gulp.watch(config.paths.JS.all, function() { 
    runSequence(
     'useref-js', 
     'move-index', 
     browserSync.reload 
    ); 
    }); 
}); 

hier Uuuund die Überraschung kommt. Mit dieser Methode wird die Funktion browserSync.reload NICHT ausgeführt! Ich habe es abgesehen davon, genauso zu arbeiten wie in Watch-Sass, wo es funktioniert. Ich bin jetzt wirklich verloren, jemand Erfahrener könnte mir helfen, was ich falsch mache?