Live Reload не работает с express, connect-livereload, tiny-lr, gulp-embedlr и gulp-livereload

Question

Я следил за this tutorial, чтобы настроить Gruntfile для небольшого проекта, над которым я работаю. все, кажется, работает отлично, за исключением живой перезагрузки. Я не получаю никаких ошибок, но я не могу перезагрузить их. Вот код:

var browserify = require('browserify'), 
    buffer = require('vinyl-buffer'), 
    concat = require('gulp-concat'), 
    del = require('del'), 
    embedlr = require('gulp-embedlr'), 
    express = require('express'), 
    gulp = require('gulp'), 
    gutil = require('gulp-util'), 
    jshint = require('gulp-jshint'), 
    livereload = require('connect-livereload'), 
    lrserver = require('tiny-lr')(), 
    refresh = require('gulp-livereload'), 
    replace = require('gulp-replace'), 
    source = require('vinyl-source-stream'), 
    sourcemaps = require('gulp-sourcemaps'), 
    uglify = require('gulp-uglify'); 

// clean 
gulp.task('clean', function(callback) { 
    del('./dist/*', callback); 
}); 

// img 
gulp.task('img', function() { 
    return gulp.src('./src/img/*') 
     .pipe(gulp.dest('./dist/img/')); 
}); 

// index 
gulp.task('index', function() { 
    return gulp.src('./src/index.html') 
     .pipe(replace('__now__', new Date().toDateString())) 
     .pipe(gulp.dest('./dist/')); 
}); 

gulp.task('index-dev', function() { 
    return gulp.src('./src/index.html') 
     .pipe(replace('__now__', new Date().toDateString())) 
     .pipe(gulp.dest('./dist/')) 
     .pipe(refresh(lrserver)); 
}); 

// script 
gulp.task('lint', function() { 
    return gulp.src('./src/script/*') 
     .pipe(jshint()) 
     .pipe(jshint.reporter('default')); 
}); 

gulp.task('script', [ 'lint' ], function() { 
    browserify({ entries: './src/script/dforbes.js', debug: true }) 
    .bundle() 
    .pipe(source('dforbes.js')) 
    .pipe(buffer()) 
    .pipe(uglify({ mangle: false })) 
    .on('error', gutil.log) 
    .pipe(gulp.dest('./dist/script/')); 
}); 

gulp.task('script-dev', [ 'lint' ], function() { 
    browserify({ entries: './src/script/dforbes.js', debug: true }) 
    .bundle() 
    .pipe(source('dforbes.js')) 
    .pipe(buffer()) 
    .pipe(sourcemaps.init({ loadMaps: true })) 
    .pipe(uglify({ mangle: false })) 
    .on('error', gutil.log) 
    .pipe(sourcemaps.write('./')) 
    .pipe(gulp.dest('./dist/script/')); 
}); 

// style 
gulp.task('style', function() { 
    return gulp.src('./src/style/*') 
     .pipe(gulp.dest('./dist/style/')); 
}); 

// tmp 
gulp.task('tmp', function() { 
    return gulp.src('./src/tmp/*') 
     .pipe(gulp.dest('./dist/tmp/')); 
}); 

gulp.task('tmp-dev', function() { 
    return gulp.src('./src/tmp/*') 
     .pipe(gulp.dest('./dist/tmp/')) 
     .pipe(refresh(lrserver)); 
}); 

// watch 
gulp.task('watch', function() { 
    gulp.watch([ './src/img/*' ], [ 'img' ]); 
    gulp.watch([ './src/index.html' ], [ 'index-dev' ]); 
    gulp.watch([ './src/script/*' ], [ 'script-dev' ]); 
    gulp.watch([ './src/style/*' ], [ 'style' ]); 
    gulp.watch([ './src/tmp/*' ], [ 'tmp-dev' ]); 
}); 

// dev 
gulp.task('dev', [ 'clean' ], function() { 
    gulp.start([ 'img', 'index', 'script-dev', 'style', 'tmp' ]); 

    var livereloadPort = 35729; 
    var serverPort = 8080; 

    var server = express(); 
    server.use(livereload({ port: livereloadPort, start: true })); 
    server.use(express.static('./dist')); 
    server.all('/*', function(req, res) { 
    res.sendFile('index.html', { root: 'dist' }); 
    }); 

    server.listen(serverPort); 
    lrserver.listen(livereloadPort); 

    gulp.start('watch'); 
}); 

// default 
gulp.task('default', [ 'clean' ], function() { 
    gulp.start([ 'img', 'index', 'script', 'style', 'tmp' ]); 
}); 

Answer 1

Вы пропустите refresh вызов, чтобы позволить LiveReload знать, что что-то изменилось на некоторых участках. Вот изменения для style задачи:

gulp.task('style', function() { 
    return gulp.src('./src/style/*') 
     .pipe(gulp.dest('./dist/style/')) 
     .pipe(refresh()); 
}); 

Просто добавьте последнюю pipe везде вы хотите refresh случиться.

Update

Кроме того, есть некоторые проблемы в вашем Gulpfile. Пожалуйста, верните каждое заявление gulp.src, которое вы найдете, также не помещайте два оператора gulp.src в один gulp.task, если вы не объедините их.

// wrong 
gulp.task('tmp-dev', function() { 
    gulp.src('./src/index.html') 
    .pipe(gulp.dest('./dist/')) 
    .pipe(refresh(lrserver)); 

    gulp.src('./src/tmp/*') 
    .pipe(gulp.dest('./dist/tmp/')) 
    .pipe(refresh(lrserver)); 
}); 

// correct 
gulp.task('tmp-dev', function() { 
    return gulp.src(['./src/index.html','./src/tmp/*']) 
    .pipe(gulp.dest('./dist/')) 
    .pipe(refresh(lrserver)); 
}); 

Другим решением было бы создать наблюдатель указал на каталог dist, освежающие каждый раз что-то изменилось там:

gulp.watch('./dist/**/*', refresh); 

Другой способ будет предпочтительнее, так как она дает вам больше control Редактировать: Этот фиктивный