Gulp Livereload после того, как ВСЕ файлы были скомпилированы?

Question

У меня проблема, которая, как я думал, может быть распространена для многих людей, но кажется, что я не прав. Поэтому я надеюсь, что кто-то может помочь, так как я не могу найти ответ в документах Gulp.

Сейчас мой gulpfile.js имеет следующее содержание:

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

Что происходит, что у меня есть файл более 1 нефрит. Когда я работаю, скажем, в 10-м в алфавитном порядке, и я меняю его, я сразу же вернусь к работе с печью. Проблема в том, что он перезагружает вкладку браузера, прежде чем все нефритовые файлы закончат компиляцию и копирование в пункт назначения, поэтому файл, который я сейчас работаю, даже не компилируется, когда происходит обновление. Есть ли способ связать перезагрузку после завершения задачи?

Answer 1

Вы должны уведомить пользователя об изменениях. В ваших задачах вы должны добавить опцию печной нагрузки в конце трубы.

Например, в нефрита задачи:

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

Я не попробовать этот код в Gulpfile, но я думаю, что это работает.

С уважением.

Answer 2

Я сделал это. Мне нужно было создать новую задачу под названием «Перезагрузка», установить на нее зависимости и запустить ее после каждой из других задач. Вот новый Gulpfile ":.

„использовать строгий“;

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