https://github.com/steamerjs/steamer-gulp

https://github.com/steamerjs/steamer-gulp

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/steamerjs/steamer-gulp
• Owner: steamerjs
• Created: 2015-07-19T18:12:45.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-06-08T09:22:57.000Z (over 6 years ago)
• Last Synced: 2024-09-01T03:59:42.221Z (4 months ago)
• Language: JavaScript
• Size: 453 KB
• Stars: 24
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 使用

* 开发模式: 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页面模版

```

# 用法

## 文件内联

```

```

在js文件中用html模版，可以这样写:

```

var detailTpl = ""

```

具体可以参考https://github.com/lcxfs1991/gulp-inline-src

## 静态资源时间戳

```

```

## 文件cdn

* script cdn

```

```

* css cdn

```

```

* 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 基本功能可使用