构建自己的 framer.js 工具链

Framer.js

这个工具对于一般设计师来说还不错，但是对于专业程序员来说则存在以下几个问题：

1. 没有自己用惯的 IDE 好使（例如各种插件支持）。
2. 使用各种可以编译到 JS 语言，不仅仅是官方的 Coffee-Script。
3. 集成自己的分发系统或自动化工具（例如自动部署到生产环境等）。
4. 更方便地集成既有的代码资产（自己的或者开源社区的）。
5. 更好地组织代码结构。

除此之外，这个工具是要收费的，$99美金，包一年内的升级。

构建自己 Framer.js 工具链

$sudo npm install yo -g

安装 generator-framer-coffee:

$sudo npm install generator-framer-coffee -g

然后创你自己的 framer 工程目录，例如：

$mkdir my-framer && cd $_

最后执行：

$yo framer-coffee

这个过程会在你的 my-framer 目录下创建全部的需要的依赖文件，以及用于工程管理的 gulpfile.coffee，目录结构大致如下：

然后你就可以用自己喜欢的 IDE 一边修改代码，一边看结果了。

Framer.js 的版本

1. framer.js 没有直接发布编译好的版本到 npm，需要你从 npm 安装后自己编译。
2. framer.js 开发时大量依赖的 packages 都被写进了 package.json 的 dependencies 而不是 devDependencies，因此造成安装过程很漫长。
3. 有些 Package (例如 Phantom.js) 的安装需要从 amazon s3 下载文件，这个在国内是被封的

我看到最近的一些 commits，这个问题正在改进，但是还没改完。

Gulpfile.coffee

其他 Tricks

执行 npm run build 可以直接编译代码和复制其他工程文件到构建目录，发布时可以用这个命令。

通过设置环境变量 NODE_ENV 可以控制是否生成 uglify 之后的 JS 代码。

export NODE_ENV=production && npm start

此时也会显示 app.js gzip 之后的尺寸作为参考。

制作你自己的 Generator