适合简单静态页面的grunt自动化开发工具
JavaScript CSS Shell
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
css
img
js
.ftppass
.gitignore
Gruntfile.js
README.md
favicon.ico
go.sh
index.html
package.json

README.md

StaticPage 静态页面自动化工具

banner

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文件夹、.gitignoreGruntfile.js等配置文件)。

注意:打包后自动压缩html,默认清理掉注释,删除空格在Grunt配置中可选(追求极致可以勾选)。

######发布:上传到FTP服务器

支持直接发布上传到ftp服务器,对于没有使用git的项目做到一个线下版本管理、线上便捷发布。

grunt publish

注意:发布之前请先执行grunt bundle打包最终代码。

ftp帐号与密码保存在.ftppass文件中,请注意保密。

####说明

此工具适合简单静态页项目,可根据自己项目需求配置.

「只有适合自己的,才是最好的」.

License

Released under [MIT] LICENSE