基于 Sass 和 Grunt 的简单高效的前端页面重构项目结构。特别适合开发类似 WordPress 主题的项目。
目标：提供一个合理的项目结构以及实用工具，简化重构项目流程，方便前端重构项目开发。让前端拿到需求后，马上开始编码。
实现功能：
- 使用 Grunt 对项目进行打包：对 JS 进行 jshint 规范化校验、将 JS 插件合并并压缩、编译 SCSS 文件、实现 livereload 浏览器无刷新实时看到效果。
- 使用 Sass 快速编写 CSS 代码，分模块的提供变量定义（var.scss）、实用 SCSS 函数（util.scss）、CSS Reset 和中文排版（typo.scss）等。
更多信息请看文章：构建初级前端页面重构开发环境
##主要目录结构
.
├──README.md --- 使用帮助
├──PSD --- 设计稿及其他项目资源
├──html --- 项目 HTML 页面
├──css --- 其他项目需要的其他 CSS 文件
├──fonts --- WebFonts 放在这里
├──images --- 图片们
├──js --- JS 组件
├──plugins --- JS 插件存放目录，Grunt 会将此目录所有文件合并压缩为 /js/plugins.min.js 文件
├──scss --- SCSS 模块文件
└──style.scss --- SCSS 主文件
##使用方法
- clone 或者下载下来，将文件夹命名为项目名称，删掉无用文件。
- 将资源文件放在 PSD 文件夹中。
- 如果需要使用 git 管理项目，使用 git clone 下来的，请注意使用
git remote -v查看 repo url 并修改为你自己的项目 repo url。 - 如果使用 git 管理项目，请编辑根目录下面的
gitignore添加不需要追踪的文件，并将其修改为.gitignore使其生效。 - 确保安装过 nodejs 和 grunt，在项目目录下面，执行
npm install和grunt，会自动打开浏览器，提供文件编译和实时刷新等功能。 - Just code it！
- 建议使用 section-wrap 和 section 的 HTML 结构和命名方式。
- 本项目将 HTML 文件放在二级目录
html/的目的是，如果需要与后端协作开发该项目，则后端可以直接在项目根目录下面进行同步开发，共用同一份 CSS、JS 文件，这样前端对 HTML 的修改，可以与后端页面同步。
- 预先审查设计稿，将其常见颜色、尺寸等保存为变量，统一管理在
var.scss文件中，将 web font 也定义在这个文件里面。 - 查看
util.scss文件，会发现一些很有帮助的工具函数，提高开发效率。 - 在
custom.scss文件编写主要代码，在media-queries.scss文件编写响应式有关代码，如果不需要则可以在style.scss文件中注释掉有关@import。 - 需要注意的是，如果没有设置过 ruby 的编码等相关设置，在 CSS 文件中出现中文（注释等）将会导致编译出错。
- 将 JS 插件的 JS 文件放在
js/plugins文件夹下面，Grunt 会将该文件夹下面所有文件合并压缩为js/plugins.min.js文件。 - 在
js/global.js文件中编写 JS 有关代码，Grunt 会检测变化，进行 jshint 校验并压缩为js/global.min.js文件。 - 如果你使用 jQuery，这样在你的 HTML 页面中，引入三个 JS 文件链接即可。
##TODO
- 提供中英文排版 CSS 文件，整合 normalize.css 的 CSS Reset 方案，去掉 typo.css。
- 针对更多的前端开发流程，修改提供更为合理的结构和工具函数等，提供最佳实现的样例。
- 提供命令行的项目结构生成工具，并提供一些参数方便自定义。
欢迎大家提 Issue ，也希望该项目可以帮助大家构造适合自己的开发 Workflow 切实提高开发效率和质量。
##使用许可
基于 MIT 协议，不限制商业或者以营利目的使用。