steamerjs/steamer-gulp

使用

• 开发模式: 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">

文件cdn

• 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

在css文件中加入另一个css文件内容，开头带下划线的文件不支持，如_index_inline.css

@import url('./src/css/index.css');

下划线js文件夹

在js文件夹下面带下划线开头的文件夹，如_index，会使用webpack进行文件打包

打包js文件

var $ = require('zepto');

bigpipe模版支持

具体配置和用法请参考 https://github.com/lcxfs1991/gulp-bigpipe-template

配置文件(./steamer/config.js)

可配置项如下：

• 基础url
• cdn路径
• 文件源及终点
• 基准文件夹路径（如src, dev, dist等)
• 文件类型路径 (如js, css等)
• 字符串匹配，用于各类特殊字符串替换，如cdn，时间戳，内联等
• webpack配置
• 是否支持bigpipe模板
• 是否支持图片压缩

Changelog

• 1.1.0 基本功能可使用