grunt-workflow

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

Grunt-Workflow

Grunt Workflow 基于 Grunt,是一个跨平台的(Mac&Win)、优雅的、高效的、可定制的前端重构工作流程。

提供以下三种方式获取:

阅读 说明文档 了解更多,如有疑问参见 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 目录下为最终输出

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

  2. 单独安装下面两个依赖

     // 安装 GraphicsMagick 图像处理库
     brew install GraphicsMagick
     
     // 安装 Phantomjs 库
     brew install phantomjs
    
  3. 运行 gm versionphantomjs --version 来测试上述依赖是否成功安装完成

  1. 安装 Node.js 默认此步骤已完成
  2. 下载安装 GraphicsMagickPhantomjs
  3. 运行安装完成后,添加环境变量步骤
  1. 成功安装上述GraphicsMagickPhantomjs之后,在项目目录下运行 npm install 继续安装其他依赖。

一个完整的 Grunt 工作流,其中包含 Task

  • Less/Sass 编译为 CSS
  • CSS Lint 检验
  • CSS 压缩
  • 自动合并雪碧图
  • 自动处理 Retina 2x 适配
  • 自动追加 CSS 文件末时间戳
  • 文件变动检测,触发编译
  • FTP 发布部署
  • ZIP 打包项目

grunt.registerTask('default', ['less:dev', 'copy:dev', 'clean:dev', 'watch']);

输出目录为:../publish/(css/ + img/ + slice/)
注:仅做编译操作 Less/Sass -> CSS,无其他操作

输出目录为:../publish/(css/ + img/ + sprite/)
注:包括 Less/Sass 编译+压缩+雪碧图拼合+PNG压缩,仅执行1次流,不含(文件变动 watch)

输出目录为:../publish/(css/ + img/ + sprite/)
注:同 grunt all,但不删除 tmp/ 目录,供调试查看使用,含(文件变动 watch)

注:将 grunt all 生成结果使用 FTP 上传到服务端

注:将 grunt all 生成结果使用 ZIP 生成包文件

注:拷贝移动 slice/ -> 合并雪碧图 sprite -> CSS 压缩

注:@2x 图 生成 @1x 图

  • 由于 Mac OS & Win 底层 CPU图片压缩算法 不同导致的版本库Diff问题 [见:#issues]
  • 移除了开发过程中频繁的编译、压缩、合并图片等操作,开发全程使用 @1x 图以及 未压缩 CSS 预览

Released under MIT LICENSE