作一個聰明的前端開發者

那麼什麼是聰明者，就是打架不出拳，直接用刀砍，或者更牛逼的就開槍！

那麼如何作一個聰明的前端開發者？

很顯然，就是用工具代替手工，用自動代替手動！

那究竟是用什麼工具呢，以下：

前端開發工具

工具備點多，可是都很是簡單，或許你已經安裝並使用過一些了。

1. git，版本控制系統
2. node，JS運行平臺
3. npm，node的包管理
4. yo，腳手架
5. grunt，項目構建工具
6. 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任務。

本文重在拋磚引玉，更多的用法你們去挖掘，或自行參考各自的官方文檔。