幫助前端開發工程師簡化工作的工具：grunt-workflow

grunt-workflow 是一個幫助前端開發工程師簡化工作的工具，它的主要功能是：

1. webserver

2. livereload，能保存文件的時，自動刷新瀏覽器.

3. 自動編譯sass

4. 壓縮圖片

5. 合并圖片

6. 添加文件注釋

7. 自動補全css3瀏覽器前綴

8. 初始化項目目錄結構及文件

9. 支持ejs模板

安裝相關軟件

1. 安裝 nodejs window 安裝地址 ， mac 推薦通過brew安裝brew install node

2. 安裝 grunt-cli npm install -g grunt-cli

3. 安裝 grunt-init npm install -g grunt-init

4. 將當前git克隆到本地%USERPROFILE%\.grunt-init\（Mac平臺 ~/.grunt-init/），如果沒有.grunt-init目錄可用mkdir .grunt-init命令創建

5. 安裝 Graphics Magick(gm)，下載地址 (Mac平臺 brew install GraphicsMagick)

6. 安裝 PhantomJS，下載地址 (Mac平臺 brew install phantomjs)

7. 安裝 sass gem install sass

初始化新項目

1. 在項目目錄下執行 grunt-init lego (注意：項目目錄要為空文件夾，不然會報錯)

2. 根據提示填寫相關的內容

3. 執行 npm install 命令下載安裝相關依賴

快速在當前文件夾打開命令行

• win7:首先按住Shift鍵，然后選擇某文件夾后或在某文件夾中的空白處右鍵單擊，快捷菜單中會多出“在此處打開命令窗口”，選擇這個選項即可

• Mac:安裝 gotoshell

建立軟鏈接

使用下面命令能避免每次在新項目開始前都要使用 npm install 下載相關的grunt插件

• window: - mklink /d .\node_modules C:\Users\Administrator\Desktop\grunt_plugins\node_modules

• mac: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

1. html頁面存放在src文件夾，支持ejs模板（見5）。

2. css存放在 src/css 文件夾，第三方的樣式庫放在 src/css/lib

3. js存放在 src/js 文件夾，第三方的樣式庫放在 src/js/lib

4. src/slice 文件夾放需要合并的圖片；若需要多張雪碧圖，則自建子文件夾，一個子文件夾對應一張雪碧圖，子文件名為雪碧圖名（注意，需要替換雪碧圖的css文件，切片使用background-image屬性來引入，不使用background屬性引入。）

5. ejs模板片段放在src/partial文件夾，模板數據放在src/data文件夾。配置數據統一在src/data/config.json指定（注意：沒有配置的html頁面不參與ejs渲染）。

注意：src/css/lib 和 src/js/lib 里的文件是不會被壓縮的。

任務

項目安裝好了相關的配置就可以在命令行下使用grunt任務

grunt

默認打開一個webserver，查看的文件是在開發目錄下，支持livereload，sass自動編譯，ejs編譯

grunt port:端口號

指定端口打開一個webserver，查看的文件是在開發目錄下，支持livereload，sass自動編譯，ejs編譯

grunt release

生成發布文件，執行gunt release生成一個dest的目錄，檢測樣式文件里的本地資源引用，如果有無效引用則中斷任務，否則執行后續任務：編譯html，壓縮css、js文件，自動生成sprit圖片，替換css樣式里的鏈接。dest里的文件是發布使用的。

grunt dest

打開一個webserver，顯示dest目錄

grunt assets:提交注釋

提交dest里面的靜態文件（css、js、img）到靜態文件服務器，提交路徑為%SVN_REMOTE_DIR%/<description>/<name>/<version>，詳見注意事項。

grunt zip

打包src和dest文件給技術。其中dest文件夾作如下處理：將 dest/*.html 的 相對路徑的靜態資源 引用替換為線上路徑；若不需替換，資源路徑換成 絕對路徑 。

該命令在grunt release后執行，線上路徑由 包描述文件（見注意事項） 指定。dest里的靜態資源可通過grunt assets或手動上傳到assets服務器。

可選配置

配置文件： ~/.grunt-init/config.json

• IS_EXEC_CUSTOM_CMD 是否啟用初始化時執行默認命令，默認不啟動。

• 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，項目名，不要出現中文字符

• version，項目版本，默認值：1.0.0

1. 修改模板文件~/.grunt-init/lego/root/Gruntfile.js里面push_svn任務的用戶信息

2. 在grunt-init lego時注意以下字段的填寫，或者在初始化后的 package.json 中修改對應字段

項目主頁：http://www.baiduhome.net/lib/view/home/1409019909838