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

時間 2019-11-13

原文原文鏈接

源文件編譯css

這裏我使用的工具是grunt，他自己主要是基於Node.js的文件操做包，其中有許多插件可讓咱們完成js文件的compile和compress、sass到css的轉換等等操做。要使用它須要先安裝命令行工具：npm install grunt-cli -g，而後在項目根目錄中建立文件Gruntfile.js，這個文件用於定義各類task，咱們首先定義一個task將從bower下載的第三方依賴都打包到文件app/js/lib.js中：html

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的一個插件，用於文件的合併操做，咱們已經在前面的package.json中引入了。js是task name；src指定了合併的源文件地址；dest指定了合併的目標文件。這樣當咱們運行grunt concat:js後，全部的依賴文件都會被合併爲app/js/lib.js。這樣作的好處是咱們能夠控制每一個依賴的引入順序，可是麻煩的是每次引入新的依賴都須要手動加入到dependencies數組中。這個暫時沒有更好的解決方案，由於不是全部的包都在本身的components.js中聲明瞭main文件，不少時候必須本身手動指定。前端

JavaScript文件編譯完成之後就是CSS文件，在現代的前端開發中，咱們已經不多直接寫CSS文件了，通常都使用SASS或者LESS。grunt也提供了這種支持，這裏我使用的是grunt-contrib-compass：node

module.exports = function(grunt) {
var sasses = 'sass';
grunt.initConfig({
compass: {
development: {
options: {
sassDir: sasses,
cssDir: 'app/css'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
};

而後運行grunt compass:development就能夠完成CSS文件的編譯了。jquery

自動化測試git

這裏我使用的自動化測試工具是Jasmine，它grunt中一樣有一個插件：grunt-contrib-jasmine。下面咱們來看看如何在Gruntfile.js中定義測試的task：github

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');
};

配置完成之後就能夠運行grunt jasmine:test來跑測試，但問題是每次寫完代碼都要手動執行一次很是麻煩，最好能夠每次代碼有更改都自動跑一次，讓咱們能夠更快的獲得反饋。grunt的watch插件就提供了這種支持：npm

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指定了須要監聽變更的文件；tasks指定了修改後自動觸發的task。如今只要咱們運行grunt watch:test，那麼有任何源文件、測試文件的改動，Jasmine測試都會自動運行了。有時候咱們也但願測試的結果顯示在網頁上，便於咱們作js的調試。那麼能夠將tasks:['jasmine:test']改成tasks: ['jasmine:test:build']，而後打開根目錄下的_SpecRunner.html文件，就能夠在網頁中看到測試結果了，再加上一些Chrome的Livereload插件，就能夠不用刷新實時的看到測試結果，效率很是之高。雖然grunt插件中也有livereload，可是與grunt-contrib-watch沒法很好的集成，因此我沒有使用這種方式。json

CI Pipeline後端

因爲個人項目是host在github上，因此我選擇travis-ci做爲個人CI服務器。要啓用travis-ci須要如下幾步：

在travis-ci中註冊一個帳號，獲取一個token；
在你的github項目的Settings–>Service Hooks中找到Travis，填入token而且啓用；
回到travis-ci，在Accounts–>Repositories中打開你的項目的service hook
Push一個.travis.yml到github，觸發第一次build。
修改package.json的scripts項，指定運行測試的命令

下面咱們來看看如何配置.travis.yml：

language: node_js
node_js:
- "0.8"
before_script:
- npm install -g grunt-cli

因爲咱們的環境是基於Node.js搭建的，因此在language設置了nodejs；而**nodejs指定了Node.js的版本；before_script**指定了在測試運行前須要執行的命令，因爲咱們的腳本都是基於grunt的，因此須要先安裝grunt的命令行包。

而後再修改package.json：

{
⋯⋯
"scripts": {
"test": "grunt jasmine:test"
}
⋯⋯
}

將修改之後的package.jsonpush到github上，再次觸發一個新的build，你能夠看到你以前錯誤的build已經綠了。

這裏還有一個小提示：如何讓build狀態顯示在項目的readme中？很簡單，只須要在README.md中加入如下代碼就能夠了：

[![Build Status](https://travis-ci.org/path/to/your_repository.png?branch=master)](http://travis-ci.org/path/to/your_repository)

到這裏基本的環境搭建就完成了，固然咱們還可使用grund的registerTask來定義一個任務序列，還能夠加入template的編譯⋯⋯這些均可以經過grunt來靈活設置。最重要的是如今別人拿到一個項目的代碼之後，能夠經過一些命令來快速的搭建本地環境，方便的進行測試和開發，並且沒有依賴與後端的開發環境，只要定義好接口，前端開發能夠徹底獨立開了。雖然這其中還有不少問題沒有解決，例如：