gulp + browsersync实现页面自动刷新
生活随笔
收集整理的這篇文章主要介紹了
gulp + browsersync实现页面自动刷新
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
寫習慣了vue,特別喜歡vue的自動刷新功能,于是琢磨在node中如何自動刷新,使用過nodemon, 但是感覺效果差點,看到網上有gulp + livereload的方案和gulp +browsersync的方案,但都是褒貶不一,先簡單記錄如下:
第一、依賴安裝
第二、根目錄創建gulpfile.js,具體代碼如下
var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var reload = browserSync.reload; var nodemon = require('gulp-nodemon');//這個可以讓express啟動 gulp.task("node", function() {nodemon({script: './bin/server',ignore : ["public/"], env: {'NODE_ENV': 'development'}}) });gulp.task('server', ["node"], function() {//這的文件只需要監聽前端的,一般后端開發不需要刷新頁面var files = ['views/**/*.*'];//gulp.run(["node"]);browserSync.init({proxy: 'http://localhost:8001',browser: 'chrome',notify: false,port: 9999 //這個是browserSync對http://localhost:3000實現的代理端口});gulp.watch(files).on("change", reload); });參考鏈接:
https://www.jianshu.com/p/60afca6a00b3
https://www.jianshu.com/p/d31be76f8055
http://www.browsersync.cn/docs/gulp/
http://www.browsersync.cn/docs/api/#api-init
總結
以上是生活随笔為你收集整理的gulp + browsersync实现页面自动刷新的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JavaScript事件详解
- 下一篇: 计算机论文的写作方法有哪些,计算机专业毕