那么什么是聰明者,就是打架不出拳,直接用刀砍,或者更牛逼的就開槍!
那么如何做一個聰明的前端開發者?
很顯然,就是用工具代替手工,用自動代替手動!
那到底是用什么工具呢,如下:
前端開發工具
工具有點多,但是都非常簡單,或許你已經安裝並使用過一些了。
- git,版本控制系統
- node,JS運行平台
- npm,node的包管理
- yo,腳手架
- grunt,項目構建工具
- bower,項目依賴包管理
git,http://git-scm.com/
據說是一款很厲害的版本控制系統,類似SVN,不過本人還沒有所領悟,繼續SVN中,只是下面的工具要到用git所以簡單說一下。
下載安裝即可,安裝完成后順便試一下cmd中git命令是否可以識別。
node,http://nodejs.org/
這是個好東西,降低了應該程序開發的門檻,JS不只在瀏覽器上運行了,還可以開發本地應用程序,就靠它來運行,有點類似於JVM,牛逼的工具一時間如雨后春筍般冒了出來!
下面說到的的工具都是用node開發的本地應用程序
安裝就非常簡單了,下載后添加bin目錄到系統Path路徑即可。
npm,https://www.npmjs.org/
說到這個的時候我有點激動,也不知道從什么時候開始,在我們項目中用到的第三方依賴不用自己苦逼的在網絡上到處找了。只要指定版本號和依賴名字它就可以幫你下載。
這個就更厲害在了,它不僅可以幫你安裝依賴包,還可以安裝基於node開發的軟件,真的是淚流滿面呀!
安裝同樣簡單,下載后添加bin目錄到系統Path路徑即可,下載地址:http://nodejs.org/dist/npm/
常用功能就是安裝(npm install -g 名字)和更新(npm update -g 名字)了,-g表示可以全局運行,其實就是幫你把安裝路徑添加到系統的Path路徑中。其它用法的看官網吧。
yo,http://yeoman.io/
什么是腳手架,百度百科是這樣解釋的,指施工現場為工人操作並解決垂直和水平運輸而搭設的各種支架,看到這里你應該大概明白了,
yo在這里充當的角色就是幫你直接生成項目的部分內容,免去你的重復無聊的工作,比如創建目錄構建、新建各種配置文件。
安裝:npm install -g yo
grunt,http://gruntjs.com/
構建工具,一句話解釋,把你指定的內容轉換成你想的目標內容,這就是構建。比如把less轉換成css,壓縮js或css等。
安裝:npm install -g grunt-cli
bower,http://bower.io/
這個就更強了,類似java界的maven包管理功能,簡單的說就是幫你下載項目依賴的內容,
比如你用到的jquery,可以指定名字和版本讓它來幫你下載,它依賴git從github下載,至於它從哪里怎么下載你就不用關心了。
安裝:npm install -g bower
工具介紹完了,下面說說如何讓這些東西幫你拉磨
創建示例項目
工具安裝了一大堆,那如何幫我們效力呢,也很簡單的。
從yo開始,前面說過了,它可以幫你創建項目的基礎架構,比如創建一個基於jquery的前端項目:
打開cmd,執行以下代碼:
mkdir yotest
npm install -g generator-jquery
yo jquery
按照提示輸入你的項目名稱,版本(4位,如1.0.0),作者等信息,然后就等着收貨吧。
對上面的命令解釋一下,generator-jquery這個東西是yo提供的一種預先建立好的項目原型,
通過命令npm install -g generator-jquery把它安裝你到本地倉庫,最后通過yo jquery來隨時創建新的基於jquery的項目,與maven十分相似。
項目原型存放於官方倉庫,可以通過http://yeoman.io/generators/official.html這個去檢索,還有一個是社區倉庫http://yeoman.io/generators/community.html。
當然你可自己創建項目原型,請參考http://yeoman.io/authoring/,或許我下一篇會說到吧。
主要會幫你創建一個合理的項目目錄結構,並生成主要的幾個配置文件包括package.json(npm依賴包配置)、Gruntfile.js(grunt配置)、bower.json(bower依賴包配置)等。
如果你修改了package.json中的devDependencies結點,通過npm install重新下載依賴,這部分依賴主要給grunt使用,
修改了bower.json的devDependencies結點通過bower install重新下載依賴,
直接運行grunt命令執行所有grunt任務。
本文重在拋磚引玉,更多的用法大家去挖掘,或自行參考各自的官方文檔。
