周末失眠，周一無力寫代碼，只能聽著一首：逆流成河，順便把最近剛?cè)腴T的前端自動(dòng)化寫一下入門總結(jié)。

[[192105]]

因?yàn)閺氖碌拈_發(fā)重點(diǎn)是java后端，后端這幾年隨著maven，gradle等構(gòu)建工具的使用也把以前jar管理解放了，記得剛畢業(yè)那會(huì)公司的方案是公司自己維護(hù)一個(gè)libs文件夾，把需要的jar放進(jìn)去，然后ant寫腳本打包。這種方式的缺點(diǎn)要自己記住jar的版本等等，然后更新比較繁瑣，還有把jar提交到svn等版本管理工具，大小很大，共享麻煩。

說到前端自動(dòng)化，現(xiàn)在應(yīng)該是比較普及了，到github上面搜索一下web組件基本都是用到幾個(gè)常用的構(gòu)建組件。不過身處二線城市，一直從事企業(yè)系統(tǒng)開發(fā)的我，平常的開發(fā)，還是按老套路，直接建文件夾像libs，asset等，然后把需要的第三方庫，像Jquery，easyui，angular之類的下載復(fù)制進(jìn)去，然后開始寫代碼。這種方式缺點(diǎn)：同樣沒有統(tǒng)一管理web庫，文件壓縮合并等也沒有考慮，每次寫代碼調(diào)試一直F5刷新，還時(shí)不時(shí)緩存沒刷掉，上傳git文件大小也是非常大。

最近自己空閑想做一個(gè)表單設(shè)計(jì)器，定了框架angularJs，bootstrap3。然后想用上前端自動(dòng)化構(gòu)建工具。開始分批介紹這幾個(gè)工具：nodejs，yeoman，bower，grunt，gulp。

1.NodeJS

NodeJS這個(gè)神器就不做介紹，入門nodejs，可以發(fā)現(xiàn)一個(gè)新的世界，這是最好的詮釋。這幾個(gè)自動(dòng)化構(gòu)建工具都是基于nodejs使用。

一、安裝

百度一下nodejs，根據(jù)系統(tǒng)版本選擇下載安裝。新版的基本都會(huì)自帶npm(node的包管理工具)

安裝完成:node -v ，npm -v 查看版本

二、配置

配置npm的全局模塊的存放路徑以及cache的路徑(可以不做選擇默認(rèn)地址)

npm config set prefix "C:\Program Files\nodejs\node_global" 
npm config set cache "C:\Program Files\nodejs\node_cache" 

配置環(huán)境變量

系統(tǒng)變量下新建"NODE_PATH"，輸入”C:\Program Files\nodejs\node_global\node_modules“ 
用戶變量"PATH"修改為“C:\Program Files\nodejs\node_global\” 

由于GWF原因可以選擇修改鏡像，或者安裝cnpm，我建議選擇翻墻軟件，就不會(huì)在后續(xù)使用過程出現(xiàn)問題，這里貼一個(gè)我用的http://www.herogo.cc/Register/Index/2352499，注冊(cè)送免費(fèi)流量，暫時(shí)先用一下。

如果選擇翻墻這里可以忽略

配置淘寶鏡像：npm config set registry "https://registry.npm.taobao.org" 
查看配置：npm config list 
 
安裝cnpm：npm install -g cnpm –registry=https://registry.npm.taobao.org 

三、package.json

描述npm包的文件，類型maven的pom.xml,bower的bower.json等

屬性說明： 
dependencies：生產(chǎn)環(huán)境需要安裝的包 
devDependencies：開發(fā)環(huán)境需要的包 
 
版本號(hào)： 
^:^0.4.1:發(fā)布了0.4.1會(huì)更新，1.X.X就不會(huì)更新 
~：~0.4.1:發(fā)布了0.4.1會(huì)更新，0.5.0就不會(huì)更新  
 
npm install：默認(rèn)使用當(dāng)前路徑下的package.json安裝包 
npm install chajian：直接安裝包到當(dāng)前目錄的node_modules 
-g:全局安裝 
--save-dev:安裝同時(shí)寫入package.json 

2.Yeoman

Yeoman是Google的團(tuán)隊(duì)和外部貢獻(xiàn)者團(tuán)隊(duì)合作開發(fā)的，他的目標(biāo)是通過Grunt，Gulp，Bower的包裝為開發(fā)者創(chuàng)建一個(gè)易用的工作流。

簡(jiǎn)單點(diǎn)說，在項(xiàng)目初始化的時(shí)候用了yeoman，自動(dòng)幫你構(gòu)建好基礎(chǔ)的文件，還有所需要的bower，gulp，grunt等這些配置。

一、安裝

官網(wǎng)：http://yeoman.io 
安裝：npm install -g yo 
查看版本：yo --version 

二、使用

以angularJS為例：

安裝generator-angular，其他項(xiàng)目可以上官網(wǎng)搜索 
npm install -g generator-angular 
cd 項(xiàng)目地址 
yo angular 項(xiàng)目名 
根據(jù)提示選擇需要的庫 
yeoman在使用的時(shí)候會(huì)提示一些常用庫讓開發(fā)者選擇是否需要使用方便使用 

3.Bower

