Web前端自動化入門總結
周末失眠，周一無力寫代碼，只能聽著一首：逆流成河，順便把最近剛入門的前端自動化寫一下入門總結。
因為從事的開發重點是java后端，后端這幾年隨著maven，gradle等構建工具的使用也把以前jar管理解放了，記得剛畢業那會公司的方案是公司自己維護一個libs文件夾，把需要的jar放進去，然后ant寫腳本打包。這種方式的缺點要自己記住jar的版本等等，然后更新比較繁瑣，還有把jar提交到svn等版本管理工具，大小很大，共享麻煩。
說到前端自動化，現在應該是比較普及了，到github上面搜索一下web組件基本都是用到幾個常用的構建組件。不過身處二線城市，一直從事企業系統開發的我，平常的開發，還是按老套路，直接建文件夾像libs，asset等，然后把需要的第三方庫，像Jquery，easyui，angular之類的下載復制進去，然后開始寫代碼。這種方式缺點：同樣沒有統一管理web庫，文件壓縮合并等也沒有考慮，每次寫代碼調試一直F5刷新，還時不時緩存沒刷掉，上傳git文件大小也是非常大。
最近自己空閑想做一個表單設計器，定了框架angularJs，bootstrap3。然后想用上前端自動化構建工具。開始分批介紹這幾個工具：nodejs，yeoman，bower，grunt，gulp。
1.NodeJS
NodeJS這個神器就不做介紹，入門nodejs，可以發現一個新的世界，這是最好的詮釋。這幾個自動化構建工具都是基于nodejs使用。
一、安裝
百度一下nodejs，根據系統版本選擇下載安裝。新版的基本都會自帶npm(node的包管理工具)
安裝完成:node -v ，npm -v 查看版本
二、配置
配置npm的全局模塊的存放路徑以及cache的路徑(可以不做選擇默認地址)
- npm config set prefix "C:\Program Files\nodejs\node_global"
- npm config set cache "C:\Program Files\nodejs\node_cache"
配置環境變量
- 系統變量下新建"NODE_PATH"，輸入”C:\Program Files\nodejs\node_global\node_modules“
- 用戶變量"PATH"修改為“C:\Program Files\nodejs\node_global\”
由于GWF原因可以選擇修改鏡像，或者安裝cnpm，我建議選擇翻墻軟件，就不會在后續使用過程出現問題，這里貼一個我用的http://www.herogo.cc/Register/Index/2352499，注冊送免費流量，暫時先用一下。
如果選擇翻墻這里可以忽略
- 配置淘寶鏡像：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：生產環境需要安裝的包
- devDependencies：開發環境需要的包
- 版本號：
- ^:^0.4.1:發布了0.4.1會更新，1.X.X就不會更新
- ~：~0.4.1:發布了0.4.1會更新，0.5.0就不會更新
- npm install：默認使用當前路徑下的package.json安裝包
- npm install chajian：直接安裝包到當前目錄的node_modules
- -g:全局安裝
- --save-dev:安裝同時寫入package.json
2.Yeoman
Yeoman是Google的團隊和外部貢獻者團隊合作開發的，他的目標是通過Grunt，Gulp，Bower的包裝為開發者創建一個易用的工作流。
簡單點說，在項目初始化的時候用了yeoman，自動幫你構建好基礎的文件，還有所需要的bower，gulp，grunt等這些配置。
一、安裝
- 官網：http://yeoman.io
- 安裝：npm install -g yo
- 查看版本：yo --version
二、使用
以angularJS為例：
- 安裝generator-angular，其他項目可以上官網搜索
- npm install -g generator-angular
- cd 項目地址
- yo angular 項目名
- 根據提示選擇需要的庫
- yeoman在使用的時候會提示一些常用庫讓開發者選擇是否需要使用方便使用
3.Bower
前端庫管理器，用于搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源。現在有些開發者直接使用npm做前端庫管理器，看需要先暫時使用bower，至于他和npm的利弊可以搜索文章比對一下。
一、安裝
- 官網：https://bower.io
- 安裝：npm install -g bower
- 查看版本：bower -v
二、文件
.bowerrc:設置bower下載的文件位置，代理，超時時長等
bower.json：需要依賴的web包管理文件，類似package.json
三、使用
- 在官網搜索需要的web庫，根據名稱下載
- bower install jquery --單獨下載web包
- 沒在bower注冊：
- 可以通過github短語安裝（用戶名/項目名 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中的開發依賴
- bower install --直接根據當前目錄的bower.json下載
- bower init --生成bower.json文件
4.Grunt
通過配置一系列的task，定義task處理的事務(例如文件壓縮合并、雪碧圖、啟動server、版本控制等)，然后定義執行順序，來讓grunt執行這些task，從而構建項目的整個前端開發流程。
一、安裝
- npm install -g grunt-cli
二、指令
- grunt taskname：運行指定task
- grunt taskname：target：運行指定task內部的target
- grunt：運行default的task
三、task
grunt的功能就是執行一系列的task來實現，所以它的task是非常多的，如果有需要了解可以搜索一下，這里介紹幾個常用的task
1.copy 顧名思義復制文件、文件夾
- copy:{
- dist:{
- src:'<%= config.app %>/js/index.js',---原地址
- dest:'<%= config.dist %>/js/index.js',--目標地址
- }，
- dist：{
- files:[ --使用數組
- {
- expand:true,
- cwd: '<%= config.app %>/',
- src:'*.html',
- dest:'<%= config.dist %>/',
- ext:'.min.html', --修改后綴名
- extDot:'first',--指定修改的后綴名開始位置
- flatten:false --不會復制到指定目錄
- rename:function( dest,src){
- return dest+'js/'+src;
- }
- }，
- {
- src:'<%= config.app %>/js/index.js',
- dest:'<%= config.dist %>/js/index.js',
- }
- ]
- }，
- dist_files_object:{
- files:{ --使用鍵值對
- '<%= config.dist %>/index.html':'<%= config.app %>/index.html',
- '<%= config.dist %>/js/index.js':['<%= config.app %>/js/index.js']
- }
- }
- }
2.wiredep
給對應文件寫入需要引入的js，css文件。當使用bower管理web庫的時候，肯定不希望還要一個個在頁面中去引入對應的js，css文件，這個插件就是解決這個的問題。
3.autoprefixer
給css文件生成自動根據瀏覽器生成對應的css內容
4.watch
監聽文件，有修改執行相應任務。在開發的過程可以實時做出變化，就無須在手動執行指令
- watch: {
- bower: {
- files: ['bower.json'],
- tasks: ['wiredep']
- },
5.uglify
js壓縮，可以設置是否生成js的對應map
5.Gulp
Gulp和Grunt的功能定位是基本一致的，這兩者經常被拿來做比較。現在好像gulp大有代替grunt的意思。不過對于我們使用者來說，他們的變更影響不算太大，基本task也是類似，所欲無需顧慮太多。
安裝
- 官網：gulpjs.com
- 安裝：npm install -g gulp
- 查看版本：gulp -v
最后結語，最近做的plumdo-form表單設計器使用了yeoman，bower，gulp來構建。基本問題不大，用起來也還算順手。現在的前端變化非常大，從去年angular，vue，react這3大陣營互相爭奪，加上現在構建工具也是一大堆(webpack沒介紹)，可能有些人提出了是不是徒增問題，為什么不回歸原始方案。其實各種技術的出現都有他的背景和使用情況。所以還是遵從根據實際情況出發，不一定用上什么技術就是好的，沒有就是low的。只有根據項目的需要和背景選擇適合自己的才是最好的。
