grunt-workflow

一个跨平台的（Mac&Win）、优雅的、高效的、可定制的前端重构工作流程

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 保持更新

阅读说明文档了解更多，如有疑问参见 Wiki 中的图解

文件结构

安装完成后，你将得到以下文件结构：

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

建议使用 Brew 安装 Node.js 默认此步骤已完成

单独安装下面两个依赖注

 // 安装 GraphicsMagick 图像处理库
 brew install GraphicsMagick
 
 // 安装 Phantomjs 库
 brew install phantomjs

运行 gm version 和 phantomjs --version 来测试上述依赖是否成功安装完成

Windows

安装 Node.js 默认此步骤已完成
下载安装 GraphicsMagick 和 Phantomjs
- 安装步骤图解
- 备用下载：GraphicsMagick-1.3.19-Q8-win32-dll.zip
- 备用下载：phantomjs-1.9.2-windows.zip
运行安装完成后，添加环境变量步骤

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