gulp插件- 自动刷新(gulp-connect)

安装：

npm install --save-dev gulp@3.9.0
npm install --save-dev gulp-connect

作用：

当代码变化时，它可以帮我们自动刷新页面。

使用：

var gulp =require("gulp");
var connect = require('gulp-connect');

// 创建实时更新服务
gulp.task('server', function () {
    connect.server({
        root:"src",// 路径
        port:'8081',//端口号
        livereload: true //false的话就是关闭实时更新
    });
});


// 热更新 src下的所有文件
gulp.task("reload",function(){
    gulp.src("./src/**/*.*")
        .pipe(connect.reload());
});

// 监听 src下的所有文件
gulp.task("watch",function(){
    gulp.watch("./src/**/*.*", ["build","reload"]);
});


gulp.task("build",['html','css']);

// html 任务
gulp.task("html",function(){
    gulp.src("./src/html/*.html").pipe(gulp.dest('dist/html'))
});

// css 任务
gulp.task("css",function(){
    gulp.src("./src/css/*.css").pipe(gulp.dest('dist/css'))
});

//启动实时更新 gulp dev
gulp.task("dev",["server",'watch'],function(){ // function可以不传
    console.log("dev")
});

运行：

gulp dev

就可以在浏览器上输了 localhost:8081 预览项目了，并且但我们src下的文件改动之后无需刷新页面自动更新。

提示：gulp的版本需要时 3.9.0 的，最新 4.0 的某些方法无法在此正确执行