欢迎使用frontpay前端脚手架
指定项目放置目录
c:>type null > .bowerrc
创建.bowerrc
文件并编辑
{
"directory": "github"
}
配置好项目目录后(不配置默认为bower_components ) -0-!!!
bower install myproject=frontui
myproject 为项目名称
template
模板目录static
前端静态资源目录www
server目录,模板编译目录bower_components
第三方依赖js组件,ui库目录node_modules
gulp依赖组件gulpfile.js
gulp构建环境主文件package.json
组件包配置文件config.json
项目配置文件svn.json
SVN目录配置文件
先安装npm
依赖包
npm install
安装bower
组件
bower install
执行安装npm_modules
, bower_components
###如果修改了外部.bowerrc
文件则需要myporject
目录下再建一个.bowerrc
文件(bower过滤掉了github中的.bowerrc)
.bowerrc
{
"directory": "bower_components"
}
模板引擎是试用nunjucks
,优点是具有layout
功能。
官方模板API文档http://mozilla.github.io/nunjucks/cn/templating.html
_layout
页面布局框架文件目录base
基本document框架layout
页面layout框架
_components
组件模板
模板全局配置变量主要读取config.json
文件。
比如 {{static}}
输出静态文件目录
注意iamges
路径定义变量
保持原来frontui
文件结构和内容,方便更新版本,一切其他操作只需引入新的文件,通过less
语法继承重载即可。
开发阶段不做任何处理
less
编译后目录
开发阶段不做操作
sprite
需sprite合并的icon小图标统一放置在static/images/sprite
目录
比如合并成sprite-index.png
文件需新建文件夹sprite-index
,然后将其放在该目录下,构建环境将sprite-*
的文件夹各自合并成sprite的png图片。 同时生成static/less/sprite-less/sprite-*.less
文件,更新到_sprite_all.less
文件引用中
_sprite_all.less生成后
@import "sprite-less/sprite-index"
@import "sprite-less/sprite-header"
@import "sprite-less/sprite-helper"
@import "sprite-less/sprite-login"
// ...
sprite图标间隙默认是20px,可以通过config.json来设置
sprite_padding
启动gulp server
,浏览器自动打开服务http://localhost:8520/www
端口号默认为8520
可以通过config.json来配置。
只要在chrome浏览器中安装了liveReload
可以开启自动刷新,无论是修改了less
,template
都会自动刷新,其他如JS
则不加自动刷新,请手动。降低构建环境鸭梨占内存来不及自动刷新问题。
{
"port": 8520,
"staticPath": "./static",
"static": "/static",
"template": "./template/",
"destPath" : "www",
"bower_components": "/bower_components",
"version": "1.0.0",
"sprite_padding": 20,
"jsPath": ["./bower_components/jquery/dist/jquery.min.js", "./bower_components/html5shiv/dist/html5shiv.min.js", "./bower_components/respond/dest/respond.min.js"]
}
port
server服务启动端口号staticPath
静态资源目录static
server的静态资源绝对路径template
模板目录destPath
模板编译目录,server启动访问的目录bower_components
第三方通过bower管理的组件目录version
当前静态文件开发的版本号,静态资源浏览器去缓存sprite_padding
sprite图标间隙jsPath
bower第三方组件发布时需拷贝到static/js/
目录下的文件
gulp.task('default', function(){
gulp.start(['template', 'less', 'server', 'watch'])
})
执行模板编译,less编译,启动服务,自动刷新
'svnServer', ['svnTemplate', 'svnCopy', 'svnCss', 'svnJs', 'svnImage', 'svnBowerJs']
svnTemplate
拷贝模板替换bower_components
路径svnCopy
字体及ie7svnCss
复制及压缩svnJs
复制及压缩svnImage
复制及压缩svnBowerJs
拷贝bower到static/js
下svnServer
预览发布内容
每个成员只需修改各自的svn.json配置
{
"port": "8251",
"path": "../../svn/eWeb",
"staticPath": "../../svn/eWeb/static"
}
port
svn中预览地址path
svn目录地址staticPath
svn中静态文件地址