Gulp Livereload after ALL files have been compiled?

Question

I have a problem that I thought could be common to many people, but it seems like I'm wrong. Therefore, I hope someone can help, since I cannot find the answer in the Gulp docs.

My gulpfile.js currently has the following content:

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

What happens is that I have more than one jade file. When I work, say, in the 10th in alphabetical order, and I change it, I will immediately return to work with the furnace. The problem is that it reloads the browser tab before all the jade files finish compiling and copying to the destination, so the file that I am working on does not even compile when the update occurs. Is there any way to bind reboot after task completion?

Answer 1

You must notify of changes in work. For your tasks, you need to add the furnace load option at the end of the pipe.

For example, in a jade task:

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

I am not trying to use this code in your Gulpfile, but I think it works.

Sincerely.

Answer 2

I have done it. I needed to create a new task called "Reboot", install dependencies on it and run it after each of the other tasks. Here is the new 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"]);