redui/front-end-scaffold

前端开发脚手架项目

前端脚手架项目

致力于帮助快速开发高质量前端项目!

如何快速

• 做项目前：生成项目结构。命令类似 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)

启动项目

1. 安装 Node.js
2. 打开命令行窗口
3. cd 项目路径
4. 安装依赖: npm install。（如果是开发，需要安装 Sass 和 Compass）
5. 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)
  • Sass
  • Compass 基于Sass的框架
• CSS
  • kitecss 灵活的CSS布局框架。基于display:inline-block
  • debugCSS 对HTML的验证
  • Font Awesome 图标字体

本项目相关帮助文档

• Sass官网 世界上最成熟，稳定强大的专业的CSS拓展语言
• Compass 基于Sass的框架
• Gulp 入门指南
• kitecss 灵活的CSS布局框架

参考

• BEM
• 移动开发规范概述
• tooling
• Why I Left Gulp and Grunt for npm Scripts 中文版
• react-slingshot
• npm-scripts-demo