前端庫管理器，用于搜索、安裝和卸載如JavaScript、HTML、CSS之類的網(wǎng)絡(luò)資源?，F(xiàn)在有些開發(fā)者直接使用npm做前端庫管理器，看需要先暫時(shí)使用bower，至于他和npm的利弊可以搜索文章比對(duì)一下。

一、安裝

官網(wǎng)：https://bower.io 
安裝：npm install -g bower 
查看版本：bower -v 

二、文件

.bowerrc:設(shè)置bower下載的文件位置，代理，超時(shí)時(shí)長等

bower.json：需要依賴的web包管理文件，類似package.json

三、使用

在官網(wǎng)搜索需要的web庫，根據(jù)名稱下載 
bower install jquery  --單獨(dú)下載web包 
沒在bower注冊(cè)： 
    可以通過github短語安裝（用戶名/項(xiàng)目名  bower install wengweh/plumdo-word） 
    可以通過github地址安裝 bower install https://github.com/wengwh/plumdo-word.git 
    可以通過URL直接安裝 bower install http://www.baidu.com 
bower install jquery  --save   --把依賴添加到bower.json 
bower install jquery  --save-dev  --把依賴添加到bower.json中的開發(fā)依賴 
bower install  --直接根據(jù)當(dāng)前目錄的bower.json下載 
bower init  --生成bower.json文件 

4.Grunt

通過配置一系列的task，定義task處理的事務(wù)(例如文件壓縮合并、雪碧圖、啟動(dòng)server、版本控制等)，然后定義執(zhí)行順序，來讓grunt執(zhí)行這些task，從而構(gòu)建項(xiàng)目的整個(gè)前端開發(fā)流程。

一、安裝

npm install -g grunt-cli 

二、指令

grunt taskname：運(yùn)行指定task 
grunt taskname：target：運(yùn)行指定task內(nèi)部的target  
grunt：運(yùn)行default的task 

三、task

grunt的功能就是執(zhí)行一系列的task來實(shí)現(xiàn)，所以它的task是非常多的，如果有需要了解可以搜索一下，這里介紹幾個(gè)常用的task

1.copy 顧名思義復(fù)制文件、文件夾

copy:{ 
    dist:{ 
          src:'<%= config.app %>/js/index.js',---原地址 
          dest:'<%= config.dist %>/js/index.js',--目標(biāo)地址 
    }， 
    dist：{ 
         files:[  --使用數(shù)組 
                { 
                         expand:true, 
                         cwd: '<%= config.app %>/', 
                         src:'*.html', 
                         dest:'<%= config.dist %>/', 
                         ext:'.min.html', --修改后綴名 
                         extDot:'first',--指定修改的后綴名開始位置 
                         flatten:false --不會(huì)復(fù)制到指定目錄 
                         rename:function( dest,src){ 
                                return dest+'js/'+src; 
                         } 
 
                }， 
                { 
                     src:'<%= config.app %>/js/index.js', 
                     dest:'<%= config.dist %>/js/index.js', 
                } 
          ] 
    }， 
    dist_files_object:{ 
          files:{ --使用鍵值對(duì) 
                 '<%= config.dist %>/index.html':'<%= config.app %>/index.html', 
                 '<%= config.dist %>/js/index.js':['<%= config.app %>/js/index.js'] 
         } 
      } 
} 

2.wiredep

給對(duì)應(yīng)文件寫入需要引入的js，css文件。當(dāng)使用bower管理web庫的時(shí)候，肯定不希望還要一個(gè)個(gè)在頁面中去引入對(duì)應(yīng)的js，css文件，這個(gè)插件就是解決這個(gè)的問題。

3.autoprefixer

給css文件生成自動(dòng)根據(jù)瀏覽器生成對(duì)應(yīng)的css內(nèi)容

4.watch

監(jiān)聽文件，有修改執(zhí)行相應(yīng)任務(wù)。在開發(fā)的過程可以實(shí)時(shí)做出變化，就無須在手動(dòng)執(zhí)行指令

watch: { 
      bower: { 
        files: ['bower.json'], 
        tasks: ['wiredep'] 
      }, 

5.uglify

js壓縮，可以設(shè)置是否生成js的對(duì)應(yīng)map

5.Gulp

Gulp和Grunt的功能定位是基本一致的，這兩者經(jīng)常被拿來做比較?，F(xiàn)在好像gulp大有代替grunt的意思。不過對(duì)于我們使用者來說，他們的變更影響不算太大，基本task也是類似，所欲無需顧慮太多。

安裝

官網(wǎng)：gulpjs.com 
安裝：npm install -g gulp 
查看版本：gulp -v 

最后結(jié)語，最近做的plumdo-form表單設(shè)計(jì)器使用了yeoman，bower，gulp來構(gòu)建?；締栴}不大，用起來也還算順手。現(xiàn)在的前端變化非常大，從去年angular，vue，react這3大陣營互相爭(zhēng)奪，加上現(xiàn)在構(gòu)建工具也是一大堆(webpack沒介紹)，可能有些人提出了是不是徒增問題，為什么不回歸原始方案。其實(shí)各種技術(shù)的出現(xiàn)都有他的背景和使用情況。所以還是遵從根據(jù)實(shí)際情況出發(fā)，不一定用上什么技術(shù)就是好的，沒有就是low的。只有根據(jù)項(xiàng)目的需要和背景選擇適合自己的才是最好的。