gulp无法热更新!!!

Question

`这是我的gulp配置

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var open = require('open');

var app = {
    srcPath: 'src/',
    devPath: 'build/',
    prdPath: 'dist/'
}

gulp.task('lib',function(){
    gulp.src('bower_components/**/*.js')//读取bower_components的文件
    .pipe(gulp.dest(app.devPath + 'vendor'))
    .pipe(gulp.dest(app.prdPath + 'vendor'))
    .pipe($.connect.reload());
})

gulp.task('html',function(){
    gulp.src(app.srcPath + '**/*.html')
    .pipe(gulp.dest(app.devPath))
    .pipe(gulp.dest(app.prdPath))
    .pipe($.connect.reload());
})

gulp.task('json',function(){
    gulp.src(app.srcPath + 'data/**/*.json')
    .pipe(gulp.dest(app.devPath + 'data'))
    .pipe(gulp.dest(app.prdPath + 'data'))
    .pipe($.connect.reload());
})

gulp.task('less', function(){
    gulp.src(app.srcPath + 'style/index.less')
    .pipe($.less())
    .pipe(gulp.dest(app.devPath + 'css'))
    .pipe($.cssmin())
    .pipe(gulp.dest(app.prdPath + 'css'))
    .pipe($.connect.reload());
})

gulp.task('js',function(){
    gulp.src(app.srcPath + 'script/**/*.js')
    .pipe($.concat('index.js'))
    .pipe(gulp.dest(app.devPath + 'js'))
    .pipe($.uglify())
    .pipe(gulp.dest(app.prdPath + 'js'))
    .pipe($.connect.reload());
})

gulp.task('image', function(){
    gulp.src(app.srcPath + 'image/**/*')
    .pipe(gulp.dest(app.devPath + 'image'))
    .pipe($.imagemin())
    .pipe(gulp.dest(app.prdPath + 'image'))
    .pipe($.connect.reload());
})

gulp.task('build',['image','js','less','lib','html','json'])

gulp.task('serve', ['build'], function(){
    $.connect.server({
        root: [app.devPath],
        livereload: true,
        port:1234
    });
    open('http://localhost:1234');

    gulp.watch('bower_components/**/*', ['lib']);
    gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
    gulp.watch(app.srcPath + '**/*.html', ['html']);
    gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
    gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
    gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
    gulp.watch(app.srcPath + 'image/**/*', ['image']);
})

gulp.task('clean', function(){
    gulp.src([app.devPath, app.prdPath])//清空两个目录
    .pipe($.clean())
})

//默认执行serve任务
gulp.task('default',['serve']);

这是我的目录结构

像修改了js或者html之类的文件这里有提示，但是页面却未更新
这是怎么回事？

Answer 1

html有没有加这段代码

        document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
        ':35729/livereload.js?snipver=1"></' + 'script>')

Answer 2

这是我的gulp配置，你自己看吧。希望对你有帮助

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
var gulpless = require('gulp-less');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');

/**
 *启动express服务器
 */
gulp.task('nodemon', function(cb) {
    var flag = false;
    return nodemon({
        script: './app.js',
        ignore: ['.vscode/', '.idea/', 'node_modules/']
    }).on('start', function() {
        if (!flag) {
            cb();
            flag = true;
        }
    })

})
/**
 * 编译less
 */
gulp.task('less', function() {

    return gulp.src('less/**.less')
        .pipe(gulpless())
        .pipe(gulp.dest('public/style'))
        .pipe(reload({
            stream: true
        }));
})
/**
 * watch the less file change
 */
gulp.task('auto', function() {
    gulp.watch('less/**.less', ['less'])
})
/**
 *同步刷新浏览器
 */


gulp.task('browserSync', ['nodemon'], function() {

    browserSync.init(null, {
        proxy: 'http://localhost:3002',
        files: ['less/*.less',"public/**/*.*", "views/**/*.*", "server/**/*.*", 'config/**/*.*'],
        port: 8080
    })


})


gulp.task('default', [ 'browserSync', 'less'],function(){
    gulp.watch(['less/**/*.less'],['less'])
})

Answer 3

热更新需要用到插件browserSync Browsersync + Gulp.js

Answer 4

我在项目中是这样用的，关键部分红圈圈出了。