2013年10月29日 星期二

前端工作流程筆記

最近剛好在看一些前端工作流程 (Frontend Workflow) 的文章或是 slide,說到前端的工作流程,不外乎就是想要做到自動化,要『省時, 省力, 省麻煩...』,不過以我自己的認知,一個團隊,有人是負責 follow 這些流程的人,當然也有制定流程跟規則的人,不知道為什麼,以最近接觸 Grunt 的程度來說,我覺得一個團隊負責處理這些自動化流程的人真是挺不簡單,以 Grunt 來說,有這麼多 plugin,身為制定自動化流程的人,或許要很熟悉什麼套件做什麼事情,才會更適合某個專案使用。算了,其實我現在也沒到這個等級 ,這邊就不多談了xdd

以下是筆記的部分:
關於自動化工作流程,幾乎網路上的文章,都會提到 Bower, Grunt, Yeoman

Grunt 與 Bower

  • Bower 是 Twitter 開發的前端套件管理工具 (Frontend Package Manager)。
  • Bower 需要 node.js 環境以及 npm。
  • 安裝: npm install -g bower。
  • bower.json 可以先設定一些預設的相依性套件 ( bower 在 0.9.0 以前是使用 component.json , 0.9.0 之後使用 bower.json )
    (這個跟 npm install 時要用的 package.json 很像)。
  • 如果編輯完 bower.json 之後還有其他相依性套件 (dependencies) 要使用,可以重新下指令:bower install 或是使用 bower install packagename --save。
  • Grunt,一個可以處自動化工作流程的工具,如同 bower 一樣需要 node.js 環境以及使用 npm。
  • Gruntfile.js 通常會放在你的根目錄下。
  • 這時候我有點疑惑...,有點分不清楚 Grunt 跟  Bower 的差別,上網找了一下解答 



Grunt 跟 Bower 的不同之處

  • 性質:
    • Grunt : Task runner
    • Bower : Package manager


  • 工作內容:
    • Grunt : 幫你做一些自動化的任務,方便開發時使用,比方說 壓縮 css/js 等功能。
    • Bower :  可管理/部署 JavaScript Libraries 或是第三方套件 (jQuery, spine, Bootstrap...) 。



Grunt 一些常用到的相依性套件
Watch 
grunt-contrib-watch ,這個有 LiveReload 的 support,監視檔案或者資料夾是否有異動,在開發過程中非常有用,我自己也是有在用這個。

jsHint 
grunt-contrib-jshint ,這個我自己沒有在使用,不過簡單介紹一下,jsHint 可以設定你的 JavaScript 的撰寫品質要到什麼程度,提供很多 config 可以設定,對於需要做程式碼 code 品質的團隊也許會挺需要的 :P。

imagemin
grunt-contrib-imagemin ,主要的功能是壓縮圖片,通常結合 watch。

Svg2png
幫你把 SVG 轉成 png, 而且會幫你解決舊瀏覽器相容的問題,Svg2png 我沒有研究,不過感覺起來應該很好用。

modernizer
grunt-modernizr,就是使用 Modernozr 。

sass 
grunt-contrib-sass,編譯 sass/scss。

lsc
編譯 liveScript。

Concat 
Concatenate files。



Grunt 跟 Bower 的出現深深改進了前端的工作流程,減少過去我們一直反覆手動下載第三方 javascript/css 等套件 / 編譯 CSS / 優化圖片等工作,透過 Grunt 跟 Bower 將這些工作自動化,減少開發時間成本。



參考

Automating Front-end Workflow by Addy Osmani
A solid and automated front-end development workflow
My 2012 front-end web development workflow



沒有留言:

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...