Gulp開發伺服器

yarn add browser-sync --dev

const browsersync =

require
("browser-sync"
)const bs = browsersync.
create()
// 建立乙個開發伺服器

// 啟動服務

const
serve=(
)=>})
}module.exports =

bs.

init(}
})

而我們一般不會去dist目錄下修改，所以我們用到了gulp的watch方法

const

=require
("gulp"
)const
serve=(
)=>
)}

但這還是有一些缺陷，例如、字型、以及public中的檔案改變後也重新構建，在開發階段是多餘的開銷，只需要在上線之前去構建一下就好。

可以做出如下優化：

bs.

init(}
)

執行serve任務之前最好先構建一次

// compile中並行了執行樣式轉換、js轉換、html轉換

const compile =
parallel
(style, script, page)
// develop按順序執行compile、serve
const develop =
series
(compile, serve)
module.exports =

就會先構建一次html、js、css，再啟動伺服器

const

serve=(
)=>
)

也是利用了reload方法

const

style=(
)=>).
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...