- 开发模式: gulp
- 生成dist发布文件: gulp dist
- 生成离线包: gulp pack
- 文件复制
- 文件压缩
- 图片压缩
- 文件md5
- 文件合并
- webpack打包及es6特性
- 代码内联
- cdn地址
- 合图
- 实时刷新
- 离线包
- bigpipe模版分割
- 基本打点 // todo
- 数据上报代码片段 // todo
- 自动化测试 // todo
src
—— css -- 样式目录
—— common -- 公共样式， 不会生成到dev
—— sprites -- 合图样式，不会生成到dev
—— index -- index页面样式，最终生成index.css
—— index.css
—— _index_inline.css -- 下划线开头不会被合并
—— img -- 图片目录
—— sprites -- 合图目录
—— guide -- 此目录里的图片最终生成guide.png
—— js -- js目录
—— common -- 公共js， 不会生成到dev
—— index -- index页面js，最终生成到index.js
—— index.js
—— index_other.js
—— _index_inline.js 下划线开头不会被合并
—— _detail —— detail页面js，最终生成到detail.js
—— main.js 入口文件
—— main_other.js
—— _detail_inline 下划线开头不会被合并
—— lib -- 第三方库，libs 所有文件会被复制到 dev 目录，js/css 文件名 md5 化
—— tpl -- 模版文件 // Todo
—— common -- 公共模版
—— index -- index页面模版
<script src="/lib/powder.js?___inline"></script>
<link rel="stylesheet" href="/css/all.css?___inline">
<tpl src="src/tpl/detail.html?___inline"></tpl>
在js文件中用html模版，可以这样写:
var detailTpl = "<tpl src="src/tpl/detail.html?___inline"></tpl>"
具体可以参考https://github.com/lcxfs1991/gulp-inline-src
<script src="/lib/powder.js?___timeline"></script>
<link rel="stylesheet" href="/css/all.css?___timeline">
- script cdn
<script src="___cdnJs/lib/powder.js?___inline"></script>
- css cdn
<link rel="stylesheet" href="___cdnCss/css/all.css">
- img cdn
.icon2{
background: url(___cdnImg/img/con2.png) no-repeat 50% 0%;
}
- default cdn
___cdn
@import url('./src/css/index.css');
在js文件夹下面带下划线开头的文件夹，如_index，会使用webpack进行文件打包
打包js文件
var $ = require('zepto');
具体配置和用法请参考 https://github.com/lcxfs1991/gulp-bigpipe-template
可配置项如下：
- 基础url
- cdn路径
- 文件源及终点
- 基准文件夹路径（如src, dev, dist等)
- 文件类型路径 (如js, css等)
- 字符串匹配，用于各类特殊字符串替换，如cdn，时间戳，内联等
- webpack配置 <<<<<<< HEAD
- 是否支持bigpipe模板
- 是否支持图片压缩
- 1.1.0 基本功能可使用