generator-hcj

HCJ 前端开发工作流

你还在为跑不起来的开发环境发愁吗？
你还在为蛋疼的调试过程捉急吗？
你还在为代码冲突而忧伤吗？
开发调试，打包提测的必备良药 —— HCJ 上市了 ！

---

开发背景

1. 前端没有独立的开发环境，完全依赖后端的环境运行，经常发生环境起不起来的问题而影响前端开发效率
2. 开发环境的配置过于复杂，对于新人来说门槛太高，耗费时间太长
3. 前端的调试过程非常麻烦，每次都要通过 fis3 打包后才能看到代码运行结果
4. 基于第 3 点，造成过多 fis3 打包生成的 hash 后的冗余文件
5. fis3 打包涉及范围太广，会把项目之外的其他静态文件一起压缩，难免会有误伤

---

设计原则

1. 基于原来的目录结构进行开发，确保代码结构不影响发布
2. 尽量保持前端同学原有的开发习惯，比如使用 LESS，文件名 hash 化，代码压缩等等，确保无缝迁移
3. 不影响后端开发环境，后端开发同学无感知
4. 原有的开发环境仍然可用
5. 解决提交代码后经常发生冲突的问题
6. 为前后端分离打下基础

---

功能特性

1. 支持 HttpSever 功能，本地秒启服务
2. 支持 LiveReload，保存文件后自动刷新浏览器，不用按 F5 刷新
3. 支持 SourceMap，压缩的代码一样可以断点调试
4. 支持 HTML / CSS / JavaScript 的压缩
5. 支持 include 的方式引入 HTML 文件
6. 支持 LESS 语法的 CSS 预编译
7. 支持打包自动添加并修改 hash 文件名

---

界面预览

---

使用方法

• 安装 Node.js

• 安装 Grunt

• 安装 Yeoman

• 执行 npm install -g generator-hcj

• 执行 yo hcj

• 开发模式

grunt dev

• 打包模式

grunt build

---

目录结构

├── financing-frontend-mobile-develop
│   ├── images
│   ├── pages
│   ├── scripts
│   └── styles
├── financing-frontend-mobile-static
│   └── mobile
│       ├── images
│       ├── scripts
│       └── styles
├── financing-mobile
│   └── financing-mobile-webapp
│       └── src
├── Gruntfile.js
├── package.json
└── .hcjrc

---

未完待续

1. RequireJS 自动打包合并
2. CSS Sprite 自动生成
3. manifest.json 自动生成

---