[工具]前端自動化工具grunt+bower+yoman

安裝過程

• 安裝nodejs
• 安裝grunt，bower，yoeman

命令：（-g 表示全局安裝，不然安裝到當前目錄下）

npm install -g grunt-cli

npm install -g yo

npm install -g bower

刪除已安裝：

npm unintall -g yo

yoman -- 「腳手架」

• 針對不一樣web工程，安裝相應yoman「腳手架」生成器，eg：angular工程

npm install -g generator-angular

• 建立項目文件夾（注意不要有-，空格等其餘符號）

mkdir testAngular

cd testAngular

• 生成angular項目，eg：項目名稱爲「angularProject」

  yo angular angularProject

• 查看node項目，查看package.json文件，包含生成項目基本信息。

name爲項目名稱，而非所在文件夾名稱，version爲版本號，dependencies爲項目運行須要的依賴環境，devDpendencies爲項目開發所須要的依賴環境。^表示版本寬鬆依賴，主版本號符合便可，再執行npm install會自動更新爲最近的版本。~表示最小的版本號更新。

文件功能

• node-modules：存放項目開發時須要的依賴環境
• test:測試時使用的文件
• editorconfig：代碼風格設置

其餘命令

• ls（顯示文件夾下文件列表）
• clear（清屏）
• rm （刪除）
• touch （新建一個文件）

bower -- 包管理工具

bower是一個包管理器，能夠安裝須要的框架開發包，eg：jquery

bower install jquery

安裝組件包

bower install bootstrap

若是組件比較小衆，沒有在bower註冊，可按如下方式安裝：

• github短語安裝

如圖是jquery在github的短語名，假設jquery沒有在bower註冊，能夠用如下命令安裝它

bower install jquery/jquery

• 經過項目完整github地址安裝

bower install https://github.com/jquery/jquery.git

• 直接經過url安裝

bower instal http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

bower init

在當前文件夾下生成bower.json文件，根據bower.json文件安裝所需的組件和包

bower init

將工具包安裝成devDenpendencies

bower install angular --save-dev

將工具包安裝成運行環境依賴

bower install angular --save

.bowerrc

{
"directory":"bower_components",
"proxy":"http://prox.aaa.com:8080",      //代理
"https-proxy":"http://prox.aaa.com:8080",
"timeout":60000                          //單位毫秒  
}

grunt

grunt中task，option，target的舉例

compass爲一個task，opitions說明具體完成什麼操做。dist和server都是target，表示該task針對誰。

運行單個task，eg：tast爲compass

grunt compass

只針對某個target運行單個task

grunt compass：dist

將task組合起來，一塊兒運行，在Gruntfile.js中有最後的配置：

grunt build

老項目如何整合grunt

• 建立項目文件夾以及文件

• 建立package.json

  npm init
  npm install grunt --save-dev
  npm install grunt --save

• 安裝load-grunt-tasks插件

  npm install load-grunt-tasks --save-dev

• 安裝time-grunt插件

  npm install time-grunt --save-dev

• 編寫Gruntfile.js文件

  npm install grunt-contrib-copy --save-dev 官方文件拷貝

npm install grunt-contrib-clean --save-dev 官方文件刪除

Gruntfile.js文件中添加copy和clean兩個target

開源協議

MIT BSD ISC Apache GPL

查看端口占用

列出端口

netstat -ano
搜索目的端口
netstat -aon|findstr "49157"
搜索目的端口對應PID指向的應用
tasklist|findstr "2720"

grunt命令

• grunt serve
• grunt serve --allow-remote 包括如下幾個小task：
• wiredep：根據bower.json配置項目依賴，在相應html等文檔中加入引用鏈接
• cocurrent：server： 把sass文件編譯成css文件，複製到.tmp文件下
• autoprefixer： 添加廠商前綴
• connnect：livereload
• watch：監聽本地文件修改