gulp browserSync自動重新整理頁面

2022-09-03 02:09:10 字數 1464 閱讀 3435

browsersync

「browsersync能讓瀏覽器實時、快速響應您的檔案更改(html、js、css、sass、less等)並自動重新整理頁面。更重要的是browsersync可以同時在pc、平板、手機等裝置下進項除錯。您可以想象一下:「假設您的桌子上有pc、ipad、iphone、android等裝置,同時開啟了您需要除錯的頁面,當您使用browsersync後,您的任何一次**儲存,以上的裝置都會同時顯示您的改動」。無論您是前端還是後端工程師,使用它將提高您30%的工作效率。」

簡單的說,browsersync就是搭建乙個nodejs伺服器,監聽指定檔案,檔案改動後,能夠自動重新整理所有裝置的頁面。開發時再也不用手動重新整理頁面啦,yeah~。

安裝

首先,要安裝nodejs。

然後通過npm全域性安裝browsersync。

npm install -g browser-sync
完成後,檢視版本號

browser-sync --version

恭喜你,安裝成功啦。

輸入一下命令就可以啟動伺服器啦,預設埠號為3000,如果預設埠號被占用,browsersync會尋找其他可用的埠號。當然,也可以通過--port指定埠號、

browser-sync start --server
更多的命令列使用方法可以參看官網。

gulp

直接上gulpfile.js**吧。最後一行,當html發生改動後,會自動重新整理頁面。

let gulp = require('gulp');

let browsersync = require('browser-sync').create();

gulp.task('server', ['stylus', 'babel'],function()

})gulp.watch(`$/*.html`).on('change', browsersync.reload);

})

監聽靜態檔案

gulp.task('stylus', function() ))

.pipe(gulp.dest(filepath.css.dest()))

.pipe(browsersync.stream())

})gulp.task('stylus:watch', ['stylus'], browsersync.reload())

gulp.task('babel', function() ))

.pipe(gulp.dest(filepath.js.dest()));

})gulp.task('babel:watch', ['babel'], browsersync.reload())

只需要在任務的最後,呼叫reload方法,即可自動重新整理頁面了。這裡只在監聽任務中呼叫了reload()。

BroadcaseReceiver重新整理頁面

1.在全域性變數中宣告handler,方便 activity和broadcasereceiver操作和傳遞handler private handler handler public handler gethandler public void sethandler handler handler ...

HTML Button自動重新整理頁面的問題

一 問題修改1 頁面上有這樣乙個按鈕,每次點選這個按鈕的時候,執行完button的click事件後,會自動的重新重新整理一下當前的頁面。二 原因 button,input type button按鈕在ie和w3c,firefox瀏覽器區別 1 當在ie瀏覽器下面時,button標籤按鈕,input標...

layui點選按鈕自動重新整理頁面問題

button class layui btn layui btn primary onclick finddata 查詢 button 點選頁面上的按鈕,執行完button的click事件後,會自動的重新重新整理一下當前的頁面。button,input type button按鈕在ie和w3c,fi...