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

安裝：

npm install --save-dev [email protected]
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 的某些方法無法在此正確執行