基於 Electron 的前端檔案處理工具

Alexee發表於2017-12-07
前端

專案地址

Github，歡迎 Star ~ ╰(´︶`)╯♡

splice

GUI workflow for Front-End developers based on Electron
歡迎下載來使用，程式碼的話感興趣可以看（寫得亂七八糟，能用就行，捂臉 "(￣▽￣)"""）
解決痛點：急需處理一些前端檔案時沒有必要再編寫並執行 gulp 程式碼或者開啟線上網站：程式碼貼上=>壓縮（或其他處理）=>複製出來，使用這個 Electron 客戶端可以直接選擇所需操作，拖拽處理檔案（可批量），處理後預設覆蓋原檔案，可新增重新命名操作等等~

功能

實現前端常用的檔案處理功能：

  1. HTML：
    • 壓縮 html
    • 通過 html 中的註釋來合併 css / js
  2. CSS：
    • 新增相容性字首
    • 壓縮 css
    • 圖片轉 base64
    • 精靈圖
      • 處理 css 檔案並生成相應的精靈圖
  3. JS：
    • 壓縮 js
  4. IMAGE：
    • 壓縮圖片
    • 將多張圖片合成精靈圖並生成相應的 css
  5. JSON：
    • 壓縮 json
  6. 通用：
    • 格式化
      • 格式化 JavaScript, JSON, HTML 和 CSS 等檔案
    • 檔案重新命名
    • 自定義設定
      • 設定檔案的匯出目錄

其他：

  • 快捷鍵：
    • 重新整理頁面：Ctrl+Alt+R
    • 開啟或關閉開發者工具：Ctrl+Alt+T
  • 右鍵選單：
    • 重新整理：重新整理頁面
    • 開發者工具：開啟或關閉開發者工具
    • 檢查更新：檢查是否有新版本
    • 重啟應用：重新整理解決不了的問題就重啟吧
  • 線上更新：
    • 開啟應用後預設檢查更新，右鍵選單也可以點選檢查更新
    • 當 github 上存在更新的版本時，顯示 一鍵升級 按鈕
    • 更新思路：替換檔案，自動安裝新增的 npm 模組（可能安裝失敗，可以到應用根目錄 ...resources/app/ 手動安裝）

截圖

介面：

WIN
MAC

簡單操作：

壓縮並重新命名圖片

下載地址

  • win zip（解壓了找到 splice.exe 雙擊開啟就能用）
  • win installer（雙擊該檔案進行安裝，與開箱即用版差別就是該安裝器小了 5MB，(＃￣▽￣＃)）
  • mac

開發

  1. 拉取專案
git clone https://github.com/SuperAL/splice.git --depth=1
# 解釋一下那個 `--depth=1`，代表只獲取最新的 commit 記錄。 
# 因為之前的一些誤操作，不小心將打包後的檔案也上傳到了 git，即使檔案刪掉了記錄還是存在，因此記錄檔案超級大，直接導致 `clone` 超級慢。
# 加上 `--depth=1` 可以解決 `clone` 慢的問題。
複製程式碼
  1. 安裝依賴
npm install 
複製程式碼
  1. 執行專案
npm run start
複製程式碼
  1. 打包專案
# win 64位
npm run pack:win

# win 32位
npm run pack:win32

# mac，需要使用 mac 電腦
npm run pack:mac
複製程式碼

第二種打包方式（使用了 electron-forge，該方式打包的 exe 版本比 electron-packager 大一點點）

# 全域性安裝 electron-forge
npm install electron-forge -g

# 打包你當前使用的平臺的版本
electron-forge package

# 製作安裝器（installer） 
electron-forge make
複製程式碼

使用到的檔案操作相關模組

工具類

html 壓縮

通過 html 檔案處理 css、js 檔案的合併

css 壓縮、新增相容字首

將 css 中通過 url 引入的圖片轉成 base64

通過 css 生成精靈圖

js 壓縮

圖片壓縮

精靈圖處理

json 檔案壓縮

JavaScript, JSON, HTML 和 CSS 程式碼格式化

檔案重新命名

監聽檔案變化，顯示 loading 效果

協議

GNU General Public License v3.0
本專案僅供學習交流和私人使用，禁止用作商業用途

相關文章