通過gulp+gulp-livereload實現頁面熱更新

 

1、安裝環節，通過npm 安裝gulp-livereload      

　　　　npm install --save-dev gulp-livereload (這里不推薦使用cnpm 我在用cnpm安裝后使用時 報找不到modules);

2、引入環節，打開gulpfile.js

　　　　1、const gulp = require('gulp');//基礎庫

 

　　　　2、const livereload = require('gulp-livereload');//瀏覽器熱更新功能

 

3、編寫執行環節//熱更新

   gulp.task('Watch', function() {
         livereload.listen();
         gulp.watch('files/**/*.*',function(file){
         livereload.changed(file.path);
    });
});
這里需要要求網頁必須在服務器環境下執行
　　可以通過編輯器支持，我是用webstorm   另外使用php一條龍全包的xampp環境配置，通過node.js配置都可以，網上搜搜教程


！！！！！！！！ 注意 到此為止還不可以，咋們需要裝一個chrome插件配合才可以使用，不過這個插件需要翻牆  所以，這里提供鏈接
　　

說明：谷歌瀏覽器安裝插件需要FQ，我已經下載了最新版本2.1.0到本地，點擊下載（谷歌為.crx文件，火狐為.xpi文件）

安裝方法：谷歌瀏覽器安裝crx插件方法、火狐瀏覽器直接將xpi文件拖進瀏覽器即可安裝

 

　　！！！！！！！！注意2  gulp Watch  后 打開頁面 在瀏覽器的右上角會發現點擊它即可實現熱更效果

 

本文參考自：https://www.cnblogs.com/yuzhongwusan/p/5417074.html，十分感謝該博主的分享幫助；