如何構建自動化的前端開發流程(1)

現在的前端開發中，已經再也不只是一些簡單的靜態文件了，對於不少Web App來講，前端代碼甚至比後端代碼要更加複雜，更加難於管理，例如：

• 咱們有許多的第三方庫的依賴須要管理；
• 咱們有獨立的前端測試須要自動運行；
• 咱們還有不少代碼須要在發佈時進行打包壓縮；
• ⋯⋯

因此構建一個自動化的前端開發流程是很是必要的，但如今前端開發流程的構建是百花齊放，沒有一個統一的標準，還有不少依賴於後端的架構來作前端開發管理。例如在Rails開發中，就有各類前端庫的gem包。可是這種依賴於後端框架的管理方式有許多問題：

• 許多gem包的維護者並非前端庫的維護者，因此更新不必定即時；
• 不利於前端代碼與後端代碼作分離；
• 增長了前端開發者的學習和使用成本；
• ⋯⋯

 

因而如今出現了一些不依賴於後端代碼（雖然仍是要依賴Node.js⋯⋯）的管理工具，對於前端開發者很是友好，例如：YEMAN、Jam、volo、component、Brunch⋯⋯可是這些工具都或多或少有本身的一些問題，因此我決定用一些更輕量的工具（bower、grunt）來搭建本身的前端開發流程。本文的例子來自本人正在開發的一個項目，能夠在github上查看全部的代碼。

什麼是開發流程？

在我看來一個完整的開發流程應該包括：

• 本地開發環境的初始化
• 第三方依賴的管理
• 源文件編譯
• 自動化測試
• 發佈到pipeline和各個環境

而現代的開發流程，就是要使上面的各個部分均可以自動化，一個命令就可使這些流程都自動走完，而且快速的獲得錯誤或經過的反饋，讓咱們能夠方便快速的修復錯誤和release。

本地開發環境的初始化

這裏我使用的工具是Node.js和NPM，它們都基於JavaScript，使用Json來配置，對於前端開發人員很是友好。

安裝完成Node.js和NPM後，在項目根目錄下建立NPM的配置文件package.json：

{
    "name": "Project Name",
    "version": "0.0.1",
    "description": "Project Description",
    "repository": {
        "type": "git",
        "url": "git://github.com/path/to/your_project"
    },
    "author": "Author Name",
    "license": "BSD",
    "readmeFilename": "README.md",
    "gitHead": "git head",
    "devDependencies": {
        "grunt": "latest",
        "grunt-contrib-connect": "latest",
        "grunt-contrib-concat": "latest",
        "grunt-contrib-jasmine": "latest",
        "grunt-contrib-watch": "latest",
        "grunt-contrib-compass": "latest"
    }
}

其中最重要的一個配置項是devDependencies，這是用於開發的依賴，例如：自動化測試、源文件編譯等等，其中各個依賴的做用和用法將會在後面講到。而前端生產代碼的依賴會使用另外一個工具來管理，也在後面講到。建立完成之後運行npm install，NPM就會將這些依賴都安裝到項目根目錄的node_modules文件夾中。

第三方依賴的管理

這裏我使用的工具是bower。 其實NPM也能夠管理，可是NPM並非讀取第三方依賴原始的repository，而是讀取本身管理的一個repository，因此更新可能會慢點， 而且它使用CommonJS的接口方便Node.js項目的開發，並非針對純前端開發的項目；而bower是讀取原始的github repository，沒有更新延遲的問題，全部包都是針對純前端開發項目的。

要使用bower只須要簡單的三步：

1. 安裝：npm install bower -g
2. 在項目根目錄中建立配置文件.bowerrc
3. 在項目根目錄中建立依賴配置文件components.json

咱們首先來看看.bowerrc的內容：

{
    "directory" : "components",
    "json"      : "component.json",
    "endpoint"  : "https://bower.herokuapp.com"
}

其中directory指定了全部的依賴會被安裝到哪裏；json指定了依賴配置文件的路徑；endpoint制定了依賴的repository的尋址服務器，你能夠替換爲本身的尋址服務器。

而後咱們來看看components.json的內容：

{
    "name": "Project Name",
    "version": "0.0.1",
    "dependencies": {
      "jquery": "latest",
      "underscore": "latest",
      "backbone": "latest",
      "jasmine-jquery": "latest",
      "jasmine-ajax": "git@github.com:pivotal/jasmine-ajax.git"
    }
}

其中最重要的就是dependencies，它指定了全部前端開發依賴的包。全部bower包含的依賴均可以在這裏查到，對於bower沒有包含的依賴也能夠直接指定github的repository，例如："jasmine-ajax": "git@github.com:pivotal/jasmine-ajax.git"。

最後運行bower install就能夠在components文件夾中看到全部第三方依賴的文件了。可是bower有一個問題，就是它將全部github repository中的文件都下載下來了，其中有許可能是咱們不須要的文件。下面咱們會將咱們須要的文件提取出來打包放到咱們指定的目錄中。