我理想中的前端工做流

時間 2019-11-09

原文原文鏈接

在平常的前端開發中，咱們會遇到 LESS/SASS 編譯、CSS 前綴自動補全 、CSS 壓縮、 圖片壓縮、JS 合併壓縮、佈署發佈 等各類各樣的操做。一般，咱們都會根據實際狀況定製一個 流程 性的工具來實現全部常規的功能，這，就是我理解的 前端工做流。css

CssGaga

曾經，使用過一段時間的 CssGaga，爲它的強大功能而感到震憾，幾乎解決了全部常見的需求。html

那一段時間裏，習慣了 CssGaga 拖圖片即壓縮上傳，拖 CSS 文件即壓縮+合併雪碧圖上傳，拖啥就作啥。也就是說，你想要作什麼操做，就手動拖拉什麼文件就行了。前端

但隨着本身慢慢變胖，慢慢的愈來愈懶，有時候就想，爲何每次完成開發後，要手動拖幾回文件，而不是一鍵就搞定全部必要的功能呢？node

CssGaga 的模式很是值得借鑑學習，特別是它的 雪碧圖合成 方式，見過不少優秀的雪碧圖插件都是參照其寫法，如：grunt-sprite 、gulp-tmtspritegit

我理想中的工做流

一我的，想某件事，想得多了，就會有所行動，好比我曾經喜歡的妹子，如今成了個人老婆。。。。。github

很差意思，扯遠了，繼續講我想要的工做流模式。web

結合公司的工做模式和實際業務實踐，我把一個這個流程分紅兩個過程：開發過程 和 佈署過程。npm

1. 開發過程

當我開始開發時，我但願是所見即所得的，個人每一次代碼編輯，都能即時的響應反饋在我面前; 我用的是能提高我效率的 CSS 預處理語言，我但願她能即時的幫我編譯成 CSS; 我用 rem, 但我寫的是 px，我但願她能幫我轉換......json

我想要的 開發過程 很簡單，就是能幫我提高效率！gulp

2. 佈署過程

開發完後，終於到了要發佈的時候了。發佈前，須要生成能夠放到 生產環境 中的代碼，而這個過程，要作的工做有很是多，大概有以下：

Less/Sass -> CSS
CSS Autoprefixer 前綴自動補全
CSS 壓縮合並
CSS Sprite 雪碧圖合成
Retina @2x & @3x 自動生成適配
imagemin 圖片壓縮
JS 合併壓縮
EJS 模版語言
...

我但願這個過程是一個命令或一鍵就能夠完成的，而不是屢次拖拉生成。

我要的流程其實很簡單，就是越簡單越好！

下面，介紹一下所以而誕生的解決方案------tmt-workflow。

tmt-workflow

tmt-workflow 是一個基於 Gulp(v4.0)、跨平臺(Mac & Win)、高效、可定製的前端工做流程。

功能特性

她除了實現了以上設想的各類功能外，還有：

基於 Gulp4 ，超好用的流程化(gulp.series, gulp.parallel)控制 API，更高的性能
跨平臺的，支持 Win 和 Mac，知足各種開發者
全部項目共享一個 node_modules，只需一次 npm install 便可
可定製的，你能夠根據本身的需求修改實現你本身想要的功能
自帶 rem適配方案、智能 Webp 解決方案、去緩存文件 Reversion (MD5) 解決方案

快速開始

如下 2 種方式任選，請確保已安裝 Node.js 環境

使用 Yoeman 腳手架 generator-workflow 自動安裝（推薦）：
- npm install -g generator-workflow
- yo workflow
直接下載安裝：
1. 全局安裝 Gulp 4，執行：npm install gulpjs/gulp#4.0 -g
2. 點擊下載 tmt-workflow，進入根目錄執行： npm install

注1：Gulp 4 目前還沒有正式發佈，Windows 用戶請先安裝 git，
而後在 Git Bash 下執行 npm install 便可（非 CMD）。

注2：如遇 npm install 網絡問題，推薦嘗試 cnpm 安裝環境依賴

工做流目錄結構

tmt-workflow/
│
├── _tasks                  // Gulp 任務目錄
│   ├── TaskBuildDev.js     // gulp build_dev
│   ├── TaskBuildDist.js    // gulp build_dist
│   ├── TaskFTP.js          // gulp ftp
│   ├── TaskZip.js          // gulp zip
│   │
│   ├── common
│   │   └── webp.js
│   │
│   ├── index.js
│   │
│   ├── lib
│   │   └── util.js
│   │
│   └── plugins               // 插件目錄
│       ├── TmTIndex.js
│       └── ftp.js
│
├── package.json
│
└── project                   // 項目目錄，詳見下述項目結構 ↓↓↓
    ├── src
    ├── dev
    ├── dist
    └── gulpfile.js

項目目錄結構

project/                          // 項目目錄
├── gulpfile.js                   // Gulp 工做流配置文件
│
├── src                           // 源文件目錄，`gulp build_dev`階段會監聽此目錄下的文件變更
│   ├── css                       // 存放 Less 文件的目錄，只有 style-*.less 的文件名會被編譯
│   │ ├── lib-reset.less
│   │ ├── lib-mixins.less
│   │ ├── lib-rem.less
│   │ └── style-index.less        // CSS 編譯出口文件
│   │ 
│   ├── html
│   ├── img                       // 存放背景圖等無需合併雪碧圖處理的圖片
│   └── slice                     // 切片圖片素材，將會進行雪碧圖合併，同名 @2x 圖片也會合並
│       ├── icon-dribbble.png
│       └── icon-dribbble@2x.png
│
├── dev                           // 開發目錄，由 `gulp build_dev` 任務生成
│   ├── css
│   ├── html
│   ├── img
│   └── slice                     // 開發階段，僅從 src/slice 拷貝至此，不作合併雪碧圖處理
│
└── dist                          // 生產目錄，由 `gulp build_dist` 任務生成
    ├── css
    ├── html
    ├── img
    └── sprite                    // 將 /src/slice 合併雪碧圖，根據 /css 文件名，命名爲 style-*.png 
        ├── style-index.png
        └── style-index@2x.png

配置文件 `.tmtworkflowrc`

.tmtworkflowrc 配置文件，位於工做流根目錄，可存放配置信息或開啓相關功能，
如：FTP 配置信息、開啓 WebP功能，開啓 REM 支持等。

{
  // FTP 發佈配置
  "ftp": {
    "host": "xx.xx.xx.xx",
    "port": "8021",
    "user": "tmt",
    "pass": "password",
    "remotePath": "remotePath",         // 默認上傳至根目錄，此屬性可指定子目錄路徑
    "includeHtml": true                 // FTP 上傳時是否包含 .html 文件
  },

  // 瀏覽器自動刷新
  "livereload": {
     "available": true,                 // 開啓
     "port": 8080,
     "startPath": "html/TmTIndex.html"  // 啓動時自動打開的路徑
  },

  // 插件功能
  // 路徑相對於 tasks/plugins 目錄
  "plugins": {
    "build_devAfter": ["TmTIndex"],     // build_dev 任務執行完成後，自動執行
    "build_distAfter": [],              // build_dist 任務執行完成後，自動執行
    "ftpAfter": ["ftp"]                 // ftp 任務執行完成後，自動執行
  },

  "lazyDir": ["../slice"],              // gulp-lazyImageCSS 啓用目錄
  
  "supportWebp": false,                 // 開啓 WebP 解決方案

  "supportREM": false,                  // 開啓 REM 適配方案，自動轉換 px -> rem

  "reversion": false                    // 開啓 新文件名 md5 功能
}