A tool for quickly creating a static page project .Based on Grunt.
StaticPage是一套旨在提高静态页面开发效率、快速生成模板、开发的的工具。
图文教程可参考博文:《让前端工作更快、更智能:利用StaticPage自动化工作流》。
####一键脚本安装包
2014年3月27日更新:为了让大家更加方便，写了一个脚本，直接在终端运行以下命令就可以一键(1.git clone 2.重命名 3.修改项目配置 等)配置好所有的文件，不用再一个一个打开文件修改文件。脚本为go.sh文件，OSX系统下sh go.sh即可执行，大家看下就能理解。
git clone https://github.com/foru17/StaticPage.git && cd StaticPage && sh go.sh
####克隆本仓库
在开发目录下执行：
git clone https://github.com/foru17/StaticPage.git
访问Github较慢的同学可使用该仓库在阿里云的镜像，该镜像与Github上自动同步。
git clone http://git.is26.com/StaticPage.git
####安装Npm依赖包
详细的依赖包清单请参考package.json文件，Grunt相关配置请看Gruntfile.js
npm install
安装完毕之后，你将得到如下的文件结构
####文件结构
静态页面不需要太过复杂的文件结构，最终的发布版本代码和相关文件全部在build文件夹中。为了后续维护方便，请适当做好相应的注释和文档。
newProject/
|
|-----assets //dev模式下css、js、images等集合
| |-css
| |-js
| |-images
|
|-----build //最终生成的纯净文件夹
| |-assets //
| |-css
| |-min.style.css // 最终生成的为压缩版本的css
| |-js
| |-min.v.js // 最终生成的为压缩版本的js
| |-other.js // 其他样式表
| |-images
|
| |-favicon.ico // 静态页的ico
| |-index.html
| |-README.md // 附上MD文档
| |-此处根据项目需求，引入不用文件
|
|-----css // 样式表开发目录
| |-sass // 推荐使用Sass
| |- _481up.scss
| |- _768up.scss
| |- _base.scss
| |- _mixins.scss
| |- _reset.scss // 此处可用normalize.css样式，也可以根据项目需求自定义
| |- style.scss // 此处为Sass基础文件 ，在此处根据需求@import 样式
| |-style.css // Sass编译处理生成的样式表为style.css，也可直接编辑此样式表
| |-style.css.map // 若使用Sass --pre 版本，可使用sourcemap功能（注:2014年3月发布的Sass 3.3默认支持sourcemap）
|
|-----js //JavaScript相关
| |-base.js // 基础样式在这里，最终压缩为min.v.js
|
|----- .node_modules / // npm安装依赖包所在文件夹
|
|-----.gitignore // 默认使用git，配置好gitignore文件
|-----.ftppass.json // 保存FTP帐号和密码的文件，请注意安全，建议添加到gitignore文件中
|-----Gruntfiles.js // grunt配置文件 建议先阅读配置
|-----package.json //g runt依赖包配置文件
####初始化
git clone下来后，可以将StaticPage文件夹修改成项目的文件名，建议初始化时可执行一次:
grunt bundle
####Grunt配置
######CSS编译&&压缩
对于Sass可自动编译和纠错，使用cssmin对文件进行压缩，可有效减少文件大小.
使用
grunt sass
可进行Sass编译。若直接使用原生css，可直接执行grunt。
######JS文件
使用concat根据自己的需求对js进行压缩（一般简单静态页面使用一个base.js即可），默认使用uglify对js文件进行压缩，在最终的min.v.js文件前面加上时间戳（可以根据需求删除）。
######文件监听
使用
grunt watch
可监听所有的开发目录下.scss,.css,'.js'的变化，自动编译压缩。
可以单独使用grunt watch:base进行普通监听js目录下所有文件和css/style.css。
使用grunt watch:sass或者grunt watch:css分别监听.scss和.css文件。
######打包
使用grunt bundle可自动生成不包含开发时的杂乱文件压缩包，文件名为项目名称-生成时间.zip的压缩包。
执行grunt bundle实际上为依次执行'clean:pre', 'copy:main','cssmin','copy:archive', 'clean:post','compress'等命令，首先将先前build文件夹中的内容清空，然后生成、复制、压缩最新的代码(不包含node_modules文件夹、.gitignore、Gruntfile.js等配置文件)。
注意:打包后自动压缩html，默认清理掉注释，删除空格在Grunt配置中可选（追求极致可以勾选）。
######发布:上传到FTP服务器
支持直接发布上传到ftp服务器,对于没有使用git的项目做到一个线下版本管理、线上便捷发布。
grunt publish
注意:发布之前请先执行grunt bundle打包最终代码。
ftp帐号与密码保存在.ftppass文件中，请注意保密。
####说明
此工具适合简单静态页项目，可根据自己项目需求配置.
「只有适合自己的，才是最好的」.
Released under [MIT] LICENSE