項(xiàng)目地址
Github 倉庫本體(發(fā)布版,下載地址在這里的 release 里)
Github 倉庫分身(開發(fā)版意推,clone 或 fork 這個(gè))
splice
GUI workflow for Front-End developers based on Electron
功能
實(shí)現(xiàn)前端常用的文件處理功能:
- HTML:
- 壓縮 html
- 通過 html 中的注釋來合并 css / js
- CSS:
- 添加兼容性前綴
- 壓縮 css
- 圖片轉(zhuǎn) base64
- 精靈圖
- 處理 css 文件并生成相應(yīng)的精靈圖
- JS:
- 壓縮 js
- IMAGE:
- 壓縮圖片
- 將多張圖片合成精靈圖并生成相應(yīng)的 css
- JSON:
- 壓縮 json
- 通用:
- 格式化
- 格式化 JavaScript, JSON, HTML 和 CSS 等文件
- 文件重命名
- 自定義設(shè)置
- 設(shè)置文件的導(dǎo)出目錄
- 格式化
其他:
- 快捷鍵:
- 刷新頁面:
Ctrl+Alt+R
- 開啟或關(guān)閉開發(fā)者工具:
Ctrl+Alt+T
- 刷新頁面:
- 右鍵菜單:
- 刷新:刷新頁面
- 開發(fā)者工具:開啟或關(guān)閉開發(fā)者工具
- 檢查更新:檢查是否有新版本
- 重啟應(yīng)用:刷新解決不了的問題就重啟吧
- 在線更新:
- 打開應(yīng)用后默認(rèn)檢查更新,右鍵菜單也可以點(diǎn)擊檢查更新
- 當(dāng) github 上存在更新的版本時(shí)匹中,顯示 一鍵升級(jí) 按鈕
- 更新思路:替換文件切蟋,自動(dòng)安裝新增的 npm 模塊(可能安裝失敗,可以到應(yīng)用根目錄
...resources/app/
手動(dòng)安裝) - 要是更新后出了問題七蜘,操作項(xiàng)的表單有點(diǎn)奇怪(有重復(fù)的表單元素之類的 ),就打開開發(fā)者工具墙懂,選擇 Application 標(biāo)簽橡卤,找到 Local Storage,然后刪掉緩存的數(shù)據(jù)损搬,再右鍵刷新下 Splice 應(yīng)用碧库,應(yīng)該就能恢復(fù)正常了(老天保佑!)
截圖
界面:
WIN
MAC
簡單操作:
壓縮并重命名圖片
下載地址
-
win zip(解壓了找到
splice.exe
雙擊打開就能用) - win installer(雙擊該文件進(jìn)行安裝巧勤,與開箱即用版差別就是該安裝器小了 5MB嵌灰,(# ̄▽ ̄#))
- mac
開發(fā)
- 拉取項(xiàng)目
git clone https://github.com/SuperAL/splice-dev.git
下面是針對(duì) splice 倉庫的 clone 操作,現(xiàn)在用上面的方法即可
git clone https://github.com/SuperAL/splice.git --depth=1
# 解釋一下那個(gè) `--depth=1`颅悉,代表只獲取最新的 commit 記錄沽瞭。
# 因?yàn)橹暗囊恍┱`操作,不小心將打包后的文件也上傳到了 git剩瓶,即使文件刪掉了記錄還是存在驹溃,因此記錄文件超級(jí)大,直接導(dǎo)致 `clone` 超級(jí)慢延曙。
# 加上 `--depth=1` 可以解決 `clone` 慢的問題豌鹤。
- 安裝依賴
npm install
- 運(yùn)行項(xiàng)目
npm run start
- 打包項(xiàng)目
# win 64位
npm run pack:win
# win 32位
npm run pack:win32
# mac,需要使用 mac 電腦
npm run pack:mac
第二種打包方式(使用了 electron-forge枝缔,該方式打包的 exe
版本比 electron-packager
大一點(diǎn)點(diǎn))
# 全局安裝 electron-forge
npm install electron-forge -g
# 打包你當(dāng)前使用的平臺(tái)的版本
electron-forge package
# 制作安裝器(installer)
electron-forge make
使用到的文件操作相關(guān)模塊
工具類
html 壓縮
通過 html 文件處理 css布疙、js 文件的合并
css 壓縮、添加兼容前綴
將 css 中通過 url 引入的圖片轉(zhuǎn)成 base64
通過 css 生成精靈圖
js 壓縮
圖片壓縮
精靈圖處理
json 文件壓縮
JavaScript, JSON, HTML 和 CSS 代碼格式化
文件重命名
監(jiān)聽文件變化愿卸,顯示 loading 效果
協(xié)議
GNU General Public License v3.0
本項(xiàng)目僅供學(xué)習(xí)交流和私人使用拐辽,禁止用作商業(yè)用途