我的前端单页面自动编译刷新工具和环境

前些天我完成了一个前端模块, 叫做 mission, 用来简化我的开发工具链
代码: https://github.com/jiyinyiyong/mission

mission 是基于 ShellJS 的 make 工具作为框架的,
在 make.coffee 里用 target.taskName 定义任务,
然后其中以 Node 的方式调用 mission 的方法来处理任务,

这里是一个简单的例子, 指定了文件编译的源文件, 目标文件, 以及参数:

target.coffee = ->
  mission.coffee
    file: 'a.coffee'
    from: 'src/'
    to: 'lib/'
    options:
      bare: yes

当然还有一些其他的配置, 具体要看 README 和 test/ 目录的代码了
另外也可以看土豆上演示视频, 非常详细(有一些 task 过时了):
http://www.tudou.com/programs/view/SPTvloHwDE4/

当中的任务是根据我自己的使用定制的, 说一下我使用的场景,
我经常做单页面的应用, 做一些特效或者一些界面, 用来展示 Demo.
页面通常是 Nginx 上直接跑 HTML, 然后在 Chrome Canary 里调试

我的代码几乎全部都是 CoffeeScript, 为了开发的效率
代码第一步经过 coffee-script 模块编译到 JS,
然后通过 Browserify 编译到 JS, 并且生成 SourceMap 文件

调试时, 我是通过 JS 文件调试的, 而不是 .coffee 文件
.coffee 调试不如直接调试 JS 能看明白运行细节.

当然, 编译的过程在 mission 里做了封装, 所以是自动化的.

注意我的個人项目代码为了前后端共用, 都是用 CommonJS 规范组织的.
如果有 RequreJS 等其他的需要, 可以写 Node 脚本定制..

CSS 用 Chrome Workspace 编辑, 尽可能模拟设计师做界面的方式!

Workspace 是 2013 年 Google IO 上演讲介绍的, 现在英文资料已经很多:
https://developers.google.com/chrome-developer-tools/docs/workspaces

我做了个视频在土豆上演示了 CSS 和 LESS(不那么方便):
http://www.tudou.com/programs/view/6Lo4HXWXh9M/
另外 SASS 也能用, 我更新过一个简单的例子(Watch 部分去掉了):
https://github.com/jiyinyiyong/demo-of-sass-chrome

强烈推荐在里边交互式编写 CSS, 因为做界面相比写代码更像是做设计!

不推荐学我, 因为我使用的是自己个人的 HTML 模板引擎
编译工具具体代码在 mission 里可以看

如果有兴趣, 欢迎读 Cirru HTML 的 README 尝试使用:
https://github.com/Cirru/cirru-html

限于篇幅, 具体不展开了...

有时候还是需要有简单的后端的, 我做了两个模块封装了 WebSocket 的接口:
https://github.com/jiyinyiyong/ws-json-server
https://github.com/jiyinyiyong/ws-json-browser

使用很简单, 注意 Browserify 模块, 具体也不在这里展开了

有了上边这样一些工具, 我的流程就方便多了
经过一段时间的演进, 目前是这样一个脚本, 用于整个项目的构建
https://gist.github.com/jiyinyiyong/10336012
具体示范在上边的土豆视频里有, 所以下边只介绍一些简单步骤

相关的步骤可以通过调整脚本来完成. 后边就是专心写代码了

Grunt 适合的场景是编译过程可以通过其配置直接解决的,
我的场景里, 特别是 Watch-Reload 涉及到不少逻辑, 不适合

返回博客首页: http://blog.tiye.me