理想中的前端工作流

在日常的前端开发中，我们会遇到 LESS/SASS 编译 、 CSS 前缀自动补全 、 CSS 压缩 、 图片压缩 、 JS 合并压缩 、 布署发布 等各种各样的操作。通常，我们都会根据实际情况定制一个 流程 性的工具来实现所有常规的功能，这，就是我理解的 前端工作流 。

CssGaga
曾经，使用过一段时间的 CssGaga ，为它的强大功能而感到震憾，几乎解决了所有常见的需求。

那一段时间里，习惯了 CssGaga 拖图片即压缩上传，拖 CSS 文件即压缩+合并雪碧图上传，拖啥就做啥。也就是说，你想要做什么操作，就手动拖拉什么文件就好了。

但随着自己慢慢变胖，慢慢的越来越懒，有时候就想，为什么每次完成开发后，要手动拖几次文件，而不是一键就搞定所有必要的功能呢？

CssGaga 的模式非常值得借鉴学习，特别是它的 雪碧图合成 方式，见过很多优秀的雪碧图插件都是参照其写法，如： grunt-sprite 、 gulp-tmtsprite

我理想中的工作流
一个人，想某件事，想得多了，就会有所行动，比如我曾经喜欢的妹子，现在成了我的老婆。。。。。

不好意思，扯远了，继续讲我想要的工作流模式。

结合公司的工作模式和实际业务实践，我把一个这个流程分成两个过程： 开发过程 和 布署过程 。

1. 开发过程
   当我开始开发时，我希望是所见即所得的，我的每一次代码编辑，都能即时的响应反馈在我面前; 我用的是能提升我效率的 CSS 预处理语言 ，我希望她能即时的帮我编译成 CSS; 我用 rem , 但我写的是 px ，我希望她能帮我转换……

我想要的 开发过程 很简单，就是能帮我提升效率！

2. 布署过程
   开发完后，终于到了要发布的时候了。发布前，需要生成可以放到 生产环境 中的代码，而这个过程，要做的工作有非常多，大概有如下：

Less/Sass -> CSS

CSS Autoprefixer 前缀自动补全

CSS 压缩合并

CSS Sprite 雪碧图合成

Retina @2x &am