欢迎使用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 字体及ie7
• svnCss 复制及压缩
• svnJs 复制及压缩
• svnImage 复制及压缩
• svnBowerJs 拷贝bower到static/js下
• svnServer 预览发布内容

每个成员只需修改各自的svn.json配置

{
	"port": "8251",
	"path": "../../svn/eWeb",
	"staticPath": "../../svn/eWeb/static"
}

• port svn中预览地址
• path svn目录地址
• staticPath svn中静态文件地址