tmt-workflow Demo
以下为工作流在开发、编译过程中所做的自动化处理
雪碧图合并 (支持多组)
注: ../slice/ 目录进行雪碧图操作, 需提供 1x 图, 如果有对应 2x、3x 图则会相应生成
源文件 (src)
.mod-discovery__icon{
    width: 25px;
    height: 25px;
    display: inline-block;
}
// 书写时调用 1x 图
.mod-discovery__icon_moment{
    background-image: url(../slice/mod-discovery/icon-moment.png);
}
.mod-discovery__icon_qrcode{
    background-image: url(../slice/mod-discovery/icon-qrcode.png);
}
编译后 (dist)
.mod-discovery__icon_moment, .mod-discovery__icon_qrcode {
    background-image: url(../sprite/style-index.b91f7ae0.png);
    width: 25px;
    height: 25px;
    background-size: 25px
}
.mod-discovery__icon_qrcode {
    background-position: -58px -4px
}
.mod-discovery__icon_shake {
    background-position: -4px -58px
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2.5), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-resolution: 240dpi) {
    .mod-discovery__icon_moment, .mod-discovery__icon_qrcode {
        background-image: url(../sprite/style-index@2x.b983005a.png);
        background-size: 87px
    }
    .mod-discovery__icon_moment {
        background-position: -4px -4px
    }
    .mod-discovery__icon_qrcode {
        background-position: -33px -4px
    }
}
普通图片调用
注: ../img/ 目录 不进行 雪碧图处理
源文件 (src)
// 两种常见方法

.mod-sticker__icon {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-size: 50px; // 注: 此处要额外设置背景图 size
}
.mod-sticker__icon_3{
    background-image: url(../img/mod-sticker/3.8320284e.gif);
}
.mod-sticker__icon_4{
    background-image: url(../img/mod-sticker/4.5e721fbf.gif);
}
<!-- IMG 标签 引入方式 -->
<img class="mod-sticker__icon" src="../img/mod-sticker/1.91eb60b6.gif"></img>
<img class="mod-sticker__icon" src="../img/mod-sticker/2.d205b06b.gif"></img>

