Gulp Liveloadload nachdem alle Dateien kompiliert wurden?

Question

Ich habe ein Problem, von dem ich dachte, dass es vielen Menschen gemeinsam ist, aber es scheint, dass ich nicht recht habe. Also ich hoffe jemand kann helfen, da ich die Antwort in den Gulp Dokumenten nicht finden kann.

Gerade jetzt hat mein gulpfile.js folgenden Inhalt:

'use strict'; 

var gulp = require('gulp'); 
var jade = require('gulp-jade'); 
var gutil = require('gulp-util'); 
var stylus = require('gulp-stylus'); 
var jeet = require('jeet'); 
var nib = require('nib'); 
var uglify = require('gulp-uglify'); 
var livereload = require('gulp-livereload'); 

var sources = { 
    jade: "jade/**/*.jade", 
    partials: "partials/**/*.jade", 
    stylus: "styl/**/*.styl", 
    scripts: "js/**/*.js" 
}; 

// Define destinations object 

var destinations = { 
    html: "dist/", 
    css: "dist/css", 
    js: "dist/js" 
}; 

// Compile and copy Jade 
gulp.task("jade", function(event) { 
    return gulp.src(sources.jade) 
    .pipe(jade({pretty: true})) 
    .pipe(gulp.dest(destinations.html)) 
}); 

// Compile and copy Stylus 
gulp.task("stylus", function(event) { 
    return gulp.src(sources.stylus).pipe(stylus({ 
    use: [nib(), jeet()], 
    import: [ 
     'nib', 
     'jeet' 
    ], 
    style: "compressed" 
    })).pipe(gulp.dest(destinations.css)); 
}); 

// Minify and copy all JavaScript 
gulp.task('scripts', function() { 
    gulp.src(sources.scripts) 
    .pipe(uglify()) 
    .pipe(gulp.dest(destinations.js)); 
}); 

// Server 
gulp.task('server', function() { 
    var express = require('express'); 
    var app = express(); 
    app.use(require('connect-livereload')()); 
    app.use(express.static(__dirname+'/dist/')); 
    app.listen(4000, '0.0.0.0'); 
}); 

gulp.task('watch', function() { 
    livereload.listen(); 
    gulp.watch(sources.jade, ["jade"]); 
    gulp.watch(sources.partials, ["jade"]); 
    gulp.watch(sources.stylus, ["stylus"]); 
    gulp.watch(sources.scripts, ["scripts"]); 
}); 

// Define default task 
gulp.task("default", ["jade", "stylus", "scripts", "server", "watch"], function(){ 
    gulp.watch([ 
    sources.jade, 
    sources.partials, 
    sources.stylus, 
    sources.scripts, 
    ]).on('change', function(event) { 
    livereload.changed(); 
    console.log('File', event.path, 'was', event.type); 
    console.log('LiveReload is triggered'); 
    }); 
}); 

Was passiert, ist, dass ich mehr als 1 Jade-Datei haben. Wenn ich an - sage - die 10nth in alphabetischer Reihenfolge arbeite, und ich ändere es, bekomme ich den Liveload sofort ausgeführt. Das Problem ist, dass es die Browser-Registerkarte neu lädt, bevor alle Jade-Dateien die Kompilierung abgeschlossen haben und auf das Ziel kopiert wurden. Daher wird die Datei, an der ich gerade arbeite, nicht einmal kompiliert, wenn die Aktualisierung stattfindet. Gibt es eine Möglichkeit, das Nachladen zu ketten, nachdem eine Aufgabe abgeschlossen ist?

Answer 1

Sie müssen Liveload von Änderungen benachrichtigen. In Ihren Aufgaben müssen Sie die Liveload-Option am Ende der Pipe hinzufügen.

Zum Beispiel in der Jade Aufgabe:

gulp.task("jade", function(event) { 
    return gulp.src(sources.jade) 
    .pipe(jade({pretty: true})) 
    .pipe(gulp.dest(destinations.html)) 
    .pipe(livereload()); 
}); 

Ich versuche nicht, diesen Code in Ihren Gulpfile, aber ich denke, es funktioniert.

Grüße.

Answer 2

Ich habe es getan. Was ich tun musste, ist eine neue Aufgabe namens "Reload" zu erstellen, Abhängigkeiten zu setzen und nach jeder anderen Aufgabe auszuführen. Hier ist die neue Gulpfile ".

‚use strict‘;

var gulp = require('gulp'); 
var jade = require('gulp-jade'); 
var gutil = require('gulp-util'); 
var stylus = require('gulp-stylus'); 
var jeet = require('jeet'); 
var nib = require('nib'); 
var uglify = require('gulp-uglify'); 
var livereload = require('gulp-livereload'); 

var sources = { 
    jade: "jade/**/*.jade", 
    partials: "partials/**/*.jade", 
    stylus: "styl/**/*.styl", 
    scripts: "js/**/*.js" 
}; 

// Define destinations object 
var destinations = { 
    html: "dist/", 
    css: "dist/css", 
    js: "dist/js" 
}; 

// Compile and copy Jade 
gulp.task("jade", function(event) { 
    return gulp.src(sources.jade) 
    .pipe(jade({pretty: true})) 
    .pipe(gulp.dest(destinations.html)) 
}); 

// Compile and copy Stylus 
gulp.task("stylus", function(event) { 
    return gulp.src(sources.stylus).pipe(stylus({ 
    use: [nib(), jeet()], 
    import: [ 
     'nib', 
     'jeet' 
    ], 
    style: "compressed" 
    })).pipe(gulp.dest(destinations.css)); 
}); 

// Minify and copy all JavaScript 
gulp.task('scripts', function() { 
    gulp.src(sources.scripts) 
    .pipe(uglify()) 
    .pipe(gulp.dest(destinations.js)); 
}); 

// Server 
gulp.task('server', function() { 
    var express = require('express'); 
    var app = express(); 
    app.use(require('connect-livereload')()); 
    app.use(express.static(__dirname+'/dist/')); 
    app.listen(4000, '0.0.0.0'); 
}); 

// Watch sources for change, executa tasks 
gulp.task('watch', function() { 
    livereload.listen(); 
    gulp.watch(sources.jade, ["jade", "refresh"]); 
    gulp.watch(sources.partials, ["jade", "refresh"]); 
    gulp.watch(sources.stylus, ["stylus", "refresh"]); 
    gulp.watch(sources.scripts, ["scripts", "refresh"]); 
}); 

// Refresh task. Depends on Jade task completion 
gulp.task("refresh", ["jade"], function(){ 
    livereload.changed(); 
    console.log('LiveReload is triggered'); 
}); 

// Define default task 
gulp.task("default", ["jade", "stylus", "scripts", "server", "watch"]);