gulp connect修改代码后自动刷新页面

gulp connect修改代码后自动刷新页面

在使用gulp connect启动服务进行前端开发过程中，往往频繁修改代码，浏览器显示确不能自动更新需要手动刷新。
为了能实现自动刷新，我们需要增加插件及先关设置，如下：

gulpfile.js

var gulp = require('gulp');
var connect = require('gulp-connect');
var runSequence = require('run-sequence');  //同步执行

// 跨域设置
var cors = function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', '*');
    res.setHeader('Access-Control-Allow-Methods', '*');
    res.setHeader('Access-Control-Allow-Credentials', 'true');
    // 浏览器缓存预检请求结果时间,单位:秒，24小时
    res.setHeader('Access-Control-Max-Age', '86400');
    next();
};
// http server
gulp.task('connect_dist', function () {
    connect.server({
        root: './dist',
        host: "0.0.0.0",
        port: 8900,
        livereload: true,    // 自动刷新
        middleware: function (connect, opt) {
            return [cors];
        }
    });
});
//
gulp.task('reload', function () {
    gulp.src("./dist")
        .pipe(connect.reload());
});
gulp.task('watch', function () {
    gulp.watch('dist/**/*.*', ['reload']);
})

gulp.task('connect', function () {
    runSequence('watch', 'connect_dist');
});

启动HTTP

gulp connect