現代的前端工程真的越來越進步，不管是技術、工具、實作方式都各個百花齊放，為了能夠實際應運用，好的前端工作流程也就變得很重要，讓我們在開發上更為快速便利，順便也讓許多細節任務都能自動化執行，在後面的維護上就能降低許多成本，甚至往後再做更多的擴充也行。

本篇文章的紀錄為初期的開發建置之步驟，這是通用的基本款，之後有機會的話會再做進階款(中大型網站)的。以下內容所列出的技術、工具、框架、函示庫等等，會以目前主流或常用的為主。

開發流程之工具與技術的選擇

在著手開發專案前，一定都會先構想該用那些技術與使用上的需求，是否適合本專案的開發成本呢？小型或大型的專案也要考慮，又或者是在研究新技術的階段呢？
這裡紀錄一些的常用的選擇項目 :

  1. JavaScript 框架

    • Angular
    • React
    • Vue
    • Backbone
    • Ember

  2. JavaScript 特性寫法與轉譯工具

    • 原始ES5
    • ES6+ 搭配 Babel 轉譯工具
    • TypeScript 搭配本身 TypeScript 轉譯工具
    • JSX (React) 用於 React 框架之中

  3. JavaScript 模組化管理

    • Browserify 模組載入工具搭配 CommonJS 規範
    • Webpack 模組化整合套件

  4. CSS 預處理器

    • Sass
    • Less
    • BEM

  5. 套件管理器 (需預先安裝Node.js)

    • NPM
    • Bower

  6. 任務運行管理器

    • Grunt
    • Gulp

  7. Git版本控制 代理倉庫與服務

    • Github
    • GitLab
    • BitBucket

  8. Text Editor 或 IDE (這裡就請參考下面連結吧!)

詳細介紹之參考 :
超全的web開發工具和資源
前端工程師必須學會的現代化前端開發工具
NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

初期開發流程建置 (基本版)

  1. 決定使用的工具與技術
  2. 安裝載入所需的管理工具
  3. 建置專案的目錄結構
  4. 初始化套件與任務管理器的設定
  5. 安裝正式上線時會用到的框架或函式庫於專案中
  6. 安裝在開發時期的任務工具套件，正式上線時會去除掉
  7. 使用 Grunt 或 Gulp 撰寫自動化任務程式碼:
    • 壓縮最小化 JS、CSS 檔案
    • 壓縮圖片
    • 合併檔案
    • 合併 HTML 裡的代碼
    • 加入監看事件，當有檔案修改就自動化任務
    • 瀏覽器同步檢視
    • 轉譯檔案成原始 JS、CSS 檔
  8. 把上面的任務都全部打包成一個指令，使用終端機(Terminal) 來下指令啟動，就可以看到自動化產生的正式版資料夾(dist)
  9. 設定版本控制 Git，訂定此專案的 git flow 與 git message
  10. 開始撰寫專案內容

最後我也把研究時所使用的 原始碼 放在 Github 上面了。
這個專案並沒有使用到編譯或轉譯的任務工具，因為是單人的初期建置樣板，也就沒有使用 git flow 囉。

開發流程之參考 :
一看就懂的前端開發環境建置入門教學
My ideal front end development workflow for a new project
What’s the best workflow for front end development?

目錄結構之參考 :
使用 Gulp 之目錄結構
較完整之目錄結構

針對 Gulp 使用方式之參考 :
Gulp 基礎入門 - 2017
Gulp 常用插件介紹
Gulp 與 Webpack 的迷思

git-flow 與 git message 之參考 :
git-flow 的工作流程
git-flow-avh (AVH Edition) 快速教學
How to Write a Git Commit Message，翻譯版: 連結