Gulp Livereload po skompilowaniu WSZYSTKICH plików?

Question

Mam problem, który moim zdaniem może być wspólny dla wielu osób, ale wydaje mi się, że nie mam racji. Mam więc nadzieję, że ktoś może pomóc, ponieważ nie mogę znaleźć odpowiedzi w dokumentach Gulpa.

Teraz moje gulpfile.js ma następującą zawartość:

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

Co się dzieje, że mam więcej niż 1 plik jade. Kiedy pracuję nad - powiedzmy - 10-tą w kolejności alfabetycznej, a ja to zmienię, natychmiast wykonuję aktualizację livereload. Problem polega na tym, że przeładowuje kartę przeglądarki, zanim wszystkie pliki jade zakończą kompilację i zostaną skopiowane do miejsca docelowego, dlatego plik, nad którym obecnie pracuję, nie jest nawet kompilowany podczas odświeżania. Czy istnieje sposób, w jaki mogę połączyć przeładowanie po zakończeniu zadania?

Answer 1

Musisz powiadomić livereload o zmianach. W swoich zadaniach musisz dodać opcję livereload na końcu potoku.

Na przykład w jade zadania:

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

Nie próbuję tego kodu w swojej Gulpfile, ale myślę, że to działa.

Pozdrawiam.

Answer 2

Zrobiłem to. Musiałem stworzyć nowe zadanie o nazwie "Załaduj ponownie", umieścić na nim zależności i uruchomić je po wykonaniu każdego z pozostałych zadań. Oto nowy 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"]);