WeApp-Workflow：基於Gulp 的「微信小程序」前端開發工做流

WeApp-Workflow 是我在開發我的微信小程序DeveWork+ 過程當中積累總結而來的一個基於Gulp4 的，專門用於開發微信小程序的前端開發工做流。旨在經過自動化的方式解決微信小程序開發過程當中寫前端代碼的痛點。

簡介

進行微信小程序開發，必須用官方的「微信web 開發者工具」，但這個工具的編輯器功能跟專業的編輯器比起來就差強人意了。後來發現能夠直接用 編輯器寫代碼 + 「微信web 開發者工具」作預覽功能 的組合方式進行開發，嗯開發溫馨度好了點。

微信小程序本身搞了一套CSS 的輪子（WXSS）以及HTML 的輪子（WXML），開發中形成了種種不舒服的狀況：不支持Sass/Less 這類預處理器；自定義了套rpx的單位，若是按照官方推薦的iPhone6 標準設計稿寫代碼，寫的時候還要本身運算一遍（好比說14px，要寫28rpx，我數學很差咋的）；WXSS 跟WXML 中不支持相對路徑的靜態資源引用，只能是https協議開頭的絕對路徑。

以上痛點，在使用WeApp-Workflow 後都不是痛點啦！

項目主頁

Github 項目主頁地址：https://github.com/Jeff2Ma/WeApp-Workflow （歡迎Star 一個~）

功能說明

SCSS 實時編譯爲 WXSS

使用Sass 預處理器，讓寫CSS 更加順暢。.scss文件會實時編譯爲微信小程序支持的.wxss文件。

WXSS(CSS) 中px 單位轉小程序單位rpx

以官方推薦的iPhone 6 爲標準設計格式，開發中直接寫px 便可自動轉換爲rpx。

圖片壓縮

實時壓縮圖片並採用增量方式防止被重複壓縮。

自動上傳圖片到CDN 並更新路徑爲https 絕對路徑

小程序不支持相對路徑的圖片引用，僅支持帶https 的絕對路徑。本工做流能夠WXML 以及WXSS 文件中引用的相對路徑圖片上傳到雲存儲CDN 或經過FTP/SFTP 協議上傳到我的服務器空間。目前支持騰訊雲，七牛雲。

Font 文件轉爲base64 編碼

小程序不支持相對路徑的字體文件，本功能能夠將CSS 中引用到的Font 文件轉碼爲base64 並替換原路徑。

全自動構建雪碧圖及生成相應CSS

本功能由postcss-lazysprite 插件驅動。開發中準備好圖片後僅僅寫一句相似@lazysprite "xxxx"的代碼，便可全自動構建雪碧圖及生成相應CSS。

亮點

Gulp4

採用最新的Gulp 4版本的新特徵，讓工做流運行更快。

簡潔不簡單

核心只有一個默認任務，經過合理的任務搭配機制減小繁瑣流程及來回運行終端，讓開發更便捷。

增量更新機制，運行起來更快

引入Sass 的增量編譯以及圖片相關任務的增量更新機制，讓工做流運行速度更快。

使用姿式

使用方式在本文這裏就不詳細說明了，請前往項目主頁的README 進行了解。

正常開啓後是這樣的：

還有這樣：

使用WeApp-Workflow 配合作小程序開發，直接使用第三方編輯器（WebStorm、Sublime Text 等）編輯src目錄下的文件，保存修改後gulp 進程會實時編譯到dist目錄相應的位置。而微信web 開發者工具會自動編譯刷新，此時僅充當預覽功能。嗯，若是你的開發外設（硬件設備）是雙屏的，絕對是錦上添花。

因此，開發過程當中的姿式至少應該是這樣（圖片木有顯示終端，但實際上是運行着的）：

感想

Jeff 在兩年前曾經弄過一個Gulp 的工做流JGulp，那時候還寫了一篇文章，現在JGulp 早已再也不維護，然時至今日還不時有人在這個Repo 上點star。歲月不饒人啊，折騰這折騰那一晃就兩年了。

再次說明下，WeApp-Workflow 適合於「小」的小程序開發，若是你的小程序是很複雜的，本工做流可就不必定合適了。另外本文的涉及到WeApp-Workflow 使用的內容以Github 上的README 爲準。

最後，再次喊一聲，歡迎前往主頁地址：https://github.com/Jeff2Ma/WeApp-Workflow 點個star！

原文地址 https://devework.com/weapp-wo... 轉載請註明來源