致力于帮助快速开发高质量前端项目!
- 做项目前:生成项目结构。命令类似
yo front-end-scaffold 一些选项
- 做项目时
- 新建一个页面/模块。创建页面/模块所需的资源,并引入。命令类似
gulp create-page page-a 一些选项
。会生成page-a.html
以及page-a.js
等所需资源。 (TODO) - 项目依赖的技术(jQuery之类)的文档导航页 -> 能快速查找文档
- 该项目的UI的使用Demo页 (TODO)
- IDE中适用的该项目的一些代码片段(如 Sublime 的 Snippets ) -> 快速生代码 (TODO)
- Ajax接口的模拟的快速生成 (TODO)
- 给的 Psd 文件上最好是标注好各种尺寸的。一个标尺寸的 Photoshop 的插件 Size Marks 。
- 切图:使用 Photoshop 的插件,一键切图工具cutterman
- 优先使用图标字体。如果实在要做图片精灵, Compass支持自动生成图片精灵
- 新建一个页面/模块。创建页面/模块所需的资源,并引入。命令类似
- 项目上线前
- 对资源进行压缩,合并等。
- 依赖的第三方插件会用固定版本。
- 代码规范,以及对其的验证(jsHint之类) (TODO)
- 测试,持续集成 (TODO)
- 安装 Node.js
- 打开命令行窗口
cd 项目路径
- 安装依赖:
npm install
。(如果是开发,需要安装 Sass 和 Compass) npm run start:server
。
- 发布:
npm run build
。该命令做了以下几件事- 删除 dist
- 将 ES6 代码编译成 ES5 代码,合并(如果有需要的话),并压缩。用 Webpack + Babel 来实现的。
- 将 Sass 代码编译成 CSS 代码,并压缩。用 Compass 来实现。
- 将 src 目录下的除了 ES6 和 Sass 代码外的其他代码都移动到 dist 目录下。
- 开发:
npm run start
。该命令做了以下几件事- 启动静态服务器
- 监视 Sass 文件的变化。变化时,编译生成 CSS。
- 监视 ES6 文件的变化。变化时,编译生成 ES5 的 JS。
- 任务管理(Task Runners)
- Gulp
- CSS 预编译(CSS Preprocessor)
- CSS
- kitecss 灵活的CSS布局框架。基于
display:inline-block
- debugCSS 对HTML的验证
- Font Awesome 图标字体
- kitecss 灵活的CSS布局框架。基于