如何構(gòu)建自動(dòng)化的前端開發(fā)流程
如今的前端開發(fā)中，已經(jīng)不再只是一些簡(jiǎn)單的靜態(tài)文件了，對(duì)于很多Web App來(lái)說，前端代碼甚至比后端代碼要更加復(fù)雜，更加難于管理，例如：
- 我們有許多的第三方庫(kù)的依賴需要管理；
- 我們有獨(dú)立的前端測(cè)試需要自動(dòng)運(yùn)行；
- 我們還有很多代碼需要在發(fā)布時(shí)進(jìn)行打包壓縮；
- ⋯⋯
所以構(gòu)建一個(gè)自動(dòng)化的前端開發(fā)流程是非常必要的，但現(xiàn)在前端開發(fā)流程的構(gòu)建是百花齊放，沒有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，還有很多依賴于后端的架構(gòu)來(lái)做前端開發(fā)管理。例如在Rails開發(fā)中，就有各種前端庫(kù)的gem包。但是這種依賴于后端框架的管理方式有許多問題：
- 許多gem包的維護(hù)者并不是前端庫(kù)的維護(hù)者，所以更新不一定即時(shí)；
- 不利于前端代碼與后端代碼做分離；
- 增加了前端開發(fā)者的學(xué)習(xí)和使用成本；
- ⋯⋯
于是現(xiàn)在出現(xiàn)了一些不依賴于后端代碼（雖然還是要依賴Node.js⋯⋯）的管理工具，對(duì)于前端開發(fā)者非常友好，例如：YEMAN、Jam、volo、component、Brunch⋯⋯但是這些工具都或多或少有自己的一些問題，所以我決定用一些更輕量的工具（bower、grunt）來(lái)搭建自己的前端開發(fā)流程。本文的例子來(lái)自本人正在開發(fā)的一個(gè)項(xiàng)目，可以在github上查看所有的代碼。
什么是開發(fā)流程？
在我看來(lái)一個(gè)完整的開發(fā)流程應(yīng)該包括：
- 本地開發(fā)環(huán)境的初始化
- 第三方依賴的管理
- 源文件編譯
- 自動(dòng)化測(cè)試
- 發(fā)布到pipeline和各個(gè)環(huán)境
而現(xiàn)代的開發(fā)流程，就是要使上面的各個(gè)部分都可以自動(dòng)化，一個(gè)命令就可以使這些流程都自動(dòng)走完，并且快速的得到錯(cuò)誤或通過的反饋，讓我們可以方便快速的修復(fù)錯(cuò)誤和release。
本地開發(fā)環(huán)境的初始化
這里我使用的工具是Node.js和NPM，它們都基于JavaScript，使用Json來(lái)配置，對(duì)于前端開發(fā)人員非常友好。
安裝完成Node.js和NPM后，在項(xiàng)目根目錄下創(chuàng)建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"
- }
- }
其中最重要的一個(gè)配置項(xiàng)是devDependencies，這是用于開發(fā)的依賴，例如：自動(dòng)化測(cè)試、源文件編譯等等，其中各個(gè)依賴的作用和用法將會(huì)在后面講到。而前端生產(chǎn)代碼的依賴會(huì)使用另一個(gè)工具來(lái)管理，也在后面講到。創(chuàng)建完成以后運(yùn)行npm install，NPM就會(huì)將這些依賴都安裝到項(xiàng)目根目錄的node_modules文件夾中。
第三方依賴的管理
這里我使用的工具是bower。 其實(shí)NPM也可以管理，但是NPM并不是讀取第三方依賴原始的repository，而是讀取自己管理的一個(gè)repository，所以更新可能會(huì)慢點(diǎn)， 并且它使用CommonJS的接口方便Node.js項(xiàng)目的開發(fā)，并不是針對(duì)純前端開發(fā)的項(xiàng)目；而bower是讀取原始的github repository，沒有更新延遲的問題，所有包都是針對(duì)純前端開發(fā)項(xiàng)目的。
要使用bower只需要簡(jiǎn)單的三步：
- 安裝：
npm install bower -g - 在項(xiàng)目根目錄中創(chuàng)建配置文件
.bowerrc - 在項(xiàng)目根目錄中創(chuàng)建依賴配置文件
components.json
我們首先來(lái)看看.bowerrc的內(nèi)容：
- {
- "directory" : "components",
- "json" : "component.json",
- "endpoint" : "https://bower.herokuapp.com"
- }
其中directory指定了所有的依賴會(huì)被安裝到哪里；json指定了依賴配置文件的路徑；endpoint制定了依賴的repository的尋址服務(wù)器，你可以替換為自己的尋址服務(wù)器。
然后我們來(lái)看看components.json的內(nèi)容：
- {
- "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，它指定了所有前端開發(fā)依賴的包。所有bower包含的依賴都可以在這里查到，對(duì)于bower沒有包含的依賴也可以直接指定github的repository，例如："jasmine-ajax": "git@github.com:pivotal/jasmine-ajax.git"。
最后運(yùn)行bower install就可以在components文件夾中看到所有第三方依賴的文件了。但是bower有一個(gè)問題，就是它將所有g(shù)ithub repository中的文件都下載下來(lái)了，其中有許多是我們不需要的文件。下面我們會(huì)將我們需要的文件提取出來(lái)打包放到我們指定的目錄中。
#p#
源文件編譯
這里我使用的工具是grunt，他本身主要是基于Node.js的文件操作包，其中有許多插件可以讓我們完成js文件的compile和compress、sass到css的轉(zhuǎn)換等等操作。要使用它需要先安裝命令行工具：npm install grunt-cli -g，然后在項(xiàng)目根目錄中創(chuàng)建文件Gruntfile.js，這個(gè)文件用于定義各種task，我們首先定義一個(gè)task將從bower下載的第三方依賴都打包到文件app/js/lib.js中：
- module.exports = function(grunt) {
- var dependencies = [
- 'components/jquery/jquery.js',
- 'components/underscore/underscore.js',
- 'components/backbone/backbone.js'];
- grunt.initConfig({
- concat: {
- js: {
- src: dependencies,
- dest: 'app/js/lib.js'
- }
- }
- });
- grunt.loadNpmTasks('grunt-contrib-concat');
- };
這里的grunt-contrib-concat就是grunt的一個(gè)插件，用于文件的合并操作，我們已經(jīng)在前面的package.json中引入了。js是task name；src指定了合并的源文件地址；dest指定了合并的目標(biāo)文件。這樣當(dāng)我們運(yùn)行grunt concat:js后，所有的依賴文件都會(huì)被合并為app/js/lib.js。這樣做的好處是我們可以控制每個(gè)依賴的引入順序，但是麻煩的是每次引入新的依賴都需要手動(dòng)加入到dependencies數(shù)組中。這個(gè)暫時(shí)沒有更好的解決方案，因?yàn)椴皇撬械陌荚谧约旱?code>components.js中聲明了main文件，很多時(shí)候必須自己手動(dòng)指定。
JavaScript文件編譯完成以后就是CSS文件，在現(xiàn)代的前端開發(fā)中，我們已經(jīng)很少直接寫CSS文件了，一般都使用SASS或者LESS。grunt也提供了這種支持，這里我使用的是grunt-contrib-compass：
- module.exports = function(grunt) {
- var sasses = 'sass';
- grunt.initConfig({
- compass: {
- development: {
- options: {
- sassDir: sasses,
- cssDir: 'app/css'
- }
- }
- }
- });
- grunt.loadNpmTasks('grunt-contrib-compass');
- };
然后運(yùn)行grunt compass:development就可以完成CSS文件的編譯了。
自動(dòng)化測(cè)試
這里我使用的自動(dòng)化測(cè)試工具是Jasmine，它grunt中同樣有一個(gè)插件：grunt-contrib-jasmine。下面我們來(lái)看看如何在Gruntfile.js中定義測(cè)試的task：
- module.exports = function(grunt) {
- var sources = 'app/js/**/*.js',
- specs = 'spec/**/*Spec.js';
- grunt.initConfig({
- jasmine: {
- test: {
- src: [sources],
- options: {
- specs: specs,
- helpers: ['spec/helper/**/*.js'],
- vendor: 'app/js/lib.js'
- }
- }
- }
- });
- grunt.loadNpmTasks('grunt-contrib-jasmine');
- };
配置完成以后就可以運(yùn)行grunt jasmine:test來(lái)跑測(cè)試，但問題是每次寫完代碼都要手動(dòng)執(zhí)行一次非常麻煩，最好可以每次代碼有更改都自動(dòng)跑一次，讓我們可以更快的得到反饋。grunt的watch插件就提供了這種支持：
- module.exports = function(grunt) {
- var sources = 'app/js/**/*.js',
- specs = 'spec/**/*Spec.js';
- grunt.initConfig({
- jasmine: {
- test: {
- src: [sources],
- options: {
- specs: specs,
- helpers: ['spec/helper/**/*.js'],
- vendor: 'app/js/lib.js'
- }
- }
- },
- watch: {
- test: {
- files: [sources, specs],
- tasks: ['jasmine:test']
- }
- }
- });
- grunt.loadNpmTasks('grunt-contrib-jasmine');
- grunt.loadNpmTasks('grunt-contrib-watch');
- };
files指定了需要監(jiān)聽變動(dòng)的文件；tasks指定了修改后自動(dòng)觸發(fā)的task?，F(xiàn)在只要我們運(yùn)行grunt watch:test，那么有任何源文件、測(cè)試文件的改動(dòng)，Jasmine測(cè)試都會(huì)自動(dòng)運(yùn)行了。有時(shí)候我們也希望測(cè)試的結(jié)果顯示在網(wǎng)頁(yè)上，便于我們做js的調(diào)試。那么可以將tasks:['jasmine:test']改為tasks: ['jasmine:test:build']，然后打開根目錄下的_SpecRunner.html文件，就可以在網(wǎng)頁(yè)中看到測(cè)試結(jié)果了，再加上一些Chrome的Livereload插件，就可以不用刷新實(shí)時(shí)的看到測(cè)試結(jié)果，效率非常之高。雖然grunt插件中也有l(wèi)ivereload，但是與grunt-contrib-watch無(wú)法很好的集成，所以我沒有使用這種方式。
CI Pipeline
由于我的項(xiàng)目是host在github上，所以我選擇travis-ci作為我的CI服務(wù)器。要啟用travis-ci需要以下幾步：
- 在travis-ci中注冊(cè)一個(gè)賬號(hào)，獲取一個(gè)token；
- 在你的github項(xiàng)目的Settings–>Service Hooks中找到Travis，填入token并且啟用；
- 回到travis-ci，在Accounts–>Repositories中打開你的項(xiàng)目的service hook
- Push一個(gè)
.travis.yml到github，觸發(fā)第一次build。 - 修改
package.json的scripts項(xiàng)，指定運(yùn)行測(cè)試的命令
下面我們來(lái)看看如何配置.travis.yml：
- language: node_js
- node_js:
- - "0.8"
- before_script:
- - npm install -g grunt-cli
由于我們的環(huán)境是基于Node.js搭建的，所以在language設(shè)置了nodejs；而**nodejs指定了Node.js的版 本；before_script**指定了在測(cè)試運(yùn)行前需要執(zhí)行的命令，由于我們的腳本都是基于grunt的，所以需要先安裝grunt的命令行包。
然后再修改package.json：
- {
- ⋯⋯
- "scripts": {
- "test": "grunt jasmine:test"
- }
- ⋯⋯
- }
將修改以后的package.jsonpush到github上，再次觸發(fā)一個(gè)新的build，你可以看到你之前錯(cuò)誤的build已經(jīng)綠了。
這里還有一個(gè)小提示：如何讓build狀態(tài)顯示在項(xiàng)目的readme中？很簡(jiǎn)單，只需要在README.md中加入以下代碼就可以了：
- [](http://travis-ci.org/path/to/your_repository)
到這里基本的環(huán)境搭建就完成了，當(dāng)然我們還可以使用grund的registerTask來(lái)定義一個(gè)任務(wù)序列，還可以加 入template的編譯⋯⋯這些都可以通過grunt來(lái)靈活設(shè)置。最重要的是現(xiàn)在別人拿到一個(gè)項(xiàng)目的代碼以后，可以通過一些命令來(lái)快速的搭建本地環(huán)境， 方便的進(jìn)行測(cè)試和開發(fā)，而且沒有依賴與后端的開發(fā)環(huán)境，只要定義好接口，前端開發(fā)可以完全獨(dú)立開了。雖然這其中還有很多問題沒有解決，例如：
- 如何讓第三方依賴自申明main文件
package.json與components.json其實(shí)有些重復(fù)- Live Reload還需要Chrome插件才能完成
- ⋯⋯
這正是由于現(xiàn)在前端開發(fā)環(huán)境還沒有后端開發(fā)的那種標(biāo)準(zhǔn)化，也正是挑戰(zhàn)和機(jī)遇之所在！
原文鏈接：http://www.zation.me/2013/03/15/how-to-build-frontend-dev-env.html