<!-- 背景图 引入方式 -->
<i class="mod-sticker__icon mod-sticker__icon_3"></i>
<i class="mod-sticker__icon mod-sticker__icon_4"></i>
编译后 (dist不做操作)
.mod-sticker__icon {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-size: 50px;
}
.mod-sticker__icon_3{
    background-image: url(../img/mod-sticker/3.8320284e.gif);
}
.mod-sticker__icon_4{
    background-image: url(../img/mod-sticker/4.5e721fbf.gif);
}
自动生成图片 CSS 属性,width & height 等
注: 需要开启配置, 默认对 ../slice/ 目录生效
源文件 (src)
.bg-test {
    background: url(../img/bg.png);
    background-repeat: no-repeat;
}
.icon-test {
    background-image: url(../slice/test.png);
}
.icon-test-retina {
    background-image: url(../slice/test@2x.png);
}
编译后 (dist)
.bg-test {
    background: url(../img/bg.png);
    background-repeat: no-repeat;
    width: 1100px;
    height: 300px;
}
.icon-test {
    background-image: url(../slice/test.png); // test.png - 32x32
    width: 32px;
    height: 32px;
}
.icon-test-retina {
    background-image: url(../slice/test@2x.png); // test@2x.png - 64x64
    width: 32px;
    height: 32px;
    background-size: 32px;
}
PostCSS & Autoprefixer
源文件 (src)
.test {
    display: flex;
}
:fullscreen {
}
编译后 (dist)
.test {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}
:-webkit-:full-screen {
}
:-moz-:full-screen {
}
:full-screen {
}
CSS 压缩 cssnano
源文件 (src)
.mod-example{
    text-align: center;
    margin-bottom: 40px;
}
.mod-example__title{
    display: inline-block;
    font-size: 18px;
}
编译后 (dist)
.mod-example{text-align: center;margin-bottom: 40px;}.mod-example__title{display: inline-block;font-size: 18px;
JS 合并压缩
注: 可配合 MD5 reversion 使用
源文件 (src)
<!-- build:js ../js/build.c7fd4c6b.js -->
<script src="../js/zepto.min.js"></script>
<script src="../js/all.js"></script>
<!-- endbuild -->
编译后 (dist)
<script src="../js/build.c7fd4c6b.js"></script>
HTML EJS 模板语言
源文件 (src)
<% for(var i = 0; i < 5; i++) {%>
<i class="emoji-<%-i %>">表情 <%-i %></i>
<% } %>
编译后 (dist)
<i class="emoji-1">表情 1</i>
<i class="emoji-2">表情 2</i>
<i class="emoji-3">表情 3</i>
<i class="emoji-4">表情 4</i>
<i class="emoji-5">表情 5</i>
REM -> PX 解决方案 (需开启选项)
注: 单位转换比例为 20:1, 即 20px = 1rem。
开启方式: `<html data-rem="375">` 依赖: `im`
源文件 (src)
// 计算比例为 20:1
h1 {
    margin: 0 0 20px;
    padding: 0 0 20PX; // 单位使用大写 PX 可以避免进行 rem 处理 (hack 用法)
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: 2px;
    border: 1px; // 为避免小数 Bug 问题 1px 不进行转换
}
<!-- HTML style 方式 -->
<style>
.test {
    font-size: 10PX;
    width: 20px;
    margin: 30px 40px 50px 60px;
    border: 1px solid #fff; // 为避免小数 Bug 问题 1px 不进行转换
}
</style>
<!-- HTML 内联方式 -->
<div style="font-size: 10PX; width: 20px; margin: 30px 40px 50px 60px; border: 1px solid #fff;">
    text
</div>
编译后 (dist)
// 1rem = 20px
h1 {
    margin: 0 0 1rem;
    padding: 0 0 20PX; // 无操作
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: 0.1rem;
    border: 1px; // 无操作
}
<!-- HTML style 方式 -->
<style>
.test {
    font-size: 10PX; // 无操作
    width: 1rem;
    margin: 1.5rem 2rem 2.5rem 3rem;
    border: 1px solid #fff; // 无操作
}
</style>
<!-- HTML 内联方式 -->
<div style="font-size: 10PX; width: 1rem; margin: 1.5rem 2rem 2.5rem 3rem; border: 1px solid #fff;">
    text
</div>
智能 WebP 解决方案
注: 需要打开选项
源文件 (src)

// 原始 CSS 版本
<link rel="stylesheet" type="text/css" data-href="../css/style-doc.css">
// 普通 CSS 文件 ../css/style-doc.css
.mod-text{
    background-image: url(../img/1.png);
}
.mod-discovery__icon_moment {
    background-image: url(../sprite/style-doc@2x.2185f236.png);
}
编译后 (dist)
// 自动替换 CSS 为 WebP 版本
<link rel="stylesheet" type="text/css" data-href="../css/style-doc.css" href="../css/style-doc.webp.css">
// 判断当前浏览器是否支持 WebP 
<script>function webpsupport(a){var c=window.localStorage;if(typeof a!="function"){a=function(){}}if(c!=undefined&&c._tmtwebp!=undefined&&c._tmtwebp==0){a();return false}else{if(c!=undefined&&c._tmtwebp!=undefined&&c._tmtwebp==1){a(1);return true}else{var f=new Image();f.onload=f.onerror=function(){if(f.height!=2){if(c!=undefined){c._tmtwebp=0}a();return false}else{if(c!=undefined){c._tmtwebp=1}a(1);return true}};f.src="data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"}}};;(function(){function b(t){var f=document.getElementsByTagName("link");for(var e=0,d=f.length;e<d;e++){if(t){f[e].href=f[e].getAttribute("data-href").replace(".css",".webp.css");}else{f[e].href=f[e].getAttribute("data-href")}}}webpsupport(b);})();</script><script>window.imgMap = {"style-doc.c37f3134.png":1,"style-doc@2x.2185f236.png":1,"style-index.0d81f1de.png":1,"style-index@2x.ce40c0a0.png":1,"style-index@3x.11d4f2a0.png":1,"bg-body.48508064.png":1,"weflow-logo.c976aa23.png":1}</script>

// WebP 版本的 CSS 文件 ../css/style-doc.webp.css
.mod-text{
    background-image: url(../img/1.webp);
}
.mod-discovery__icon_moment {
    background-image: url(../sprite/style-doc@2x.2185f236.webp);
}
    
Reversion 解决方案
源文件 (src)
<link rel="stylesheet" type="text/css" data-href="../css/style-index.b9b3242e.css" />
编译后 (dist)
<link rel="stylesheet" type="text/css" data-href="../css/style-index.b9b3242e.css" />
<script>function webpsupport(a){var c=window.localStorage;if(typeof a!="function"){a=function(){}}if(c!=undefined&&c._tmtwebp!=undefined&&c._tmtwebp==0){a();return false}else{if(c!=undefined&&c._tmtwebp!=undefined&&c._tmtwebp==1){a(1);return true}else{var f=new Image();f.onload=f.onerror=function(){if(f.height!=2){if(c!=undefined){c._tmtwebp=0}a();return false}else{if(c!=undefined){c._tmtwebp=1}a(1);return true}};f.src="data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"}}};;(function(){function b(t){var f=document.getElementsByTagName("link");for(var e=0,d=f.length;e<d;e++){if(t){f[e].data-href=f[e].getAttribute("href").replace(".css",".webp.css");}else{f[e].href=f[e].getAttribute("href")}}}webpsupport(b);})();</script>
<script>window.imgMap = {"style-doc.png":0,"style-doc@2x.png":0,"style-index.png":0,"style-index@2x.png":0,"style-index@3x.png":0,"bg-body.png":1,"weflow-logo.png":1}</script>