差不多前端工作上一段時(shí)間完成這樣的頁(yè)面沒什么難度纽哥。當(dāng)時(shí)項(xiàng)目經(jīng)理說App發(fā)布會(huì)在中午2點(diǎn)開始，12點(diǎn)半告訴我要完成這個(gè)頁(yè)面馋评，要求如下：
- 解決手機(jī)端兼容性的問題硼瓣，尤其是小米瀏覽器
- 解決響應(yīng)式的問題，iphone5上能顯示全
- 在微信中顯示提示“在手機(jī)瀏覽器中打開”
- 圖片上傳到CDN倘感，區(qū)域資源全部打包到一個(gè)html中并壓縮(最終交付一個(gè)html)
看樣子要上一個(gè)Gulp工程了放坏，于是著急的寫了一個(gè)gulpfile.js，然后吭哧吭哧了差不多1個(gè)多小時(shí)完成了頁(yè)面侠仇。頁(yè)面完成后轻姿，覺得這樣的需求應(yīng)該不是突發(fā)的，日后App發(fā)布時(shí)的H5下載頁(yè)都需要寫一份逻炊，所以將項(xiàng)目當(dāng)做種子文件互亮，發(fā)布到Github上便于以后應(yīng)對(duì)。
項(xiàng)目地址
點(diǎn)這里余素，預(yù)覽最終預(yù)覽如下：
如何開始
- 點(diǎn)擊上面的地址下載該項(xiàng)目
- 進(jìn)入目錄運(yùn)行
npm install - 執(zhí)行
gulp serve開始編碼
Gulp任務(wù)
| 任務(wù)名稱 | 任務(wù)介紹 |
|---|---|
| serve | 開啟服務(wù)豹休，頁(yè)面修改能自動(dòng)刷新 |
| default | 清理dist目錄，執(zhí)行build |
| build | 生成最終文件 |
| serve:dist | 生成最終文件桨吊，并進(jìn)行預(yù)覽 |
以上內(nèi)容的最新版請(qǐng)查看我的博客威根，點(diǎn)這里。
(完)
