基於 Electron 的前端文件處理工具

項目地址

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 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` 慢的問題。
複製代碼

2. 安裝依賴

npm install 
複製代碼

3. 運行項目

npm run start
複製代碼

4. 打包項目

# 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
複製代碼

使用到的文件操做相關模塊

工具類

• gulp
• gulp-if

html 壓縮

• gulp-htmlmin

經過 html 文件處理 css、js 文件的合併

• gulp-usemin2

css 壓縮、添加兼容前綴

• gulp-postcss
• gulp-cssnano
• autoprefixer

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

• gulp-base64

經過 css 生成精靈圖

• gulp-sprite-generator2

js 壓縮

• gulp-uglify

圖片壓縮

• gulp-imagemin
• imagemin-pngquant

精靈圖處理

• gulp.spritesmith
• vinyl-buffer
• merge-stream

json 文件壓縮

• gulp-json-minify

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

• gulp-jsbeautifier

文件重命名

• gulp-rename

監聽文件變化，顯示 loading 效果

• gulp-watch
• path-exists

協議

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