Grunt-Workflow 
Grunt Workflow 基于 Grunt，是一个跨平台的（Mac&Win）、优雅的、高效的、可定制的前端重构工作流程。
快速开始
提供以下三种方式获取：
- 下载最新版 Grunt Workflow
- Clone the repo:
git clone git@github.com:hzlzh/Grunt-Workflow.git - 用 Bower 安装:
bower install grunt-workflow- 若已安装，可通过 bower 或 git 保持更新
文件结构
安装完成后，你将得到以下文件结构：
Grunt-Workflow/
│
├── package.json // 项目依赖定义
├── Gruntfile.js // 配置任务
├── .ftppass // FTP 部署密码(非必选) 配置参见插件：grunt-ftp-deploy
│
├── node_modules // `npm install` 拉取依赖包
│
├── html/ // HTML文件
│ └── index.html
├── css/ // CSS源文件(通常为`Less`/`Sass`等)
│ ├── lib-reset.less
│ ├── lib-mixins.less
│ └── style.less
├── img/ // 图片素材 [*非*合并 Sprite(雪碧图)] 如：logo
│ ├── logo.png
│ └── background.png
├── slice/ // 图片素材 [待自动合并 Sprite] 如：Icons
│ ├── icon-github.png
│ ├── icon-github@2x.png // 含 1x & 2x 图
│ ├── icon-twitter.png
│ └── icon-twitter@2x.png
└── publish/ // 目标文件夹，存放可发布的成品
├── css/ // 最终 CSS 成品
│ └── style.css
├── img/ // 仅 Copy 不做操作
│ ├── logo.png
│ └── background.png
└── sprite/ // 自动生成的雪碧图
└── demo.png
经过 Grunt Workflow 的自动化过程，../publish 目录下为最终输出
环境准备
Mac OS
-
单独安装下面两个依赖 注
// 安装 GraphicsMagick 图像处理库 brew install GraphicsMagick // 安装 Phantomjs 库 brew install phantomjs -
运行
gm version和phantomjs --version来测试上述依赖是否成功安装完成
Windows
- 安装 Node.js 默认此步骤已完成
- 下载安装 GraphicsMagick 和 Phantomjs
- 运行安装完成后，添加环境变量步骤
Mac OS & Windows 通用步骤
- 成功安装上述
GraphicsMagick和Phantomjs之后，在项目目录下运行npm install继续安装其他依赖。- 若遇到网络问题，临时使用已打包的依赖包：node_modules.zip
说明文档
一个完整的 Grunt 工作流，其中包含 Task：
- Less/Sass 编译为 CSS
- CSS Lint 检验
- CSS 压缩
- 自动合并雪碧图
- 自动处理 Retina 2x 适配
- 自动追加 CSS 文件末时间戳
- 文件变动检测，触发编译
- FTP 发布部署
- ZIP 打包项目
命令详解：
默认工作流 grunt
grunt.registerTask('default', ['less:dev', 'copy:dev', 'clean:dev', 'watch']);
输出目录为：../publish/(css/ + img/ + slice/)
注：仅做编译操作 Less/Sass -> CSS，无其他操作
完整发布流 grunt all
输出目录为：../publish/(css/ + img/ + sprite/)
注：包括 Less/Sass 编译+压缩+雪碧图拼合+PNG压缩，仅执行1次流，不含(文件变动 watch)
调试工作流 grunt debug
输出目录为：../publish/(css/ + img/ + sprite/)
注：同 grunt all，但不删除 tmp/ 目录，供调试查看使用，含(文件变动 watch)
FTP 发布操作 grunt push
注：将 grunt all 生成结果使用 FTP 上传到服务端
ZIP 发布操作 grunt zip
注：将 grunt all 生成结果使用 ZIP 生成包文件
定义别名 grunt sprite-cssmin
注：拷贝移动 slice/ -> 合并雪碧图 sprite -> CSS 压缩
定义别名 grunt 2x2x
注：@2x 图 生成 @1x 图
补充说明
- 由于
Mac OS&Win底层CPU图片压缩算法不同导致的版本库Diff问题 [见：#issues] - 移除了开发过程中频繁的编译、压缩、合并图片等操作，开发全程使用
@1x图以及未压缩 CSS预览
License
Released under MIT LICENSE