grunt-workflow多玩前端工作流
grunt-workflow 是一個幫助前端開發(fā)工程師簡化工作的工具，它的主要功能是：
webserver
livereload，能保存文件的時，自動刷新瀏覽器.
自動編譯sass
壓縮圖片
合并圖片
添加文件注釋
自動補全css3瀏覽器前綴
初始化項目目錄結構及文件
支持ejs模板
安裝相關軟件
安裝 nodejs window 安裝地址 ， mac 推薦通過brew安裝
brew install node安裝 grunt-cli
npm install -g grunt-cli安裝 grunt-init
npm install -g grunt-init將當前git克隆到本地
%USERPROFILE%\.grunt-init\（Mac平臺~/.grunt-init/），如果沒有.grunt-init目錄可用mkdir .grunt-init命令創(chuàng)建安裝 Graphics Magick(gm)，下載地址 (Mac平臺
brew install GraphicsMagick)安裝 PhantomJS，下載地址 (Mac平臺
brew install phantomjs)安裝 sass
gem install sass
初始化新項目
在項目目錄下執(zhí)行
grunt-init lego(注意：項目目錄要為空文件夾，不然會報錯)根據提示填寫相關的內容
執(zhí)行
npm install命令下載安裝相關依賴
快速在當前文件夾打開命令行
win7:首先按住Shift鍵，然后選擇某文件夾后或在某文件夾中的空白處右鍵單擊，快捷菜單中會多出“在此處打開命令窗口”，選擇這個選項即可
Mac:安裝 gotoshell
建立軟鏈接
使用下面命令能避免每次在新項目開始前都要使用 npm install 下載相關的grunt插件
window: -
mklink /d .\node_modules C:\Users\Administrator\Desktop\grunt_plugins\node_modulesmac:
ln -s ~/Documents/grunt_plugins/node_modules ./node_modules(~/Documents/grunt_plugins/node_modules) 目錄是存放grunt插件的文件夾
項目目錄結構
└── src ├── _index.html ├── css │ └── lib ├── img ├── js │ └── lib ├── sass ├── partial ├── data └── slice
html頁面存放在src文件夾，支持ejs模板（見5）。
css存放在 src/css 文件夾，第三方的樣式庫放在 src/css/lib
js存放在 src/js 文件夾，第三方的樣式庫放在 src/js/lib
src/slice 文件夾放需要合并的圖片；若需要多張雪碧圖，則自建子文件夾，一個子文件夾對應一張雪碧圖，子文件名為雪碧圖名（注意，需要替換雪碧圖的css文件，切片使用
background-image屬性來引入，不使用background屬性引入。）ejs模板片段放在src/partial文件夾，模板數(shù)據放在src/data文件夾。配置數(shù)據統(tǒng)一在src/data/config.json指定（注意：沒有配置的html頁面不參與ejs渲染）。
注意：src/css/lib 和 src/js/lib 里的文件是不會被壓縮的。
任務
項目安裝好了相關的配置就可以在命令行下使用grunt任務
grunt
默認打開一個webserver，查看的文件是在開發(fā)目錄下，支持livereload，sass自動編譯，ejs編譯
grunt port:端口號
指定端口打開一個webserver，查看的文件是在開發(fā)目錄下，支持livereload，sass自動編譯，ejs編譯
grunt release
生成發(fā)布文件，執(zhí)行gunt release生成一個dest的目錄，檢測樣式文件里的本地資源引用，如果有無效引用則中斷任務，否則執(zhí)行后續(xù)任務：編譯html，壓縮css、js文件，自動生成sprit圖片，替換css樣式里的鏈接。dest里的文件是發(fā)布使用的。
grunt dest
打開一個webserver，顯示dest目錄
grunt assets:提交注釋
提交dest里面的靜態(tài)文件（css、js、img）到靜態(tài)文件服務器，提交路徑為%SVN_REMOTE_DIR%/<description>/<name>/<version>，詳見注意事項。
grunt zip
打包src和dest文件給技術。其中dest文件夾作如下處理：將 dest/*.html 的 相對路徑的靜態(tài)資源 引用替換為線上路徑；若不需替換，資源路徑換成 絕對路徑 。
該命令在grunt release后執(zhí)行，線上路徑由 包描述文件（見注意事項） 指定。dest里的靜態(tài)資源可通過grunt assets或手動上傳到assets服務器。
可選配置
配置文件： ~/.grunt-init/config.json
IS_EXEC_CUSTOM_CMD是否啟用初始化時執(zhí)行默認命令，默認不啟動。LINK_SRC_NODE_MODULES建立node_modules軟鏈接的源路徑。(建議mac用戶指定到~/.node_modules， win用戶指定到%USERPROFILE%\.node_modules)OPEN_APP初始化目錄后啟動APP打開當前項目。
注意事項
提交到 svn-work 時（需手動提交），只上傳配置文件 Gruntfile.js 、 package.json 和源碼文件夾 src/ 即可
-
提交到 svn-assets 時，需
說明：svn-assets提交路徑為
%SVN_REMOTE_DIR%/<description>/<name>/<version>，對應線上路徑為http://assets.dwstatic.com/<description>/<name>/<version> description，項目類型，取值：project、game、special
name，項目名，不要出現(xiàn)中文字符
version，項目版本，默認值：1.0.0
修改模板文件
~/.grunt-init/lego/root/Gruntfile.js里面push_svn任務的用戶信息在
grunt-init lego時注意以下字段的填寫，或者在初始化后的 package.json 中修改對應字段