yarn add browser-sync --dev
const browsersync =require
("browser-sync"
)const bs = browsersync.
create()
// 建立乙個開發伺服器
執行// 啟動服務const
serve=(
)=>})
}module.exports =
yarn gulp serve，執行成功會開啟瀏覽器進入到dist目錄下的index.html頁面
通過配置files可以在修改dist目錄下的檔案後實現**熱更新bs.init(}
})
而我們一般不會去dist目錄下修改，所以我們用到了gulp的watch方法
這樣就能在修改src目錄下的檔案後，重新構建dist目錄中的檔案，再被監聽到，從而實現**熱更新。const=require
("gulp"
)const
serve=(
)=>
)}
但這還是有一些缺陷，例如、字型、以及public中的檔案改變後也重新構建，在開發階段是多餘的開銷，只需要在上線之前去構建一下就好。
可以做出如下優化：
將basedir配置成這樣的意思是，**發起請求時會先到dist中查詢檔案，找不到再去src目錄中找，再找不到就去public中找，這樣不去構建images、fonts、public也不會有什麼影響。bs.init(}
)
執行serve任務之前最好先構建一次
執行// compile中並行了執行樣式轉換、js轉換、html轉換const compile =
parallel
(style, script, page)
// develop按順序執行compile、serve
const develop =
series
(compile, serve)
module.exports =
yarn gulp develop
就會先構建一次html、js、css，再啟動伺服器
還有一種實現熱更新的方式constserve=(
)=>
)
也是利用了reload方法
conststyle=(
)=>).
pipe
(plugins.
sass()
).pipe
(dest
('dist'))
.pipe
(bs.
reload()
)}// 此時配置當中的files就不需要了
const
serve=(
)=>
))watch
('src/*.html'
, page)
watch([
'src/assets/images/**'
,'src/assets/fonts/**'
,'public/**'
], bs.reload)
bs.init(}
})}
開發伺服器控制項
一.基類的選擇 control 控制項開發基類，所有控制項都直接或間接繼承該類。提供各類控制項的通用屬性和方法，id，visible等.擴充套件靈活性最強。webcontrol 繼承至control，還增加了布局，可訪問性，外觀樣式等特性。compositecontrol 把現有控制項聚合起來建立乙...
利用gulp搭建本地伺服器，並能模擬ajax
實現本地http伺服器，頁面實時重新整理，可以模擬ajax請求 新建package.json檔案。用到了gulp gulp webserver gulp livereload，package.json的內容如下 author license isc devdependencies 執行npm ins...
利用gulp搭建本地伺服器，並能模擬ajax
工作中可能會用到的小工具，在此記錄一下。可以實現的功能有 本地http伺服器 頁面實時重新整理 可以模擬ajax請求 第一步，新建package.json檔案。用到了gulp gulp webserver gulp livereload package.json的內容如下 author licens...