前言
gulp相對上手簡單，有經驗的前端也都比較熟悉，這裡不打算一步步地介紹gulp開發環境的搭建，而是分享一下實際使用gulp的**及思路。
實現哪些功能
使用gulp的目的是實現自動化構建，提公升開發效率、**質量，所以有以下一些目標。
壓縮html、css、js、
編譯es6、less/scss
補全css字首
px轉rem
靜態資源快取控制
靜態伺服器
**檢查
實際上gulp能做到的還有更多，不過出於開發靜態頁的目的，這裡只羅列了一些常用功能。
**基本目錄如下
gulpfile.js主要**
靜態伺服器
gulp.
task
('server'
, done =>
)done()
;});
gulp.
task
('html'
,function()
)).pipe
(gulp.
dest
('dist'))
.pipe
(connect.
reload())})
gulp.
task
('css'
, done =>)]
; gulp.
src(
'src/less/**/*.less'
)//獲取所有less檔案路徑
.pipe
(less()
)//執行less
.pipe
(autoprefixer()
).pipe
(postcss
(processors)
)//px轉rem tips: 如果某個px不轉換，可使用大寫代替，類似1px
.pipe
(minifycss()
).pipe
(gulp.
dest
('dist/css'))
.pipe
(connect.
reload()
)done()
;});
gulp.
task
('js'
,function()
)).pipe
(uglify()
)//壓縮js
.pipe
(gulp.
dest
('dist/js'))
.pipe
(connect.
reload())})
gulp.
task
('images'
,function()
);
gulp.
task
('watcher'
, done =>
)
這裡還使用了gulp-rev-delete-original刪除舊檔案。
gulp.
task
("hash"
, done =>))
.pipe
(revdel(}
})).
pipe
(gulp.
dest
("dist"))
done()
;});
開啟本地伺服器，以及打包檔案。
// 初始化
gulp.
task
('init'
, gulp.
series
('clean'
, gulp.
parallel
('html'
,'css'
,'js'
,'images'))
);// 開發
gulp.
task
('default'
, gulp.
series
('init'
,'server'
,'watcher'))
;// 打包
gulp.
task
('build'
, gulp.
series
('hash'))
;
前後端不分離的情況
這裡需要區分前後端不分離的情況，由於公司的技術不公升級，或者需要維護老專案，就要應付前後端不分離的場景。比如頁面是jsp、php檔案，這時靜態頁跟實際頁面並沒有直接對應關係，每次gulp打包後，gulp-rev-all會重新生成帶hash的檔案和路徑，並且不支援test.css?v=123這種方式，這樣全部手動複製到專案目錄並不實際，只能放棄gulp-rev-all(build)，並且移除**壓縮。
值得一提的是，前後端不分離可以用後端語言進行資源的快取控制，例如使用php讀取檔案的修改日期來做版本號。
function
autoversion
($file
)else
return
$file
.'?v='
.$ver
;}
rel=
"stylesheet"
href="
= autoversion('***/css/main.css')?>"
>
最後這些是根據工作經驗總結出來的，雖然當下使用或基於webpack開發單頁是主流，但在某些覆蓋不到的場景下進行一些梳理還是有必要的。
新手快速學會gulp外掛程式的使用
const gulp require gulp const cssmin require gulp cssmin const autoprefixer require gulp autoprefixer const uglify require gulp uglify const babel req...
使用GizwitsOpenAPI，快速開發輕應用
機智雲是乙個開放的物聯網裝置平台，它為企業和個人開發者提供裝置接入 使用者賬號管理 使用者與裝置繫結管理 裝置遠端監控 定時任務以及裝置高階資料等服務。這些資料都是儲存在機智雲的資料庫中的。那麼作為開發者，如何去訪問這些資料呢？open api 就是機智雲對外提供這些資料的訪問介面！根據機智雲提供的...
使用 vue cli 開發多頁應用
開啟 build webpack.base.conf.js，找到entry，新增多入口 entry 執行 編譯的時候每乙個入口都會對應乙個chunk 開啟 build webpack.dev.conf.js，在plugins下找到new htmlwebpackplugin，在其後面新增對應的多頁，並...