├── .gitignore ├── .tmtworkflowrc ├── .travis.yml ├── LICENSE.txt ├── README.md ├── _tasks ├── TaskBuildDev.js ├── TaskBuildDist.js ├── TaskFTP.js ├── TaskSFTP.js ├── TaskZip.js ├── common │ ├── changed.js │ ├── parseSVG.js │ ├── svgToPng.js │ └── webp.js ├── index.js ├── lib │ └── util.js └── plugins │ ├── TmTIndex.js │ └── ftp.js ├── appveyor.yml ├── package.json ├── project-webpack ├── .tmtworkflowrc ├── gulpfile.js ├── src │ ├── css │ │ ├── lib │ │ │ ├── lib-mixins.less │ │ │ ├── lib-rem.less │ │ │ ├── lib-reset.less │ │ │ ├── prism-github-theme.less │ │ │ └── prism.less │ │ ├── mod-discovery.less │ │ ├── mod-example.less │ │ ├── mod-footer.less │ │ ├── mod-header.less │ │ ├── mod-social-media.less │ │ ├── mod-sticker.less │ │ ├── style-doc.less │ │ └── style-index.less │ ├── html │ │ ├── doc.html │ │ └── index.html │ ├── img │ │ ├── bg-body.png │ │ ├── mod-sticker │ │ │ ├── 1.gif │ │ │ ├── 2.gif │ │ │ ├── 3.gif │ │ │ └── 4.gif │ │ └── weflow-logo.png │ ├── js │ │ ├── index.js │ │ └── lib │ │ │ └── prism.js │ ├── manifest.json │ ├── media │ │ └── bgm.mp3 │ ├── slice │ │ ├── mod-discovery │ │ │ ├── icon-bottle.png │ │ │ ├── icon-bottle@2x.png │ │ │ ├── icon-game.png │ │ │ ├── icon-game@2x.png │ │ │ ├── icon-jd.png │ │ │ ├── icon-jd@2x.png │ │ │ ├── icon-locaitonservice.png │ │ │ ├── icon-locaitonservice@2x.png │ │ │ ├── icon-moment.png │ │ │ ├── icon-moment@2x.png │ │ │ ├── icon-qrcode.png │ │ │ ├── icon-qrcode@2x.png │ │ │ ├── icon-shake.png │ │ │ └── icon-shake@2x.png │ │ └── mod-social-media │ │ │ ├── icon-copy.png │ │ │ ├── icon-copy@2x.png │ │ │ ├── icon-copy@3x.png │ │ │ ├── icon-favadd.png │ │ │ ├── icon-favadd@2x.png │ │ │ ├── icon-favadd@3x.png │ │ │ ├── icon-moment.png │ │ │ ├── icon-moment@2x.png │ │ │ ├── icon-moment@3x.png │ │ │ ├── icon-refresh.png │ │ │ ├── icon-refresh@2x.png │ │ │ ├── icon-refresh@3x.png │ │ │ ├── icon-share.png │ │ │ ├── icon-share@2x.png │ │ │ └── icon-share@3x.png │ └── svg │ │ ├── svgicon │ │ ├── 12w.svg │ │ ├── 4g.svg │ │ ├── bl.svg │ │ ├── ss.svg │ │ ├── translate.svg │ │ └── ts.svg │ │ └── svglogo.svg └── webpack.config.js ├── project ├── .tmtworkflowrc ├── gulpfile.js ├── src │ ├── css │ │ ├── lib │ │ │ ├── lib-mixins.less │ │ │ ├── lib-rem.less │ │ │ ├── lib-reset.less │ │ │ ├── prism-github-theme.less │ │ │ └── prism.less │ │ ├── mod-discovery.less │ │ ├── mod-example.less │ │ ├── mod-footer.less │ │ ├── mod-header.less │ │ ├── mod-social-media.less │ │ ├── mod-sticker.less │ │ ├── style-doc.less │ │ └── style-index.less │ ├── html │ │ ├── doc.html │ │ └── index.html │ ├── img │ │ ├── bg-body.png │ │ ├── mod-sticker │ │ │ ├── 1.gif │ │ │ ├── 2.gif │ │ │ ├── 3.gif │ │ │ └── 4.gif │ │ └── weflow-logo.png │ ├── js │ │ ├── index.js │ │ └── lib │ │ │ └── prism.js │ ├── manifest.json │ ├── media │ │ └── bgm.mp3 │ ├── slice │ │ ├── mod-discovery │ │ │ ├── icon-bottle.png │ │ │ ├── icon-bottle@2x.png │ │ │ ├── icon-game.png │ │ │ ├── icon-game@2x.png │ │ │ ├── icon-jd.png │ │ │ ├── icon-jd@2x.png │ │ │ ├── icon-locaitonservice.png │ │ │ ├── icon-locaitonservice@2x.png │ │ │ ├── icon-moment.png │ │ │ ├── icon-moment@2x.png │ │ │ ├── icon-qrcode.png │ │ │ ├── icon-qrcode@2x.png │ │ │ ├── icon-shake.png │ │ │ └── icon-shake@2x.png │ │ └── mod-social-media │ │ │ ├── icon-copy.png │ │ │ ├── icon-copy@2x.png │ │ │ ├── icon-copy@3x.png │ │ │ ├── icon-favadd.png │ │ │ ├── icon-favadd@2x.png │ │ │ ├── icon-favadd@3x.png │ │ │ ├── icon-moment.png │ │ │ ├── icon-moment@2x.png │ │ │ ├── icon-moment@3x.png │ │ │ ├── icon-refresh.png │ │ │ ├── icon-refresh@2x.png │ │ │ ├── icon-refresh@3x.png │ │ │ ├── icon-share.png │ │ │ ├── icon-share@2x.png │ │ │ └── icon-share@3x.png │ └── svg │ │ ├── svgicon │ │ ├── 12w.svg │ │ ├── 4g.svg │ │ ├── bl.svg │ │ ├── ss.svg │ │ ├── translate.svg │ │ └── ts.svg │ │ └── svglogo.svg └── tmp │ ├── css │ ├── style-doc.css │ └── style-index.css │ ├── img │ ├── bg-body.png │ ├── mod-sticker │ │ ├── 1.gif │ │ ├── 2.gif │ │ ├── 3.gif │ │ └── 4.gif │ └── weflow-logo.png │ ├── js │ ├── index.js │ └── lib │ │ └── prism.js │ ├── media │ └── bgm.mp3 │ ├── sprite │ ├── style-doc.png │ ├── style-doc@2x.png │ ├── style-index.png │ ├── style-index@2x.png │ └── style-index@3x.png │ └── svg │ ├── svgicon │ ├── 12w.svg │ ├── 4g.svg │ ├── bl.svg │ ├── ss.svg │ ├── translate.svg │ └── ts.svg │ └── svglogo.svg └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | npm-debug.log 4 | .idea 5 | .zip 6 | dev 7 | dist 8 | .history -------------------------------------------------------------------------------- /.tmtworkflowrc: -------------------------------------------------------------------------------- 1 | { 2 | "ftp": { 3 | "host": "xx.xx.xx.xx", 4 | "port": "8021", 5 | "user": "tmt", 6 | "pass": "password", 7 | "remotePath": "remotePath", 8 | "includeHtml": true 9 | //ftp 上传是否包含 html 10 | }, 11 | "sftp": { 12 | "host": "xx.xx.xx.xx", 13 | "port": "xx", 14 | "user": "tmt", 15 | "password": "password", 16 | "remotePath": "", 17 | "includeHtml": true 18 | }, 19 | "livereload": { 20 | "available": true, 21 | //开启自动刷新 22 | "port": 8080, 23 | "startPath": "html/TmTIndex.html" 24 | }, 25 | //路径相对于 tasks/plugins 目录 26 | "plugins": { 27 | "build_devAfter": [ 28 | "TmTIndex" 29 | ], 30 | "build_distAfter": [], 31 | "ftpAfter": [ 32 | "ftp" 33 | ] 34 | }, 35 | "lazyDir": [ 36 | "../slice" 37 | ], 38 | //gulp-lazyImageCSS 寻找目录(https://github.com/weixin/gulp-lazyimagecss) 39 | 40 | "supportWebp": false, 41 | "supportREM": false, 42 | "supportChanged": false, 43 | "reversion": true, 44 | "SVGGracefulDegradation": true 45 | } 46 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | cache: 3 | yarn: true 4 | directories: 5 | - node_modules 6 | 7 | matrix: 8 | include: 9 | - node_js: "10" 10 | - node_js: "9" 11 | os: osx 12 | - node_js: "8" 13 | os: osx 14 | - node_js: "7" 15 | os: linux 16 | - node_js: "6" 17 | os: linux 18 | - node_js: "5" 19 | os: linux 20 | 21 | before_script: 22 | - npm install -g gulp 23 | - cd project 24 | 25 | script: gulp build_dist -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Tencent is pleased to support the open source community by making tmt-workflow available. 2 | Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved. 3 | If you have downloaded a copy of the tmt-workflow binary from Tencent, please note that the tmt-workflow binary is licensed under the MIT License. 4 | If you have downloaded a copy of the tmt-workflow source code from Tencent, please note that tmt-workflow source code is licensed under the MIT License. Your integration of tmt-workflow into your own projects may require compliance with the MIT License. 5 | A copy of the MIT License is included in this file. 6 | 7 | 8 | Terms of the MIT License: 9 | -------------------------------------------------------------------- 10 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 项目迁移说明 2 | 3 | 由于业务调整，本项目不再更新，感谢大家一直以来的支持。 4 | 后续需求会合并到 [Feflow](https://github.com/Tencent/feflow) 项目进行开发迭代，请移步： 5 | 6 | * Github: https://github.com/Tencent/feflow 7 | * 官网：https://feflowjs.com/ 8 | 9 | # tmt-workflow [![Version Number](https://img.shields.io/npm/v/generator-workflow.svg?style=flat)](https://github.com/Tencent/tmt-workflow/ "Version Number") 10 | 11 | [![Build Status](https://api.travis-ci.org/Tencent/tmt-workflow.svg)](https://travis-ci.org/Tencent/tmt-workflow "Build Status") 12 | [![Win Build status](https://img.shields.io/appveyor/ci/littledu/tmt-workflow.svg?label=Win%20build&style=flat)](https://ci.appveyor.com/project/littledu/tmt-workflow) 13 | [![devDependencies](https://img.shields.io/david/dev/weixin/tmt-workflow.svg?style=flat)](https://ci.appveyor.com/project/weixin/tmt-workflow "devDependencies") 14 | [![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](http://opensource.org/licenses/MIT "Feel free to contribute.") 15 | 16 | > 一个基于 [Gulp](https://github.com/gulpjs/gulp)、高效、跨平台(macOS & Win)、可定制的前端工作流程。 17 | > 现已推出 GUI 桌面工具：[WeFlow](http://weflow.io/)，无需安装任何环境依赖即可使用，官网下载：http://weflow.io/ 18 | 19 | ## 功能特性 20 | 21 | - 自动化流程 22 | - [Less/Sass -> CSS](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%8C-Less-%E7%BC%96%E8%AF%91) 23 | - [CSS Autoprefixer 前缀自动补全](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%8D-Autoprefixer) 24 | - [自动生成图片 CSS 属性，width & height 等](https://github.com/Tencent/gulp-lazyimagecss) 25 | - [自动内联 SVG 到 CSS](https://github.com/Tencent/gulp-svg-inline) 26 | - [CSS 压缩 cssnano](https://github.com/ben-eb/cssnano) 27 | - [CSS Sprite 雪碧图合成](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%8E-CSS-Sprite) 28 | - [Retina @2x & @3x 自动生成适配](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%8E-CSS-Sprite) 29 | - [imagemin 图片压缩](https://github.com/sindresorhus/gulp-imagemin) 30 | - [JS 合并压缩](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%8F-JS-%E5%90%88%E5%B9%B6%E5%8E%8B%E7%BC%A9) 31 | - [EJS 模版语言](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%90-EJS-%E6%A8%A1%E7%89%88%E8%AF%AD%E8%A8%80) 32 | - 调试 & 部署 33 | - [监听文件变动，自动刷新浏览器 (LiveReload)](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%91-LiveReload) 34 | - [FTP 发布部署](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%92-FTP-%E5%8F%91%E5%B8%83%E9%83%A8%E7%BD%B2) 35 | - [ZIP 项目打包](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%93-ZIP-%E6%89%93%E5%8C%85) 36 | - 解决方案集成 37 | - [px -> rem 兼容适配方案](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%94-REM-%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88) 38 | - [智能 WebP 解决方案](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%95-WEBP-%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88) 39 | - [SVG 整体解决方案](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%9A-SVG%E6%95%B4%E4%BD%93%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88) 40 | - [去缓存文件 Reversion (MD5) 解决方案](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%96-Reversion-%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88) 41 | 42 | ## 快速开始 43 | 44 | 请确保已安装 [Node.js](https://nodejs.org/) (已支持到最新版，如：v5+, v8, v9 等) 45 | 46 | 1. 全局安装 [Gulp](https://github.com/gulpjs/gulp)，执行：`npm install gulp-cli -g` 47 | 2. 点击下载 [tmt-workflow](https://github.com/Tencent/tmt-workflow/archive/master.zip)，进入根目录执行： `npm install` 48 | 49 | > 推荐使用 `yarn` 安装环境依赖，详见[yarn](https://yarnpkg.com) 50 | > 注1：Windows 用户请先安装 [git](http://git-scm.com/)，然后在 [Git Bash](http://git-for-windows.github.io/) 下执行 `npm install` 即可（非 `CMD`）。 51 | > 52 | > 注2：如遇 `npm install` 网络问题，推荐尝试 [cnpm](http://npm.taobao.org/) 或 [NPM腾讯云分流](https://cloud.tencent.com/document/product/213/8623#.E4.BD.BF.E7.94.A8.E8.85.BE.E8.AE.AF.E4.BA.91.E9.95.9C.E5.83.8F.E6.BA.90.E5.8A.A0.E9.80.9Fnpm) 安装环境依赖 53 | 54 | ## 目录结构 55 | 56 | #### 工作流目录结构 57 | 58 | ````bash 59 | tmt-workflow/ 60 | │ 61 | ├── _tasks // Gulp 任务目录 62 | │ ├── TaskBuildDev.js // gulp build_dev 63 | │ ├── TaskBuildDist.js // gulp build_dist 64 | │ ├── TaskFTP.js // gulp ftp 65 | │ ├── TaskZip.js // gulp zip 66 | │ │ 67 | │ ├── common 68 | │ │ └── webp.js 69 | │ │ 70 | │ ├── index.js 71 | │ │ 72 | │ ├── lib 73 | │ │ └── util.js 74 | │ │ 75 | │ └── plugins // 插件目录 76 | │ ├── TmTIndex.js 77 | │ └── ftp.js 78 | │ 79 | ├── package.json 80 | │ 81 | └── project // 项目目录，详见下述项目结构 ↓↓↓ 82 | ├── src 83 | ├── dev 84 | ├── dist 85 | └── gulpfile.js 86 | ```` 87 | 88 | #### 项目目录结构 89 | 90 | 91 | ````bash 92 | project/ // 项目目录 93 | ├── gulpfile.js // Gulp 工作流配置文件 94 | │ 95 | ├── src // 源文件目录，`gulp build_dev`阶段会监听此目录下的文件变动 96 | │ ├── css // 存放 Less 文件的目录，只有 style-*.less 的文件名会被编译 97 | │ │ └── lib/ 98 | │ │ │ ├── lib-reset.less 99 | │ │ │ ├── lib-mixins.less 100 | │ │ │ └── lib-rem.less 101 | │ │ └── style-index.less // CSS 编译出口文件 102 | │ │ 103 | │ ├── html 104 | │   ├── media                     // 存放媒体文件，如 bgm.mp3 abc.font 1.mp4 等 105 | │   ├── img                       // 存放背景图等无需合并雪碧图处理的图片 106 | │ └── slice // 切片图片素材，将会进行雪碧图合并，同名 @2x 图片也会合并 107 | │ ├── icon-shake.png 108 | │ └── icon-shake@2x.png 109 | │ 110 | ├── dev // 开发目录，由 `gulp build_dev` 任务生成 111 | │ ├── css 112 | │ ├── html 113 | │ ├── media 114 | │ ├── img 115 | │ └── slice // 开发阶段，仅从 src/slice 拷贝至此，不做合并雪碧图处理 116 | │ 117 | └── dist // 生产目录，由 `gulp build_dist` 任务生成 118 | ├── css 119 | ├── html 120 | ├── media 121 | ├── img 122 | └── sprite // 将 /src/slice 合并雪碧图，根据 /css 文件名，命名为 style-*.png 123 | ├── style-index.png 124 | └── style-index@2x.png 125 | ```` 126 | 127 | ## 配置文件 `.tmtworkflowrc` 128 | 129 | `.tmtworkflowrc` 配置文件为**隐藏文件**，位于工作流根目录，可存放配置信息或开启相关功能，[详见WiKi](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%8A-%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%B4%E6%98%8E)。 130 | _如：FTP 配置信息、开启 WebP功能，开启 REM 支持等。_ 131 | 132 | ```bash 133 | { 134 | // FTP 发布配置 135 | "ftp": { 136 | "host": "xx.xx.xx.xx", 137 | "port": "8021", 138 | "user": "tmt", 139 | "pass": "password", 140 | "remotePath": "remotePath", // 默认上传至根目录，此属性可指定子目录路径 141 | "includeHtml": true // FTP 上传时是否包含 .html 文件 142 | }, 143 | 144 | // 浏览器自动刷新 145 | "livereload": { 146 | "available": true, // 开启 147 | "port": 8080, 148 | "startPath": "html/TmTIndex.html" // 启动时自动打开的路径 149 | }, 150 | 151 | // 插件功能 152 | 153 | // 路径相对于 tasks/plugins 目录 154 | "plugins": { 155 | "build_devAfter": ["TmTIndex"], // build_dev 任务执行完成后，自动执行 156 | "build_distAfter": [], // build_dist 任务执行完成后，自动执行 157 | "ftpAfter": ["ftp"] // ftp 任务执行完成后，自动执行 158 | }, 159 | 160 | "lazyDir": ["../slice"], // gulp-lazyImageCSS 启用目录 161 | 162 | "supportWebp": false, // 开启 WebP 解决方案 163 | 164 | "supportREM": false, // 开启 REM 适配方案，自动转换 px -> rem 165 | 166 | "supportChanged": false, // 开启 只编译有变动的文件 167 | 168 | "reversion": false // 开启 新文件名 md5 功能 169 | } 170 | ``` 171 | 172 | ## 任务说明 173 | 174 | > 注1：**`./src`** 为源文件(开发目录)，`/dev` 和 `/dist` 目录为流程**自动**生成的**临时目录**。 175 | > 注2：`FTP` 和 `zip` 任务执行后会**自动删除** `/dist` 目录。 176 | 177 | **1. 开发任务 `gulp build_dev`** 178 | 179 | 按照`目录结构`创建好项目后，执行 `gulp build_dev` 生成开发文件位于 `/dev`，包含以下过程 180 | 181 | - 完成 `ejs -> html` 和 `less -> css` 编译 182 | - 自动监听文件改动，触发浏览器刷新 183 | 184 | _注：浏览器刷新功能可在 `.tmtworkflowrc` 中进行配置_ 185 | 186 | **执行后 Demo 预览：**[project/dev/html/index.html](http://weixin.github.io/tmt-workflow/project/dev/html/index.html) 187 | 188 | **2. 生产任务 `gulp build_dist`** 189 | 190 | 开发完成后，执行 `gulp build_dist` 生成最终文件到 `/dist` 目录，包含以下过程： 191 | 192 | - LESS/EJS 编译 193 | - CSS/JS/IMG 压缩合并 194 | - slice 图片合并成雪碧图 195 | - SVG 内联压缩打包合并 196 | - 文件添加版本号 197 | - WebP 图片支持 198 | 199 | **执行后 Demo 预览：**[project/dist/html/index.html](http://weixin.github.io/tmt-workflow/project/dist/html/index.html) 200 | 201 | **3. FTP 部署 `gulp ftp`** 202 | 203 | 依赖于 `生产任务`，执行后，会先执行 `gulp build_dist` ，然后将其生成的 `/dist` 目录上传至 `.tmtworkflowrc` 指定的 `FTP` 服务器。 204 | 205 | **4. 打包任务 `gulp zip`** 206 | 207 | 将 `gulp build_dist` 生成 `dist` 目录压缩成 `zip` 格式。 208 | 209 | 更多详细说明 [参见 WiKi](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%8B-%E4%BB%BB%E5%8A%A1%E4%BB%8B%E7%BB%8D) 210 | 211 | ## 使用预览 212 | 213 | 推荐配合 [WebStorm](https://www.jetbrains.com/webstorm/) 等编辑器的 [Gulp 任务管理器](https://www.jetbrains.com/webstorm/help/using-gulp-task-runner.html) 使用，体验更佳。 214 | 215 | 也可配合桌面工具：[WeFlow]，无需安装环境依赖，获得可视化的操作体验。 216 | 217 | ![tmt-workflow yo](https://cloud.githubusercontent.com/assets/1049575/13744821/77a67476-ea25-11e5-9cf3-eebf56ffbe03.gif) 218 | 219 | ## 其它说明 220 | 221 | `tmt-workflow` 具有良好的`定制性`和`扩展性`，用户可针对自身团队的具体需求，参看以下文档进行定制： 222 | 223 | * [任务的动态加载机制（高级）](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%97-%E4%BB%BB%E5%8A%A1%E7%9A%84%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E6%9C%BA%E5%88%B6%EF%BC%88%E9%AB%98%E7%BA%A7%EF%BC%89) 224 | * [自定义任务（高级）](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%98-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BB%BB%E5%8A%A1%EF%BC%88%E9%AB%98%E7%BA%A7%EF%BC%89) 225 | * [自定义插件（高级](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%99-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8F%92%E4%BB%B6%EF%BC%88%E9%AB%98%E7%BA%A7%EF%BC%89) 226 | 227 | ## 参与贡献 228 | 229 | 如果你有 `Bug反馈` 或 `功能建议`，请创建 [Issue](https://github.com/Tencent/tmt-workflow/issues) 或发送 [Pull Request](https://github.com/Tencent/tmt-workflow/pulls)，非常感谢。 230 | 231 | [腾讯开源激励计划](https://opensource.tencent.com/contribution) 鼓励开发者的参与和贡献，期待你的加入。 232 | 233 | ## License 234 | 235 | 所有代码采用 [MIT License](http://opensource.org/licenses/MIT) 开源，可根据自身团队和项目特点 `fork` 进行定制。 236 | -------------------------------------------------------------------------------- /_tasks/TaskBuildDev.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var path = require('path'); 3 | var del = require('del'); 4 | var ejs = require('gulp-ejs'); 5 | var less = require('gulp-less'); 6 | var util = require('./lib/util'); 7 | var gulpif = require('gulp-if'); 8 | var ejshelper = require('tmt-ejs-helper'); 9 | var bs = require('browser-sync').create(); // 自动刷新浏览器 10 | var lazyImageCSS = require('gulp-lazyimagecss'); // 自动为图片样式添加 宽/高/background-size 属性 11 | var postcss = require('gulp-postcss'); // CSS 预处理 12 | var posthtml = require('gulp-posthtml'); // HTML 预处理 13 | var sass = require('gulp-sass'); 14 | var webpack = require('webpack-stream'); 15 | var babel = require('gulp-babel'); 16 | var parseSVG = require('./common/parseSVG'); 17 | var svgSymbol = require('gulp-svg-sprite'); 18 | var rename = require('gulp-rename'); 19 | 20 | 21 | var webpackConfigPath = path.join(process.cwd(), 'webpack.config.js'); 22 | var webpackConfig; // webpack 配置 23 | var jsPath = path.join(process.cwd(), 'src', 'js'); 24 | 25 | if (util.dirExist(jsPath) && util.fileExist(webpackConfigPath)) { 26 | webpackConfig = require(webpackConfigPath); 27 | webpackConfig.output.publicPath = path.join('..', 'js/'); 28 | } 29 | 30 | var paths = { 31 | src: { 32 | dir: './src', 33 | img: './src/img/**/*.{JPG,jpg,png,gif,svg}', 34 | slice: './src/slice/**/*.png', 35 | js: './src/js/**/*.js', 36 | media: './src/media/**/*', 37 | less: './src/css/style-*.less', 38 | lessAll: './src/css/**/*.less', 39 | sass: './src/css/style-*.scss', 40 | sassAll: './src/css/**/*.scss', 41 | html: ['./src/html/**/*.html', '!./src/html/_*/**.html', '!./src/html/_*/**/**.html'], 42 | svg: './src/svg/**/*.svg', 43 | htmlAll: './src/html/**/*.html' 44 | }, 45 | dev: { 46 | dir: './dev', 47 | css: './dev/css', 48 | html: './dev/html', 49 | js: './dev/js', 50 | symboltemp: './dev/symboltemp/', 51 | symbol: './dev/symbolsvg' 52 | 53 | } 54 | }; 55 | 56 | 57 | module.exports = function (gulp, config) { 58 | 59 | var lazyDir = config.lazyDir || ['../slice', '../svg']; 60 | 61 | // 复制操作 62 | var copyHandler = function (type, file) { 63 | file = file || paths['src'][type]; 64 | 65 | return gulp.src(file, { base: paths.src.dir }) 66 | .pipe(gulp.dest(paths.dev.dir)) 67 | .on('end', reloadHandler); 68 | }; 69 | 70 | // 自动刷新 71 | var reloadHandler = function () { 72 | config.livereload && bs.reload(); 73 | }; 74 | 75 | //清除目标目录 76 | function delDev() { 77 | return del([paths.dev.dir]); 78 | } 79 | 80 | //复制操作 start 81 | function copyImg() { 82 | return copyHandler('img'); 83 | } 84 | 85 | function copySlice() { 86 | return copyHandler('slice'); 87 | } 88 | 89 | function copySvg() { 90 | return copyHandler('svg'); 91 | } 92 | 93 | function copyMedia() { 94 | return copyHandler('media'); 95 | } 96 | 97 | //复制操作 end 98 | 99 | //编译 less 100 | function compileLess() { 101 | return gulp.src(paths.src.less) 102 | .pipe(less({ relativeUrls: true })) 103 | .on('error', function (error) { 104 | console.log(error.message); 105 | }) 106 | .pipe(lazyImageCSS({ SVGGracefulDegradation: false, imagePath: lazyDir })) 107 | .pipe(gulp.dest(paths.dev.css)) 108 | .on('data', function () { 109 | }) 110 | .on('end', reloadHandler) 111 | } 112 | 113 | //编译 sass 114 | function compileSass() { 115 | return gulp.src(paths.src.sass) 116 | .pipe(sass()) 117 | .on('error', sass.logError) 118 | .pipe(lazyImageCSS({ SVGGracefulDegradation: false, imagePath: lazyDir })) 119 | .pipe(gulp.dest(paths.dev.css)) 120 | .on('data', function () { 121 | }) 122 | .on('end', reloadHandler) 123 | } 124 | 125 | //编译 html 126 | function compileHtml() { 127 | return gulp.src(paths.src.html) 128 | .pipe(ejs(ejshelper()).on('error', function (error) { 129 | console.log(error.message); 130 | })) 131 | .pipe(parseSVG({ devPath: 'dev' })) 132 | .pipe(gulp.dest(paths.dev.html)) 133 | .on('data', function () { 134 | }) 135 | .on('end', reloadHandler) 136 | } 137 | 138 | //编译 JS 139 | function compileJs() { 140 | var condition = webpackConfig ? true : false; 141 | 142 | return gulp.src(paths.src.js) 143 | .pipe(gulpif( 144 | condition, 145 | webpack(webpackConfig), 146 | babel({ 147 | presets: ['es2015', 'stage-2'] 148 | }) 149 | )) 150 | .pipe(gulp.dest(paths.dev.js)) 151 | .on('end', reloadHandler) 152 | } 153 | 154 | //启动 livereload 155 | function startServer() { 156 | bs.init({ 157 | server: paths.dev.dir, 158 | port: config['livereload']['port'] || 8080, 159 | startPath: config['livereload']['startPath'] || '/html', 160 | reloadDelay: 0, 161 | notify: { //自定制livereload 提醒条 162 | styles: [ 163 | "margin: 0", 164 | "padding: 5px", 165 | "position: fixed", 166 | "font-size: 10px", 167 | "z-index: 9999", 168 | "bottom: 0px", 169 | "right: 0px", 170 | "border-radius: 0", 171 | "border-top-left-radius: 5px", 172 | "background-color: rgba(60,197,31,0.5)", 173 | "color: white", 174 | "text-align: center" 175 | ] 176 | } 177 | }); 178 | } 179 | 180 | var watchHandler = function (type, file) { 181 | var target = file.match(/^src[\/|\\](.*?)[\/|\\]/)[1]; 182 | 183 | switch (target) { 184 | case 'img': 185 | if (type === 'removed') { 186 | var tmp = file.replace(/src/, 'dev'); 187 | del([tmp]); 188 | } else { 189 | copyHandler('img', file); 190 | compileHtml(); 191 | } 192 | break; 193 | 194 | case 'svg': 195 | if (type === 'removed') { 196 | var tmp = file.replace(/src/, 'dev'); 197 | del([tmp]); 198 | } else { 199 | copyHandler('svg', file); 200 | compileLess(); 201 | compileHtml(); 202 | setTimeout(function () { 203 | svgSymbols(); 204 | setTimeout(function () { 205 | reloadHandler(); 206 | }, 300) 207 | }, 300) 208 | } 209 | break; 210 | 211 | case 'slice': 212 | if (type === 'removed') { 213 | var tmp = file.replace('src', 'dev'); 214 | del([tmp]); 215 | } else { 216 | copyHandler('slice', file); 217 | } 218 | break; 219 | 220 | case 'js': 221 | if (type === 'removed') { 222 | var tmp = file.replace('src', 'dev'); 223 | del([tmp]); 224 | } else { 225 | compileJs(); 226 | } 227 | break; 228 | 229 | case 'media': 230 | if (type === 'removed') { 231 | var tmp = file.replace('src', 'dev'); 232 | del([tmp]); 233 | } else { 234 | copyHandler('media', file); 235 | } 236 | break; 237 | 238 | case 'css': 239 | 240 | var ext = path.extname(file); 241 | 242 | if (type === 'removed') { 243 | var tmp = file.replace('src', 'dev').replace(ext, '.css'); 244 | del([tmp]); 245 | } else { 246 | if (ext === '.less') { 247 | compileLess(); 248 | } else { 249 | compileSass(); 250 | } 251 | } 252 | 253 | break; 254 | 255 | case 'html': 256 | if (type === 'removed') { 257 | var tmp = file.replace('src', 'dev'); 258 | del([tmp]).then(function () { 259 | util.loadPlugin('build_dev'); 260 | }); 261 | } else { 262 | compileHtml(); 263 | } 264 | 265 | if (type === 'add') { 266 | setTimeout(function () { 267 | util.loadPlugin('build_dev'); 268 | }, 500); 269 | } 270 | 271 | break; 272 | } 273 | 274 | }; 275 | 276 | function svgSymbols() { 277 | return gulp.src(paths.dev.symboltemp + '**/*.svg') 278 | .pipe(svgSymbol({ 279 | mode: { 280 | inline: true, 281 | symbol: true 282 | }, 283 | shape: { 284 | id: { 285 | generator: function (id) { 286 | var ids = id.replace(/.svg/ig, ''); 287 | return ids; 288 | } 289 | } 290 | } 291 | })) 292 | .pipe(rename(function (path) { 293 | path.dirname = './'; 294 | path.basename = 'symbol'; 295 | })) 296 | .pipe(gulp.dest(paths.dev.symbol)) 297 | } 298 | 299 | //监听文件 300 | function watch(cb) { 301 | var watcher = gulp.watch([ 302 | paths.src.img, 303 | paths.src.svg, 304 | paths.src.slice, 305 | paths.src.js, 306 | paths.src.media, 307 | paths.src.lessAll, 308 | paths.src.sassAll, 309 | paths.src.htmlAll 310 | ], 311 | { ignored: /[\/\\]\./ } 312 | ); 313 | 314 | watcher 315 | .on('change', function (file) { 316 | util.log(file + ' has been changed'); 317 | watchHandler('changed', file); 318 | }) 319 | .on('add', function (file) { 320 | util.log(file + ' has been added'); 321 | watchHandler('add', file); 322 | }) 323 | .on('unlink', function (file) { 324 | util.log(file + ' is deleted'); 325 | watchHandler('removed', file); 326 | }); 327 | 328 | cb(); 329 | } 330 | 331 | //加载插件 332 | function loadPlugin(cb) { 333 | util.loadPlugin('build_dev'); 334 | cb(); 335 | } 336 | 337 | //注册 build_dev 任务 338 | gulp.task('build_dev', gulp.series( 339 | delDev, 340 | gulp.parallel( 341 | copyImg, 342 | copySlice, 343 | compileJs, 344 | copySvg, 345 | // copyJs, 346 | copyMedia, 347 | compileLess, 348 | compileSass 349 | ), 350 | compileHtml, 351 | svgSymbols, 352 | gulp.parallel( 353 | watch, 354 | loadPlugin 355 | ), 356 | startServer 357 | )); 358 | }; 359 | -------------------------------------------------------------------------------- /_tasks/TaskFTP.js: -------------------------------------------------------------------------------- 1 | var _ = require('lodash'); 2 | var del = require('del'); 3 | var path = require('path'); 4 | var ftp = require('gulp-ftp'); 5 | var util = require('./lib/util'); 6 | 7 | module.exports = function (gulp, config) { 8 | 9 | //清除目标目录 10 | function delDist() { 11 | return del(['./dist']); 12 | } 13 | 14 | function remoteFtp() { 15 | var remotePath = config['ftp']['remotePath'] || "", 16 | ftpConfig = _.extend(config['ftp'], { 17 | remotePath: path.join(remotePath, config['projectName']) 18 | }), 19 | distPath = config['ftp']['includeHtml'] ? './dist/**/*' : ['./dist/**/*', '!./dist/html/**/*.html']; 20 | 21 | return gulp.src(distPath, {base: '.'}) 22 | .pipe(ftp(ftpConfig)); 23 | } 24 | 25 | //加载插件 26 | function loadPlugin(cb) { 27 | util.loadPlugin('ftp'); 28 | cb(); 29 | } 30 | 31 | //注册 ftp 任务 32 | gulp.task('ftp', gulp.series( 33 | 'build_dist', 34 | remoteFtp, 35 | delDist, 36 | loadPlugin 37 | )); 38 | }; 39 | -------------------------------------------------------------------------------- /_tasks/TaskSFTP.js: -------------------------------------------------------------------------------- 1 | var _ = require('lodash'); 2 | var path = require('path'); 3 | var del = require('del'); 4 | var util = require('./lib/util'); 5 | var sftp = require('gulp-sftp'); 6 | 7 | module.exports = function (gulp, config) { 8 | 9 | //清除目标目录 10 | function delDist() { 11 | return del(['./dist']); 12 | } 13 | 14 | function remoteSftp() { 15 | var remotePath = config['sftp']['remotePath'] || '', 16 | sftpConfig = _.extend(config['sftp'], { 17 | remotePath: path.join(remotePath, config['projectName']) 18 | }), 19 | distPath = config['ftp']['includeHtml'] ? './dist/**/*' : ['./dist/**/*', '!./dist/html/**/*.html']; 20 | 21 | return gulp.src(distPath, {base: '.'}) 22 | .pipe(sftp(sftpConfig)) 23 | } 24 | 25 | //加载插件 26 | function loadPlugin(cb) { 27 | util.loadPlugin('Res'); 28 | cb(); 29 | } 30 | 31 | //注册 Res 任务 32 | gulp.task('sftp', gulp.series( 33 | 'build_dist', 34 | remoteSftp, 35 | delDist, 36 | loadPlugin 37 | )); 38 | }; 39 | -------------------------------------------------------------------------------- /_tasks/TaskZip.js: -------------------------------------------------------------------------------- 1 | var util = require('./lib/util'); 2 | var del = require('del'); 3 | var zip = require('gulp-zip'); 4 | 5 | module.exports = function (gulp, config) { 6 | 7 | //清除目标目录 8 | function delDist() { 9 | return del(['./dist']); 10 | } 11 | 12 | function zipTask(){ 13 | return gulp.src('./dist/**/*') 14 | .pipe(zip('dist.zip')) 15 | .pipe(gulp.dest('./')); 16 | } 17 | 18 | //注册 zip 任务 19 | gulp.task('zip', gulp.series( 20 | 'build_dist', 21 | zipTask, 22 | delDist 23 | )); 24 | }; 25 | -------------------------------------------------------------------------------- /_tasks/common/changed.js: -------------------------------------------------------------------------------- 1 | var md5 = require('crypto-md5'); 2 | var path = require('path'); 3 | var rd = require('rd'); 4 | var fs = require('fs'); 5 | var _ = require('lodash'); 6 | 7 | function changed(dir) { 8 | 9 | var manifestPath = path.resolve('./src/manifest.json'); 10 | var manifest = {}; 11 | var originManifest = {}; 12 | 13 | //如果存在 manifest.json, 则加载保存 14 | if (fs.existsSync(manifestPath)) { 15 | originManifest = require(manifestPath); 16 | } 17 | 18 | //遍历目录, 根据内容 md5 加密 19 | rd.eachFileFilterSync(dir, function (file) { 20 | var index = path.relative(dir, file); 21 | 22 | //过滤掉 隐藏文件 和 manifest.json 23 | if (path.extname(file) && index !== 'manifest.json' && fs.existsSync(file)) { 24 | 25 | var data = fs.readFileSync(file); 26 | 27 | if (data) { 28 | manifest[index] = md5(data, 'hex'); 29 | } 30 | } 31 | 32 | }); 33 | 34 | //将新的 manifest.json 保存 35 | fs.writeFile(manifestPath, JSON.stringify(manifest), function (err) { 36 | if (err) throw err; 37 | }); 38 | 39 | //找出有变动的文件 40 | if(originManifest){ 41 | var diff = {}; 42 | 43 | _.forEach(manifest, function (item, index) { 44 | if (originManifest[index] !== item) { 45 | diff[index] = item; 46 | } 47 | }); 48 | } 49 | 50 | return diff; 51 | 52 | } 53 | 54 | 55 | module.exports = function(){ 56 | return changed; 57 | }; -------------------------------------------------------------------------------- /_tasks/common/parseSVG.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by doubleluo 3 | */ 4 | var gulp = require('gulp'); 5 | var replace = require('gulp-replace'); 6 | var through = require('through2'); 7 | var fs = require('fs'); 8 | var path = require('path'); 9 | var File = require('vinyl'); 10 | var util = require('../lib/util'); 11 | var cheerio = require('cheerio'); 12 | 13 | module.exports = function (options) { 14 | 15 | var mkdirs = function(dirpath, callback) { 16 | fs.exists(dirpath, function(exists) { 17 | if(exists) { 18 | callback(dirpath); 19 | } else { 20 | mkdirs(path.dirname(dirpath), function(){ 21 | fs.mkdir(dirpath, callback); 22 | }); 23 | } 24 | }); 25 | } 26 | 27 | var mkdirone = false; 28 | var marchRegInline = //gi; 29 | var marchRegSybmol = //gi; 30 | var marchRegBase = //gi; 31 | var src = [],id,style,className,data,width,height,newcontent,$; 32 | 33 | function getBase(){ 34 | id = $.attr('id'); 35 | style = $.attr('style'); 36 | className = $.attr('class'); 37 | data = fs.readFileSync(path.join(process.cwd(), options.devPath+'/img', src[0])).toString(); 38 | width = data.match(/','>'); 61 | } 62 | return data; 63 | } 64 | function sybmol(contents){ 65 | var newFile = path.join(process.cwd(), options.devPath + '/symboltemp/', fileName); 66 | fs.writeFile(newFile, data, {encoding: 'utf8'}, err => { 67 | if (err) throw err; 68 | }); 69 | newcontent.push(''); 72 | if(options.SVGGracefulDegradation){ 73 | newcontent.push(''); 74 | } 75 | newcontent.push(''); 76 | newcontent.push(''); 77 | return newcontent.join(''); 78 | } 79 | function base(contents){ 80 | newcontent.push(''); 83 | if(options.SVGGracefulDegradation){ 84 | newcontent.push(''); 85 | }else{ 86 | newcontent.push(''); 87 | } 88 | newcontent.push(''); 89 | return newcontent.join(''); 90 | } 91 | 92 | function run(regData,contents,marchReg){ 93 | if(regData){ 94 | for(var i = 0;i-1){ 99 | getBase(); 100 | if(src[1] == 'i'){ 101 | replaceData = inline(contents); 102 | }else if(src[1] == 's'){ 103 | replaceData = sybmol(contents); 104 | }else{ 105 | replaceData = base(contents); 106 | } 107 | } 108 | 109 | contents = contents.replace(regData[i], replaceData); 110 | 111 | } 112 | } 113 | return contents; 114 | } 115 | 116 | return through.obj(function (file, enc, cb) { 117 | 118 | var _this = this; 119 | 120 | 121 | if (file.isNull()) { 122 | cb(null, file); 123 | } else { 124 | if (util.fileExist(file.path)) { 125 | var contents = file.contents.toString(); 126 | var regData; 127 | if(options.onlyInline){ 128 | regData = contents.match(marchRegInline); 129 | contents = run(regData,contents,marchRegInline); 130 | }else{ 131 | if(!mkdirone){ 132 | mkdirone = true; 133 | fs.exists(process.cwd() + '/'+ options.devPath +'/symboltemp',function(exists){ 134 | if(!exists){ 135 | fs.mkdir(process.cwd() + '/'+ options.devPath +'/symboltemp', err => { 136 | if (err) throw err; 137 | }); 138 | } 139 | }); 140 | } 141 | regData = contents.match(marchRegInline); 142 | contents = run(regData,contents,marchRegInline); 143 | regData = contents.match(marchRegSybmol); 144 | contents = run(regData,contents,marchRegSybmol); 145 | regData = contents.match(marchRegBase); 146 | contents = run(regData,contents,marchRegBase); 147 | } 148 | 149 | 150 | _this.push(new File({ 151 | base: file.base, 152 | path: file.path, 153 | contents: new Buffer(contents) 154 | })); 155 | cb(null); 156 | } else { 157 | cb(null, file); 158 | } 159 | } 160 | }); 161 | } 162 | -------------------------------------------------------------------------------- /_tasks/common/svgToPng.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by doubleluo on 15/5/3. 3 | */ 4 | var gulp = require('gulp'); 5 | var replace = require('gulp-replace'); 6 | var through = require('through2'); 7 | var fs = require('fs'); 8 | var path = require('path'); 9 | var util = require('../lib/util'); 10 | var File = require('vinyl'); 11 | var svg_to_png = require('svg-to-png'); 12 | 13 | module.exports = function (options) { 14 | return through.obj(function (file, enc, cb) { 15 | 16 | var _this = this; 17 | 18 | 19 | if (file.isNull()) { 20 | cb(null, file); 21 | } else { 22 | if (util.fileExist(file.path)) { 23 | svg_to_png.convert(file.path, file.path.substr(0,file.path.lastIndexOf('/')).replace('/src/','/dist/')); 24 | 25 | _this.push(new File({ 26 | base: file.base, 27 | path: file.path, 28 | contents: file.contents 29 | })); 30 | cb(null); 31 | } else { 32 | cb(null, file); 33 | } 34 | } 35 | }); 36 | } -------------------------------------------------------------------------------- /_tasks/common/webp.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by littledu on 15/5/2. 3 | */ 4 | var rd = require('rd'); 5 | var gulp = require('gulp'); 6 | var path = require('path'); 7 | var gulpWebp = require('gulp-webp'); 8 | var rename = require('gulp-rename'); 9 | var replace = require('gulp-replace'); 10 | var util = require('./../lib/util'); 11 | var fs = require('fs'); 12 | 13 | module.exports = function (config, done) { 14 | 15 | var webpScript = ''; 16 | 17 | var webpMap = {}; //为了筛选webp而构建的对象 18 | var imgArr = []; //筛选出来需要转换成 webp 的图片 19 | var imgMap = {}; //返回给全局作 preload 判断使用{"img_name": 1, "img_name": 0} 1 为可优化成 webp 20 | var reg = null; 21 | 22 | function render_webp(src) { 23 | if (!fs.existsSync(src)) return; 24 | 25 | rd.eachFileSync(src, function (file, stats) { 26 | var extname = path.extname(file); 27 | var basename = path.basename(file, extname); 28 | if (!(basename in webpMap)) { 29 | webpMap[basename] = {}; 30 | webpMap[basename]['size'] = stats.size; 31 | webpMap[basename]['extname'] = extname; 32 | } else { 33 | if ((webpMap[basename]['size'] > stats.size) && (extname === '.webp')) { 34 | imgArr.push(basename + webpMap[basename]['extname']); 35 | imgMap[basename + webpMap[basename]['extname']] = 1; 36 | } else { 37 | imgMap[basename + webpMap[basename]['extname']] = 0; 38 | } 39 | } 40 | }); 41 | } 42 | 43 | return function () { 44 | return gulp.series( 45 | function compileSprite() { 46 | return gulp.src('./tmp/sprite/**/*') 47 | .pipe(gulpWebp()) 48 | .pipe(gulp.dest('./tmp/sprite')); 49 | }, 50 | function compileImg () { 51 | return gulp.src('./tmp/img/**/*') 52 | .pipe(gulpWebp()) 53 | .pipe(gulp.dest('./tmp/img')); 54 | }, 55 | //智能寻找 webp 56 | function find2Webp (cb) { 57 | render_webp('./tmp/sprite'); 58 | render_webp('./tmp/img'); 59 | if(imgArr.length){ 60 | reg = eval('/(' + imgArr.join('|') + ')/ig'); 61 | } 62 | cb(); 63 | }, 64 | function compileCss () { 65 | return gulp.src(['./tmp/css/**/*.css', '!./tmp/css/**/*.webp.css']) 66 | .pipe(rename({suffix: '.webp'})) 67 | .pipe(replace(reg, function (match) { 68 | if(match){ 69 | return match.substring(0, match.lastIndexOf('.')) + '.webp'; 70 | } 71 | })) 72 | .pipe(gulp.dest('./tmp/css')); 73 | }, 74 | function insertWebpJs () { 75 | var preload_script = ''; 76 | 77 | return gulp.src('./tmp/html/**/*.html') 78 | .pipe(replace('data-href', 'href')) 79 | .pipe(replace(/(link.*?)href/ig, '$1data-href')) 80 | .pipe(replace('', webpScript)) 81 | .pipe(replace('', preload_script)) 82 | .pipe(gulp.dest('./tmp/html')); 83 | } 84 | ); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /_tasks/index.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var path = require('path'); 3 | var config = require('rc')('tmtworkflow', { 4 | projectName: process.cwd().split(path.sep).pop() 5 | }); 6 | 7 | module.exports = function (gulp) { 8 | fs.readdirSync(__dirname).filter(function (file) { 9 | return (file.indexOf(".") !== 0) && (file.indexOf('Task') === 0); 10 | }).forEach(function (file) { 11 | var registerTask = require(path.join(__dirname, file)); 12 | registerTask(gulp, config); 13 | }); 14 | }; 15 | -------------------------------------------------------------------------------- /_tasks/lib/util.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var path = require('path'); 3 | var util = require('gulp-util'); 4 | var config = require('rc')('tmtworkflow', { 5 | projectName: process.cwd().split(path.sep).pop() 6 | }); 7 | 8 | var tmt_util = { 9 | log: function (task_name) { 10 | util.log.apply(util, arguments); 11 | }, 12 | task_log: function (task_name) { 13 | this.log(util.colors.magenta(task_name), util.colors.green.bold('√')); 14 | }, 15 | loadPlugin: function (name, cb) { 16 | name = name + 'After'; 17 | 18 | if (config['plugins'] && config['plugins'][name] && config['plugins'][name].length) { 19 | var plugins = config['plugins'][name]; 20 | 21 | plugins.every(function (plugin) { 22 | if (plugin.indexOf('.js') === -1) { 23 | plugin += '.js'; 24 | } 25 | 26 | var filepath = path.resolve(__dirname, '../plugins', plugin); 27 | 28 | if (fs.existsSync(filepath)) { 29 | require(filepath)(config); 30 | (typeof cb === 'function') && cb(); 31 | } else { 32 | console.log('The ' + filepath + ' is not found!'); 33 | (typeof cb === 'function') && cb(); 34 | } 35 | }); 36 | } 37 | }, 38 | colors: util.colors, 39 | dirExist: function (dirPath) { 40 | try { 41 | var stat = fs.statSync(dirPath); 42 | if (stat.isDirectory()) { 43 | return true; 44 | } else { 45 | return false; 46 | } 47 | } catch (err) { 48 | if (err.code === 'ENOENT') { 49 | return false; 50 | } else { 51 | throw new Error(err); 52 | } 53 | } 54 | }, 55 | fileExist: function (filePath) { 56 | try { 57 | var stat = fs.statSync(filePath); 58 | if (stat.isFile()) { 59 | return true; 60 | } else { 61 | return false; 62 | } 63 | } catch (err) { 64 | if (err.code === 'ENOENT') { 65 | return false; 66 | } else { 67 | throw new Error(err); 68 | } 69 | } 70 | } 71 | }; 72 | 73 | module.exports = tmt_util; 74 | -------------------------------------------------------------------------------- /_tasks/plugins/TmTIndex.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by littledu on 15/5/16. 3 | */ 4 | var fs = require('fs'), 5 | path = require('path'), 6 | localIp = require('quick-local-ip'); 7 | 8 | module.exports = function (config) { 9 | var html = [ 10 | '', 11 | '', 12 | '', 13 | '', 14 | '', 15 | '', 16 | '', 19 | '', 20 | '', 21 | ' ', 22 | ' ', 23 | ' ', 24 | ' ', 25 | ' ', 26 | ' ', 27 | ' ', 28 | ' ' 29 | ].join(''), 30 | tmpHtml = '', 31 | length = '/dev/html/'.length, 32 | collector = listdir('./dev/html'), 33 | ip = localIp.getLocalIP4(); 34 | 35 | 36 | showdir(collector, 0); 37 | 38 | function listdir(dir) { 39 | var collector = { 40 | 'name': dir, 41 | 'type': 'dir', 42 | 'url': '', 43 | 'child': [] 44 | }; 45 | files = fs.readdirSync(dir); 46 | 47 | 48 | files.forEach(function (file) { 49 | var absolutePath = dir + '/' + file, 50 | stats = fs.statSync(absolutePath); 51 | 52 | var url = absolutePath.substring(absolutePath.indexOf('./dev/html/') + length + 1); 53 | 54 | if (stats.isDirectory() && (stats.isDirectory() !== '.' || stats.isDirectory() !== '..')) { 55 | collector['child'].push(listdir(absolutePath)); 56 | } else { 57 | collector['child'].push({ 58 | 'name': path.basename(absolutePath), 59 | 'type': 'file', 60 | 'url': url 61 | }); 62 | } 63 | }); 64 | 65 | return collector; 66 | } 67 | 68 | function showdir(collector, level) { 69 | var file = collector['name'], 70 | basename = path.basename(file); 71 | 72 | var indent = 25 * (level - 1); 73 | 74 | if (indent <= 0) { 75 | indent = 10; 76 | } 77 | 78 | if (collector['type'] == 'dir') { 79 | if (level != 0) { 80 | html += ''; 81 | } 82 | 83 | collector['child'].forEach(function (item) { 84 | showdir(item, level + 1); 85 | }); 86 | } 87 | 88 | if (collector['type'] == 'file') { 89 | if (path.extname(file) === '.html' && basename !== 'TmTIndex.html') { 90 | if (level === 1) { 91 | tmpHtml += ''; 92 | } else { 93 | html += ''; 94 | } 95 | 96 | } 97 | } 98 | } 99 | 100 | html = html + tmpHtml; 101 | 102 | html += '
文件名二维码
[目录]: ' + basename + '
' + basename + '
' + basename + '
'; 103 | 104 | var out = fs.createWriteStream('./dev/html/TmTIndex.html', {encoding: "utf8"}); 105 | out.write(html, function (err) { 106 | if (err) console.log(err); 107 | }); 108 | out.end(); 109 | } 110 | -------------------------------------------------------------------------------- /_tasks/plugins/ftp.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by littledu on 15/4/28. 3 | */ 4 | var util = require('./../lib/util'); 5 | var path = require('path'); 6 | 7 | module.exports = function(config){ 8 | var remotePath = config['ftp']['remotePath'] || ""; 9 | var url = 'http://' + path.join(remotePath, config['projectName'], 'dist/html/').replace(/\\/g, '/'); 10 | 11 | util.log(util.colors.magenta('copy to browser：') + url); 12 | } 13 | -------------------------------------------------------------------------------- /appveyor.yml: -------------------------------------------------------------------------------- 1 | 2 | # AppVeyor file 3 | # http://www.appveyor.com/docs/lang/nodejs-iojs 4 | # http://www.appveyor.com/docs/appveyor-yml 5 | 6 | version: "{build}" 7 | 8 | clone_depth: 10 9 | 10 | environment: 11 | matrix: 12 | - nodejs_version: 5.0.0 13 | # Install scripts. (runs after repo cloning) 14 | install: 15 | # Get the latest stable version of Node.js or io.js 16 | - ps: Install-Product node $env:nodejs_version 17 | - npm cache clean 18 | - npm install -g gulp 19 | # install modules 20 | - npm install 21 | 22 | # Post-install test scripts. 23 | test_script: 24 | # Output useful info for debugging. 25 | - node --version && npm --version 26 | # run tests 27 | - cd project 28 | - gulp build_dist 29 | 30 | # Don't actually build. 31 | build: off 32 | 33 | matrix: 34 | fast_finish: true 35 | 36 | cache: 37 | - C:\Users\appveyor\AppData\Roaming\npm-cache -> package.json # npm cache 38 | - node_modules -> package.json # local npm modules 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tmt-workflow", 3 | "version": "1.5.8", 4 | "dependencies": { 5 | "autoprefixer": "^6.3.3", 6 | "babel-core": "^6.10.4", 7 | "babel-loader": "^6.2.4", 8 | "babel-preset-es2015": "^6.9.0", 9 | "babel-preset-stage-2": "^6.11.0", 10 | "browser-sync": "^2.11.1", 11 | "cheerio": "^0.22.0", 12 | "crypto-md5": "^1.0.0", 13 | "del": "^2.2.0", 14 | "gulp": "^4.0.0", 15 | "gulp-babel": "^6.1.2", 16 | "gulp-cssnano": "^2.1.1", 17 | "gulp-ejs": "^2.1.1", 18 | "gulp-ftp": "^1.1.0", 19 | "gulp-if": "^2.0.0", 20 | "gulp-imagemin": "^2.4.0", 21 | "gulp-lazyimagecss": "^2.0.0", 22 | "gulp-less": "^3.0.5", 23 | "gulp-postcss": "^6.0.1", 24 | "gulp-posthtml": "^1.5.2", 25 | "gulp-rename": "^1.2.2", 26 | "gulp-replace": "^0.5.4", 27 | "gulp-rev-all": "^1.0.0", 28 | "gulp-rev-delete-original": "^0.1.0", 29 | "gulp-sass": "^2.3.2", 30 | "gulp-sftp": "^0.1.4", 31 | "gulp-svg-inline": "^1.0.1", 32 | "gulp-svg-sprite": "^1.3.6", 33 | "gulp-svgmin": "^1.2.3", 34 | "gulp-tmtsprite": "^0.0.23", 35 | "gulp-uglify": "^1.5.3", 36 | "gulp-usemin": "^0.3.23", 37 | "gulp-util": "^3.0.7", 38 | "gulp-webp": "^2.3.0", 39 | "gulp-zip": "^3.2.0", 40 | "imagemin-pngquant": "^4.2.2", 41 | "lodash": "^4.5.1", 42 | "postcss-pxtorem": "^3.3.1", 43 | "posthtml-px2rem": "^0.0.3", 44 | "quick-local-ip": "^1.0.7", 45 | "rc": "^1.1.6", 46 | "rd": "^0.0.2", 47 | "svg-to-png": "^3.1.2", 48 | "through2": "^2.0.3", 49 | "tmt-ejs-helper": "^0.0.1", 50 | "vinyl": "^2.0.1", 51 | "webpack": "^2.2.1", 52 | "webpack-stream": "^3.2.0" 53 | }, 54 | "description": "A f2e project workflow based on Gulp", 55 | "repository": { 56 | "type": "git", 57 | "url": "https://github.com/weixin/tmt-workflow" 58 | }, 59 | "keywords": [ 60 | "Workflow", 61 | "F2E", 62 | "Less", 63 | "CSS", 64 | "Tencent", 65 | "Wechat", 66 | "WeiXin", 67 | "Sprite", 68 | "WebP", 69 | "REM" 70 | ], 71 | "license": "MIT", 72 | "bugs": { 73 | "url": "https://github.com/weixin/tmt-workflow" 74 | }, 75 | "homepage": "https://github.com/weixin/tmt-workflow", 76 | "readmeFilename": "README.md" 77 | } -------------------------------------------------------------------------------- /project-webpack/.tmtworkflowrc: -------------------------------------------------------------------------------- 1 | { 2 | "ftp": { 3 | "host": "xx.xx.xx.xx", 4 | "port": "8021", 5 | "user": "tmt", 6 | "pass": "password", 7 | "remotePath": "remotePath", 8 | "includeHtml": true 9 | //ftp 上传是否包含 html 10 | }, 11 | "sftp": { 12 | "host": "xx.xx.xx.xx", 13 | "port": "xx", 14 | "user": "tmt", 15 | "password": "password", 16 | "remotePath": "", 17 | "includeHtml": true 18 | }, 19 | "livereload": { 20 | "available": true, 21 | //开启自动刷新 22 | "port": 8080, 23 | "startPath": "html/TmTIndex.html" 24 | }, 25 | //路径相对于 tasks/plugins 目录 26 | "plugins": { 27 | "build_devAfter": [ 28 | "TmTIndex" 29 | ], 30 | "build_distAfter": [], 31 | "ftpAfter": [ 32 | "ftp" 33 | ] 34 | }, 35 | "lazyDir": [ 36 | "../slice" 37 | ], 38 | //gulp-lazyImageCSS 寻找目录(https://github.com/weixin/gulp-lazyimagecss) 39 | 40 | "supportWebp": false, 41 | "supportREM": true, 42 | "supportChanged": false, 43 | "reversion": true 44 | } 45 | -------------------------------------------------------------------------------- /project-webpack/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var fs = require('fs'); 3 | var path = require('path'); 4 | 5 | //注册 6 | var deep = 3; 7 | run_tasks('_tasks'); 8 | 9 | function run_tasks(tasks_path) { 10 | if (--deep < 0) { 11 | throw new Error('something wrong in require tasks!'); 12 | return; 13 | } 14 | 15 | tasks_path = path.join('../', tasks_path); 16 | 17 | if (fs.existsSync(tasks_path)) { 18 | require(tasks_path)(gulp); 19 | } else { 20 | run_tasks(tasks_path); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /project-webpack/src/css/lib/lib-mixins.less: -------------------------------------------------------------------------------- 1 | //---------------------------- 2 | // 3 | // mixins.less v0.1.5 4 | // http://mixinsless.com/ 5 | // Reuse snippets & Cross-browser private properties snippets. 6 | //---------------------------- 7 | 8 | // Border radius with the same argument 9 | // ------------------------- 10 | .rounded(@radius: 3px) { 11 | -webkit-border-radius:@radius; 12 | -moz-border-radius:@radius; 13 | border-radius:@radius; 14 | -webkit-background-clip:padding-box; 15 | -moz-background-clip:padding-box; 16 | background-clip:padding-box; 17 | } 18 | 19 | // Border radius with different arguments 20 | // ------------------------- 21 | .border-radius(@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0) { 22 | -webkit-border-top-left-radius:@topleft; 23 | -webkit-border-top-right-radius:@topright; 24 | -webkit-border-bottom-right-radius:@bottomright; 25 | -webkit-border-bottom-left-radius:@bottomleft; 26 | -moz-border-radius-topleft:@topleft; 27 | -moz-border-radius-topright:@topright; 28 | -moz-border-radius-bottomright:@bottomright; 29 | -moz-border-radius-bottomleft:@bottomleft; 30 | border-top-left-radius:@topleft; 31 | border-top-right-radius:@topright; 32 | border-bottom-right-radius:@bottomright; 33 | border-bottom-left-radius:@bottomleft; 34 | -webkit-background-clip:padding-box; 35 | -moz-background-clip:padding-box; 36 | background-clip:padding-box; 37 | } 38 | 39 | // Background size 40 | // ------------------------- 41 | .background-size(@size) { 42 | -webkit-background-size:@size; 43 | -moz-background-size:@size; 44 | -o-background-size:@size; 45 | background-size:@size; 46 | } 47 | 48 | // Opacity 49 | // ------------------------- 50 | .opacity(@opacity) { 51 | opacity:@opacity; 52 | @opacityIE : @opacity * 100; 53 | filter:~"alpha(opacity=@{opacityIE})"; 54 | } 55 | 56 | // Appearance 57 | // ------------------------- 58 | .appearance(@appearance:none) { 59 | -webkit-appearance:@appearance; 60 | appearance:@appearance; 61 | } 62 | 63 | // Gradient 64 | // ------------------------- 65 | .gradient(@start: #000000, @stop: #FFFFFF) { 66 | background:(@start + @stop)/2; 67 | background:-webkit-gradient(linear, left top, left bottom, color-stop(0, @start), color-stop(1, @stop)); 68 | background:-moz-linear-gradient(center top, @start 0%, @stop 100%); 69 | } 70 | 71 | // Box shadow 72 | // ------------------------- 73 | .drop-shadow(@horizontal: 0, @vertical: 1px, @blur: 2px, @alpha: 0.1) { 74 | -webkit-box-shadow:@horizontal @vertical @blur rgba(0, 0, 0, @alpha); 75 | -moz-box-shadow:@horizontal @vertical @blur rgba(0, 0, 0, @alpha); 76 | box-shadow:@horizontal @vertical @blur rgba(0, 0, 0, @alpha); 77 | } 78 | 79 | // Box shadow inset 80 | // ------------------------- 81 | .inner-shadow(@horizontal: 0, @vertical: 1px, @blur: 2px, @alpha: 0.4) { 82 | -webkit-box-shadow:inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); 83 | -moz-box-shadow:inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); 84 | box-shadow:inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); 85 | } 86 | 87 | // Box inner border 88 | // ------------------------- 89 | .inner-border(@width: 1px, @color: #000) { 90 | -webkit-box-shadow:inset 0 0 0 @width @color; 91 | -moz-box-shadow:inset 0 0 0 @width @color; 92 | box-shadow:inset 0 0 0 @width @color; 93 | } 94 | 95 | // Box shadow default 96 | // ------------------------- 97 | .box-shadow(@arguments) { 98 | -webkit-box-shadow:@arguments; 99 | -moz-box-shadow:@arguments; 100 | box-shadow:@arguments; 101 | } 102 | 103 | // Animation 104 | // ------------------------- 105 | .animation(@animation) { 106 | -webkit-animation:@animation; 107 | -moz-animation:@animation; 108 | animation:@animation; 109 | } 110 | 111 | .transition(@transition) { 112 | -webkit-transition:@transition; 113 | -moz-transition:@transition; 114 | -o-transition:@transition; 115 | transition:@transition; 116 | } 117 | .transition-delay(@transition-delay) { 118 | -webkit-transition-delay:@transition-delay; 119 | -moz-transition-delay:@transition-delay; 120 | -o-transition-delay:@transition-delay; 121 | transition-delay:@transition-delay; 122 | } 123 | .transition-duration(@transition-duration) { 124 | -webkit-transition-duration:@transition-duration; 125 | -moz-transition-duration:@transition-duration; 126 | -o-transition-duration:@transition-duration; 127 | transition-duration:@transition-duration; 128 | } 129 | 130 | // Transform 131 | // ------------------------- 132 | .transform(@arguments) { 133 | -webkit-transform:@arguments; 134 | -moz-transform:@arguments; 135 | transform:@arguments; 136 | } 137 | 138 | // Transform rotation 139 | // ------------------------- 140 | .rotation(@deg:5deg) { 141 | -webkit-transform:rotate(@deg); 142 | -moz-transform:rotate(@deg); 143 | transform:rotate(@deg); 144 | } 145 | 146 | // Transform scale 147 | // ------------------------- 148 | .scale(@ratio:1.5) { 149 | -webkit-transform:scale(@ratio); 150 | -moz-transform:scale(@ratio); 151 | transform:scale(@ratio); 152 | } 153 | 154 | // Translate 155 | // ------------------------- 156 | .translate(@x:0, @y:0) { 157 | -moz-transform:translate(@x, @y); 158 | -webkit-transform:translate(@x, @y); 159 | -o-transform:translate(@x, @y); 160 | -ms-transform:translate(@x, @y); 161 | transform:translate(@x, @y); 162 | } 163 | 164 | // Translate3d 165 | // ------------------------- 166 | .translate3d(@x, @y, @z) { 167 | -webkit-transform:translate3d(@x, @y, @z); 168 | -moz-transform:translate3d(@x, @y, @z); 169 | -o-transform:translate3d(@x, @y, @z); 170 | transform:translate3d(@x, @y, @z); 171 | } 172 | 173 | // Background clipping 174 | // ------------------------- 175 | .background-clip(@clip) { 176 | -webkit-background-clip:@clip; 177 | -moz-background-clip:@clip; 178 | background-clip:@clip; 179 | } 180 | 181 | // CSS columns 182 | // ------------------------- 183 | .columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEEEEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) { 184 | -moz-column-width:@colwidth; 185 | -moz-column-count:@colcount; 186 | -moz-column-gap:@colgap; 187 | -moz-column-rule-color:@columnRuleColor; 188 | -moz-column-rule-style:@columnRuleStyle; 189 | -moz-column-rule-width:@columnRuleWidth; 190 | -webkit-column-width:@colwidth; 191 | -webkit-column-count:@colcount; 192 | -webkit-column-gap:@colgap; 193 | -webkit-column-rule-color:@columnRuleColor; 194 | -webkit-column-rule-style:@columnRuleStyle; 195 | -webkit-column-rule-width:@columnRuleWidth; 196 | column-width:@colwidth; 197 | column-count:@colcount; 198 | column-gap:@colgap; 199 | column-rule-color:@columnRuleColor; 200 | column-rule-style:@columnRuleStyle; 201 | column-rule-width:@columnRuleWidth; 202 | } 203 | 204 | // Import font 205 | // ------------------------- 206 | .font-face(@fontFamily, @fileName, @style, @weight) { 207 | @font-face{ 208 | font-family:@fontFamily; 209 | font-style:@style; 210 | font-weight:@weight; 211 | src:url('@{fileName}.eot'); 212 | src:local('@fontFamily'), url('@{fileName}.eot?#iefix') format('embedded-opentype'), url('@{fileName}.woff') format('woff'), url('@{fileName}.ttf') format('truetype'), url('@{fileName}.svg#@{fontFamily}') format('svg'), url("@{fileName}.otf") format('opentype'); 213 | } 214 | } 215 | 216 | // Clearfix 217 | // ------------------------- 218 | .clearfix() { 219 | zoom:1; 220 | &:before{ 221 | content:''; 222 | display:block; 223 | } 224 | &:after{ 225 | content:''; 226 | display:table; 227 | clear:both; 228 | } 229 | } 230 | 231 | // CSS image replacement 232 | // ------------------------- 233 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 234 | .hide-text() { 235 | font:0/0 a; 236 | color:transparent; 237 | text-shadow:none; 238 | background-color:transparent; 239 | border:0; 240 | } 241 | 242 | // Force line breaks 243 | // ------------------------- 244 | .word-break() { 245 | word-break:break-all; 246 | word-wrap:break-word; 247 | white-space: normal; 248 | } 249 | 250 | // No wrap 251 | // ------------------------- 252 | .no-wrap() { 253 | word-break: normal; 254 | word-wrap: normal; 255 | white-space: nowrap; 256 | } 257 | 258 | // Text overflow with(...) 259 | // ------------------------- 260 | // Requires inline-block or block for proper styling 261 | .text-overflow() { 262 | overflow:hidden; 263 | text-overflow:ellipsis; 264 | white-space:nowrap; 265 | max-width:100%; 266 | } 267 | 268 | .line-overflow(@line) { 269 | overflow:hidden; 270 | text-overflow:ellipsis; 271 | display:-webkit-box; 272 | -webkit-line-clamp:@line; /* number of lines to show */ 273 | -webkit-box-orient:vertical; 274 | } 275 | 276 | // Creates a wrapper for a series of columns 277 | // ------------------------- 278 | .lay-row() { 279 | // Negative margin the row out to align the content of columns 280 | margin-left: (@grid-gutter-width / -2); 281 | margin-right: (@grid-gutter-width / -2); 282 | // Then clear the floated columns 283 | .clearfix(); 284 | } 285 | 286 | // Generate the columns 287 | // ------------------------- 288 | .lay-column(@columns) { 289 | @media (min-width: @grid-float-breakpoint) { 290 | float: left; 291 | // Calculate width based on number of columns available 292 | width: percentage(@columns / @grid-columns); 293 | } 294 | // Prevent columns from collapsing when empty 295 | min-height: 1px; 296 | // Set inner padding as gutters instead of margin 297 | padding-left: (@grid-gutter-width / 2); 298 | padding-right: (@grid-gutter-width / 2); 299 | } 300 | 301 | // Generate the column offsets 302 | // ------------------------- 303 | .lay-column-offset(@columns) { 304 | @media (min-width: @grid-float-breakpoint) { 305 | margin-left: percentage((@columns / @grid-columns)); 306 | } 307 | } 308 | 309 | // Alpha background 310 | // ------------------------- 311 | .alpha-background(@rgb:#000,@alpha:.5){ 312 | @rgba-color:fade(@rgb,@alpha*100); 313 | @argb-color:argb(@rgba-color); 314 | background-color:@rgba-color; 315 | filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{argb-color}', endColorstr='@{argb-color}', GradientType=0)\9"; 316 | zoom:1; 317 | } 318 | 319 | // Controls the selection model of an element. 320 | // ------------------------- 321 | .user-select(@arguments:none){ 322 | -webkit-user-select: @arguments; 323 | -moz-user-select: @arguments; 324 | -ms-user-select: @arguments; 325 | user-select: @arguments; 326 | } 327 | 328 | // Flexbox display 329 | // ------------------------- 330 | // flex or inline-flex 331 | .flex-display(@display: flex) { 332 | display: ~"-webkit-@{display}"; 333 | display: ~"-moz-@{display}"; 334 | display: @display; 335 | } 336 | 337 | // fix background-image with `./img/xxx.png` in REM support option. 338 | .rem-bg(){ 339 | background-repeat: no-repeat; 340 | background-position: center; 341 | background-size: 100%; 342 | } 343 | 344 | -------------------------------------------------------------------------------- /project-webpack/src/css/lib/lib-rem.less: -------------------------------------------------------------------------------- 1 | // REM 适配 2 | 3 | // 375px (iPhone 6) 4 | // 此为基准值, 与视觉设计稿 `宽度/2` 保持一致 5 | html[data-rem="375"] { 6 | font-size: 20PX; 7 | } 8 | 9 | // 17.06 = 320*20/375 (iPhone 5) 10 | @media only screen and (min-width: 320px) { 11 | html[data-rem="375"] { 12 | font-size: 17.06PX !important; 13 | } 14 | } 15 | 16 | // base root size (iPhone 6) 17 | @media only screen and (min-width: 375px) { 18 | html[data-rem="375"] { 19 | font-size: 20PX !important; 20 | } 21 | } 22 | 23 | // 21.33333333 = 400*20/375 (Most Android) 24 | @media only screen and (min-width: 400px) { 25 | html[data-rem="375"] { 26 | font-size: 21.33333333PX !important; 27 | } 28 | } 29 | 30 | // 22.08 = 414*20/375 (iPhone 6 Plus) 31 | @media only screen and (min-width: 414px) { 32 | html[data-rem="375"] { 33 | font-size: 22.08PX !important; 34 | } 35 | } 36 | 37 | // 25.6 = 480*20/375 (iPad) 38 | @media only screen and (min-width: 480px) { 39 | html[data-rem="375"] { 40 | font-size: 25.6PX !important; 41 | } 42 | } 43 | 44 | // 20*100/375 = 5.333333333 以 375 宽度为基准动态计算 45 | //html[data-rem="375"] { 46 | // font-size: 5.333333333vw; 47 | //} 48 | 49 | // REM 适配, 用法: 50 | 51 | // 320px (iPhone 5) 52 | // 此为基准值, 与视觉设计稿 `宽度/2` 保持一致 53 | html[data-rem="320"] { 54 | font-size: 20PX; 55 | } 56 | 57 | // 23.4375 = 375*20/320 (Most Android) 58 | @media only screen and (min-width: 375px) { 59 | html[data-rem="320"] { 60 | font-size: 23.4375PX !important; 61 | } 62 | } 63 | 64 | // 25 = 400*20/320 (Most Android) 65 | @media only screen and (min-width: 400px) { 66 | html[data-rem="320"] { 67 | font-size: 25PX !important; 68 | } 69 | } 70 | 71 | // 25.875 = 414*20/320 (iPhone 6 Plus) 72 | @media only screen and (min-width: 414px) { 73 | html[data-rem="320"] { 74 | font-size: 25.875PX !important; 75 | } 76 | } 77 | 78 | // 30 = 30 (iPad) 79 | @media only screen and (min-width: 480px) { 80 | html[data-rem="320"] { 81 | font-size: 30PX !important; 82 | } 83 | } 84 | 85 | // 20*100/320 = 6.25 以 320 宽度为基准动态计算 86 | //html[data-rem="320"] { 87 | // font-size: 6.25vw; 88 | //} -------------------------------------------------------------------------------- /project-webpack/src/css/lib/lib-reset.less: -------------------------------------------------------------------------------- 1 | /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Prevent adjustments of font size after orientation changes in IE and iOS. 6 | */ 7 | 8 | html { 9 | font-family: sans-serif; /* 1 */ 10 | -ms-text-size-adjust: 100%; /* 2 */ 11 | -webkit-text-size-adjust: 100%; /* 2 */ 12 | } 13 | 14 | /** 15 | * Remove the margin in all browsers (opinionated). 16 | */ 17 | 18 | body { 19 | margin: 0; 20 | } 21 | 22 | /* HTML5 display definitions 23 | ========================================================================== */ 24 | 25 | /** 26 | * Add the correct display in IE 9-. 27 | * 1. Add the correct display in Edge, IE, and Firefox. 28 | * 2. Add the correct display in IE. 29 | */ 30 | 31 | article, 32 | aside, 33 | details, /* 1 */ 34 | figcaption, 35 | figure, 36 | footer, 37 | header, 38 | main, /* 2 */ 39 | menu, 40 | nav, 41 | section, 42 | summary { /* 1 */ 43 | display: block; 44 | } 45 | 46 | /** 47 | * Add the correct display in IE 9-. 48 | */ 49 | 50 | audio, 51 | canvas, 52 | progress, 53 | video { 54 | display: inline-block; 55 | } 56 | 57 | /** 58 | * Add the correct display in iOS 4-7. 59 | */ 60 | 61 | audio:not([controls]) { 62 | display: none; 63 | height: 0; 64 | } 65 | 66 | /** 67 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 68 | */ 69 | 70 | progress { 71 | vertical-align: baseline; 72 | } 73 | 74 | /** 75 | * Add the correct display in IE 10-. 76 | * 1. Add the correct display in IE. 77 | */ 78 | 79 | template, /* 1 */ 80 | [hidden] { 81 | display: none; 82 | } 83 | 84 | /* Links 85 | ========================================================================== */ 86 | 87 | /** 88 | * 1. Remove the gray background on active links in IE 10. 89 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 90 | */ 91 | 92 | a { 93 | background-color: transparent; /* 1 */ 94 | -webkit-text-decoration-skip: objects; /* 2 */ 95 | } 96 | 97 | /** 98 | * Remove the outline on focused links when they are also active or hovered 99 | * in all browsers (opinionated). 100 | */ 101 | 102 | a:active, 103 | a:hover { 104 | outline-width: 0; 105 | } 106 | 107 | /* Text-level semantics 108 | ========================================================================== */ 109 | 110 | /** 111 | * 1. Remove the bottom border in Firefox 39-. 112 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 113 | */ 114 | 115 | abbr[title] { 116 | border-bottom: none; /* 1 */ 117 | text-decoration: underline; /* 2 */ 118 | text-decoration: underline dotted; /* 2 */ 119 | } 120 | 121 | /** 122 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 123 | */ 124 | 125 | b, 126 | strong { 127 | font-weight: inherit; 128 | } 129 | 130 | /** 131 | * Add the correct font weight in Chrome, Edge, and Safari. 132 | */ 133 | 134 | b, 135 | strong { 136 | font-weight: bolder; 137 | } 138 | 139 | /** 140 | * Add the correct font style in Android 4.3-. 141 | */ 142 | 143 | dfn { 144 | font-style: italic; 145 | } 146 | 147 | /** 148 | * Correct the font size and margin on `h1` elements within `section` and 149 | * `article` contexts in Chrome, Firefox, and Safari. 150 | */ 151 | 152 | h1 { 153 | font-size: 2em; 154 | margin: 0.67em 0; 155 | } 156 | 157 | /** 158 | * Add the correct background and color in IE 9-. 159 | */ 160 | 161 | mark { 162 | background-color: #ff0; 163 | color: #000; 164 | } 165 | 166 | /** 167 | * Add the correct font size in all browsers. 168 | */ 169 | 170 | small { 171 | font-size: 80%; 172 | } 173 | 174 | /** 175 | * Prevent `sub` and `sup` elements from affecting the line height in 176 | * all browsers. 177 | */ 178 | 179 | sub, 180 | sup { 181 | font-size: 75%; 182 | line-height: 0; 183 | position: relative; 184 | vertical-align: baseline; 185 | } 186 | 187 | sub { 188 | bottom: -0.25em; 189 | } 190 | 191 | sup { 192 | top: -0.5em; 193 | } 194 | 195 | /* Embedded content 196 | ========================================================================== */ 197 | 198 | /** 199 | * Remove the border on images inside links in IE 10-. 200 | */ 201 | 202 | img { 203 | border-style: none; 204 | } 205 | 206 | /** 207 | * Hide the overflow in IE. 208 | */ 209 | 210 | svg:not(:root) { 211 | overflow: hidden; 212 | } 213 | 214 | /* Grouping content 215 | ========================================================================== */ 216 | 217 | /** 218 | * 1. Correct the inheritance and scaling of font size in all browsers. 219 | * 2. Correct the odd `em` font sizing in all browsers. 220 | */ 221 | 222 | code, 223 | kbd, 224 | pre, 225 | samp { 226 | font-family: monospace, monospace; /* 1 */ 227 | font-size: 1em; /* 2 */ 228 | } 229 | 230 | /** 231 | * Add the correct margin in IE 8. 232 | */ 233 | 234 | figure { 235 | margin: 1em 40px; 236 | } 237 | 238 | /** 239 | * 1. Add the correct box sizing in Firefox. 240 | * 2. Show the overflow in Edge and IE. 241 | */ 242 | 243 | hr { 244 | box-sizing: content-box; /* 1 */ 245 | height: 0; /* 1 */ 246 | overflow: visible; /* 2 */ 247 | } 248 | 249 | /* Forms 250 | ========================================================================== */ 251 | 252 | /** 253 | * 1. Change font properties to `inherit` in all browsers (opinionated). 254 | * 2. Remove the margin in Firefox and Safari. 255 | */ 256 | 257 | button, 258 | input, 259 | select, 260 | textarea { 261 | font: inherit; /* 1 */ 262 | margin: 0; /* 2 */ 263 | } 264 | 265 | /** 266 | * Restore the font weight unset by the previous rule. 267 | */ 268 | 269 | optgroup { 270 | font-weight: bold; 271 | } 272 | 273 | /** 274 | * Show the overflow in IE. 275 | * 1. Show the overflow in Edge. 276 | */ 277 | 278 | button, 279 | input { /* 1 */ 280 | overflow: visible; 281 | } 282 | 283 | /** 284 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 285 | * 1. Remove the inheritance of text transform in Firefox. 286 | */ 287 | 288 | button, 289 | select { /* 1 */ 290 | text-transform: none; 291 | } 292 | 293 | /** 294 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 295 | * controls in Android 4. 296 | * 2. Correct the inability to style clickable types in iOS and Safari. 297 | */ 298 | 299 | button, 300 | html [type="button"], /* 1 */ 301 | [type="reset"], 302 | [type="submit"] { 303 | -webkit-appearance: button; /* 2 */ 304 | } 305 | 306 | /** 307 | * Remove the inner border and padding in Firefox. 308 | */ 309 | 310 | button::-moz-focus-inner, 311 | [type="button"]::-moz-focus-inner, 312 | [type="reset"]::-moz-focus-inner, 313 | [type="submit"]::-moz-focus-inner { 314 | border-style: none; 315 | padding: 0; 316 | } 317 | 318 | /** 319 | * Restore the focus styles unset by the previous rule. 320 | */ 321 | 322 | button:-moz-focusring, 323 | [type="button"]:-moz-focusring, 324 | [type="reset"]:-moz-focusring, 325 | [type="submit"]:-moz-focusring { 326 | outline: 1px dotted ButtonText; 327 | } 328 | 329 | /** 330 | * Change the border, margin, and padding in all browsers (opinionated). 331 | */ 332 | 333 | fieldset { 334 | border: 1px solid #c0c0c0; 335 | margin: 0 2px; 336 | padding: 0.35em 0.625em 0.75em; 337 | } 338 | 339 | /** 340 | * 1. Correct the text wrapping in Edge and IE. 341 | * 2. Correct the color inheritance from `fieldset` elements in IE. 342 | * 3. Remove the padding so developers are not caught out when they zero out 343 | * `fieldset` elements in all browsers. 344 | */ 345 | 346 | legend { 347 | box-sizing: border-box; /* 1 */ 348 | color: inherit; /* 2 */ 349 | display: table; /* 1 */ 350 | max-width: 100%; /* 1 */ 351 | padding: 0; /* 3 */ 352 | white-space: normal; /* 1 */ 353 | } 354 | 355 | /** 356 | * Remove the default vertical scrollbar in IE. 357 | */ 358 | 359 | textarea { 360 | overflow: auto; 361 | } 362 | 363 | /** 364 | * 1. Add the correct box sizing in IE 10-. 365 | * 2. Remove the padding in IE 10-. 366 | */ 367 | 368 | [type="checkbox"], 369 | [type="radio"] { 370 | box-sizing: border-box; /* 1 */ 371 | padding: 0; /* 2 */ 372 | } 373 | 374 | /** 375 | * Correct the cursor style of increment and decrement buttons in Chrome. 376 | */ 377 | 378 | [type="number"]::-webkit-inner-spin-button, 379 | [type="number"]::-webkit-outer-spin-button { 380 | height: auto; 381 | } 382 | 383 | /** 384 | * 1. Correct the odd appearance in Chrome and Safari. 385 | * 2. Correct the outline style in Safari. 386 | */ 387 | 388 | [type="search"] { 389 | -webkit-appearance: textfield; /* 1 */ 390 | outline-offset: -2px; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. 395 | */ 396 | 397 | [type="search"]::-webkit-search-cancel-button, 398 | [type="search"]::-webkit-search-decoration { 399 | -webkit-appearance: none; 400 | } 401 | 402 | /** 403 | * Correct the text style of placeholders in Chrome, Edge, and Safari. 404 | */ 405 | 406 | ::-webkit-input-placeholder { 407 | color: inherit; 408 | opacity: 0.54; 409 | } 410 | 411 | /** 412 | * 1. Correct the inability to style clickable types in iOS and Safari. 413 | * 2. Change font properties to `inherit` in Safari. 414 | */ 415 | 416 | ::-webkit-file-upload-button { 417 | -webkit-appearance: button; /* 1 */ 418 | font: inherit; /* 2 */ 419 | } -------------------------------------------------------------------------------- /project-webpack/src/css/lib/prism-github-theme.less: -------------------------------------------------------------------------------- 1 | /** 2 | * Github-like theme for Prism.js 3 | * @author Luke Askew http://github.com/lukeaskew 4 | */ 5 | code, 6 | code[class*='language-'], 7 | pre[class*='language-'] { 8 | color: #333; 9 | text-align: left; 10 | white-space: pre; 11 | word-spacing: normal; 12 | tab-size: 4; 13 | hyphens: none; 14 | font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; 15 | line-height: 1.4; 16 | direction: ltr; 17 | cursor: text; 18 | } 19 | 20 | pre[class*='language-'] { 21 | overflow: auto; 22 | margin: 1em 0; 23 | padding: 1.2em; 24 | border-radius: 3px; 25 | font-size: 85%; 26 | } 27 | 28 | p code, 29 | li code, 30 | table code { 31 | margin: 0; 32 | border-radius: 3px; 33 | padding: 0.2em 0; 34 | font-size: 85%; 35 | } 36 | p code:before, p code:after, 37 | li code:before, 38 | li code:after, 39 | table code:before, 40 | table code:after { 41 | letter-spacing: -0.2em; 42 | content: '\00a0'; 43 | } 44 | 45 | code, 46 | :not(pre) > code[class*='language-'], 47 | pre[class*='language-'] { 48 | background: #f7f7f7; 49 | } 50 | 51 | :not(pre) > code[class*='language-'] { 52 | padding: 0.1em; 53 | border-radius: 0.3em; 54 | } 55 | 56 | .token.comment, .token.prolog, .token.doctype, .token.cdata { 57 | color: #969896; 58 | } 59 | .token.punctuation, .token.string, .token.atrule, .token.attr-value { 60 | color: #183691; 61 | } 62 | .token.property, .token.tag { 63 | color: #63a35c; 64 | } 65 | .token.boolean, .token.number { 66 | color: #0086b3; 67 | } 68 | .token.selector, .token.attr-name, .token.attr-value .punctuation:first-child, .token.keyword, .token.regex, .token.important { 69 | color: #a71d5d; 70 | } 71 | .token.operator, .token.entity, .token.url, .language-css .token.string { 72 | color: #a71d5d; 73 | } 74 | .token.entity { 75 | cursor: help; 76 | } 77 | .namespace { 78 | opacity: 0.7; 79 | } -------------------------------------------------------------------------------- /project-webpack/src/css/lib/prism.less: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+json+less+sass+scss&plugins=line-highlight */ 2 | /** 3 | * prism.js default theme for JavaScript, CSS and HTML 4 | * Based on dabblet (http://dabblet.com) 5 | * @author Lea Verou 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: black; 11 | background: none; 12 | text-shadow: 0 1px white; 13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | word-wrap: normal; 19 | line-height: 1.5; 20 | 21 | -moz-tab-size: 4; 22 | -o-tab-size: 4; 23 | tab-size: 4; 24 | 25 | -webkit-hyphens: none; 26 | -moz-hyphens: none; 27 | -ms-hyphens: none; 28 | hyphens: none; 29 | } 30 | 31 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 32 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 33 | text-shadow: none; 34 | background: #b3d4fc; 35 | } 36 | 37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 38 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 39 | text-shadow: none; 40 | background: #b3d4fc; 41 | } 42 | 43 | @media print { 44 | code[class*="language-"], 45 | pre[class*="language-"] { 46 | text-shadow: none; 47 | } 48 | } 49 | 50 | /* Code blocks */ 51 | pre[class*="language-"] { 52 | padding: 1em; 53 | margin: .5em 0; 54 | overflow: auto; 55 | } 56 | 57 | :not(pre) > code[class*="language-"], 58 | pre[class*="language-"] { 59 | background: #f5f2f0; 60 | } 61 | 62 | /* Inline code */ 63 | :not(pre) > code[class*="language-"] { 64 | padding: .1em; 65 | border-radius: .3em; 66 | white-space: normal; 67 | } 68 | 69 | .token.comment, 70 | .token.prolog, 71 | .token.doctype, 72 | .token.cdata { 73 | color: slategray; 74 | } 75 | 76 | .token.punctuation { 77 | color: #999; 78 | } 79 | 80 | .namespace { 81 | opacity: .7; 82 | } 83 | 84 | .token.property, 85 | .token.tag, 86 | .token.boolean, 87 | .token.number, 88 | .token.constant, 89 | .token.symbol, 90 | .token.deleted { 91 | color: #905; 92 | } 93 | 94 | .token.selector, 95 | .token.attr-name, 96 | .token.string, 97 | .token.char, 98 | .token.builtin, 99 | .token.inserted { 100 | color: #690; 101 | } 102 | 103 | .token.operator, 104 | .token.entity, 105 | .token.url, 106 | .language-css .token.string, 107 | .style .token.string { 108 | color: #a67f59; 109 | background: hsla(0, 0%, 100%, .5); 110 | } 111 | 112 | .token.atrule, 113 | .token.attr-value, 114 | .token.keyword { 115 | color: #07a; 116 | } 117 | 118 | .token.function { 119 | color: #DD4A68; 120 | } 121 | 122 | .token.regex, 123 | .token.important, 124 | .token.variable { 125 | color: #e90; 126 | } 127 | 128 | .token.important, 129 | .token.bold { 130 | font-weight: bold; 131 | } 132 | .token.italic { 133 | font-style: italic; 134 | } 135 | 136 | .token.entity { 137 | cursor: help; 138 | } 139 | 140 | pre[data-line] { 141 | position: relative; 142 | padding: 1em 0 1em 3em; 143 | } 144 | 145 | .line-highlight { 146 | position: absolute; 147 | left: 0; 148 | right: 0; 149 | padding: inherit 0; 150 | margin-top: 1em; /* Same as .prism’s padding-top */ 151 | 152 | background: hsla(24, 20%, 50%,.08); 153 | background: -moz-linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 154 | background: -webkit-linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 155 | background: -o-linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 156 | background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 157 | 158 | pointer-events: none; 159 | 160 | line-height: inherit; 161 | white-space: pre; 162 | } 163 | 164 | .line-highlight:before, 165 | .line-highlight[data-end]:after { 166 | content: attr(data-start); 167 | position: absolute; 168 | top: .4em; 169 | left: .6em; 170 | min-width: 1em; 171 | padding: 0 .5em; 172 | background-color: hsla(24, 20%, 50%,.4); 173 | color: hsl(24, 20%, 95%); 174 | font: bold 65%/1.5 sans-serif; 175 | text-align: center; 176 | vertical-align: .3em; 177 | border-radius: 999px; 178 | text-shadow: none; 179 | box-shadow: 0 1px white; 180 | } 181 | 182 | .line-highlight[data-end]:after { 183 | content: attr(data-end); 184 | top: auto; 185 | bottom: .4em; 186 | } 187 | 188 | -------------------------------------------------------------------------------- /project-webpack/src/css/mod-discovery.less: -------------------------------------------------------------------------------- 1 | // 微信-发现 icon 模块 2 | .mod-discovery{ 3 | text-align: center; 4 | } 5 | .mod-discovery__list{ 6 | 7 | } 8 | .mod-discovery__icon{ 9 | width: 25px; 10 | height: 25px; 11 | display: inline-block; 12 | margin: 0 5px; 13 | } 14 | .mod-discovery__icon_moment{ 15 | background-image: url(../slice/mod-discovery/icon-moment.png); 16 | } 17 | .mod-discovery__icon_qrcode{ 18 | background-image: url(../slice/mod-discovery/icon-qrcode.png); 19 | } 20 | .mod-discovery__icon_shake{ 21 | background-image: url(../slice/mod-discovery/icon-shake.png); 22 | } 23 | .mod-discovery__icon_locaitonservice{ 24 | background-image: url(../slice/mod-discovery/icon-locaitonservice.png); 25 | } 26 | .mod-discovery__icon_bottle{ 27 | background-image: url(../slice/mod-discovery/icon-bottle.png); 28 | } 29 | .mod-discovery__icon_jd{ 30 | background-image: url(../slice/mod-discovery/icon-jd.png); 31 | } 32 | .mod-discovery__icon-game{ 33 | background-image: url(../slice/mod-discovery/icon-game.png); 34 | } -------------------------------------------------------------------------------- /project-webpack/src/css/mod-example.less: -------------------------------------------------------------------------------- 1 | // 范例模块结构 2 | .mod-example{ 3 | text-align: center; 4 | margin-bottom: 40px; 5 | } 6 | .mod-example__title{ 7 | display: inline-block; 8 | font-size: 18px; 9 | text-align: center; 10 | border-bottom: 1px solid #409224; 11 | padding: 5px; 12 | margin-bottom: 20px; 13 | color: #326532; 14 | text-decoration: none; 15 | } 16 | .mod-example__preview{ 17 | border: 2px dashed #ddd; 18 | margin: 0 50px; 19 | padding: 20px; 20 | margin-bottom: 20px; 21 | width: auto; 22 | height: auto; 23 | background-image: url(../img/bg-body.png); 24 | background-repeat: repeat; 25 | } 26 | .mod-example__notes{ 27 | background-color: rgba(237,223,0,0.04); 28 | display: table; 29 | margin: 0 auto; 30 | border-radius: 5px; 31 | padding: 10px; 32 | font-size: 12px; 33 | line-height: 20px; 34 | text-align: left; 35 | color: #888; 36 | margin-bottom: 20px; 37 | border: 1px solid rgba(237,223,0,0.24); 38 | } 39 | .mod-example__doc{ 40 | 41 | } 42 | .mod-example__doc-title{ 43 | background: #eff4ef; 44 | padding: 5px 0; 45 | color: #326532; 46 | } 47 | .mod-example__show{ 48 | overflow: hidden; 49 | margin: 0 50px; 50 | font-size: 16px; 51 | } 52 | .mod-example__before{ 53 | width: 49%; 54 | float: left; 55 | } 56 | .mod-example__after{ 57 | width: 49%; 58 | float: right; 59 | } -------------------------------------------------------------------------------- /project-webpack/src/css/mod-footer.less: -------------------------------------------------------------------------------- 1 | // footer 2 | .mod-footer{ 3 | font-size: 16px; 4 | text-align: center; 5 | overflow: hidden; 6 | } 7 | .mod-footer__link{ 8 | color: #27c946; 9 | display: inline-block; 10 | text-decoration: none; 11 | padding-bottom:2px; 12 | border-bottom:1px solid #27c946; 13 | margin-bottom: 50px; 14 | } -------------------------------------------------------------------------------- /project-webpack/src/css/mod-header.less: -------------------------------------------------------------------------------- 1 | .mod-header{ 2 | text-align: center; 3 | margin-top: 40px; 4 | padding-bottom: 20px; 5 | margin-bottom: 20px; 6 | border-bottom: 1px solid #eee; 7 | } 8 | .mod-header__logo{ 9 | display: block; 10 | width: 100px; 11 | height: 100px; 12 | background-size: 100px; 13 | text-indent: -9999px; 14 | margin: 0 auto 20px; 15 | background-image: url(../img/weflow-logo.png); 16 | } 17 | .mod-header__title{ 18 | display: block; 19 | color: #065315; 20 | text-decoration: none; 21 | font-size: 20px; 22 | margin-bottom: 20px; 23 | } 24 | .mod-header__desc{ 25 | color: #999; 26 | font-size:14px; 27 | } -------------------------------------------------------------------------------- /project-webpack/src/css/mod-social-media.less: -------------------------------------------------------------------------------- 1 | // 微信-分享 icon 模块 2 | .mod-social-media{ 3 | text-align: center; 4 | } 5 | .mod-social-media__list{ 6 | 7 | } 8 | .mod-social-media__icon{ 9 | width: 90px; 10 | height: 90px; 11 | display: inline-block; 12 | margin: 0 5px; 13 | background-color: #fff; 14 | .rounded(10px); 15 | } 16 | .mod-social-media__icon_share{ 17 | background-image: url(../slice/mod-social-media/icon-share.png); 18 | } 19 | .mod-social-media__icon_moment{ 20 | background-image: url(../slice/mod-social-media/icon-moment.png); 21 | } 22 | .mod-social-media__icon_favadd{ 23 | background-image: url(../slice/mod-social-media/icon-favadd.png); 24 | } 25 | .mod-social-media__icon_copy{ 26 | background-image: url(../slice/mod-social-media/icon-copy.png); 27 | } 28 | .mod-social-media__icon_refresh{ 29 | background-image: url(../slice/mod-social-media/icon-refresh.png); 30 | } -------------------------------------------------------------------------------- /project-webpack/src/css/mod-sticker.less: -------------------------------------------------------------------------------- 1 | // 表情模块 2 | .mod-sticker{ 3 | 4 | } 5 | .mod-sticker__list{ 6 | 7 | } 8 | .mod-sticker__icon { 9 | width: 50px; 10 | height: 50px; 11 | display: inline-block; 12 | background-size: 50px; 13 | margin: 0 5px; 14 | } 15 | .mod-sticker__icon_1{ 16 | background-image: url(../img/mod-sticker/1.gif); 17 | } 18 | .mod-sticker__icon_2{ 19 | background-image: url(../img/mod-sticker/2.gif); 20 | } 21 | .mod-sticker__icon_3{ 22 | width: 50px; 23 | height: 50px; 24 | background-image: url(../img/mod-sticker/3.gif); 25 | } 26 | .mod-sticker__icon_4{ 27 | width: 50px; 28 | height: 50px; 29 | background-image: url(../img/mod-sticker/4.gif); 30 | } -------------------------------------------------------------------------------- /project-webpack/src/css/style-doc.less: -------------------------------------------------------------------------------- 1 | /** 2 | * @name: tmt-workflow example doc 3 | * @description: Examples for tmt-workflow 4 | * @author: weixin 5 | */ 6 | 7 | // 引入库文件 8 | @import "./lib/lib-mixins"; 9 | @import "./lib/lib-reset"; 10 | 11 | // 引入 REM 解决方案依赖 12 | // 调用示例 13 | @import "./lib/lib-rem"; 14 | 15 | // 引入 Less 依赖文件 16 | @import "mod-header"; 17 | @import "mod-example"; 18 | @import "mod-discovery"; 19 | // @import "mod-social-media"; 20 | // 不调用可不引入依赖, 精简 21 | 22 | @import "mod-sticker"; 23 | @import "mod-footer"; 24 | 25 | // 代码高亮 26 | @import "./lib/prism"; 27 | @import "./lib/prism-github-theme"; 28 | 29 | -------------------------------------------------------------------------------- /project-webpack/src/css/style-index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * @name: tmt-workflow example 3 | * @description: Examples for tmt-workflow 4 | * @author: weixin 5 | */ 6 | 7 | /* 引入库文件 */ 8 | @import "./lib/lib-mixins"; 9 | @import "./lib/lib-reset"; 10 | 11 | // 引入 REM 解决方案依赖 12 | // 调用示例 13 | @import "./lib/lib-rem"; 14 | 15 | /* 引入 Less 依赖文件 */ 16 | @import "mod-header"; 17 | @import "mod-example"; 18 | @import "mod-discovery"; 19 | @import "mod-social-media"; 20 | @import "mod-sticker"; 21 | @import "mod-footer"; -------------------------------------------------------------------------------- /project-webpack/src/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tmt-workflow Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 23 | 24 | 25 | 26 |
27 | 28 | tmt-workflow Demo 29 |
执行 开发(dev)/编译(dist) 任务后 [查看源码]
30 |
31 | 32 |
33 |
雪碧图合并 (支持多组)
34 |
35 |
36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
45 |
46 |
47 | 48 |
49 |
50 |
51 | 52 | 53 | 54 | 55 | 56 |
57 |
58 |
59 | 60 |
61 | 62 |
63 |
普通图片调用
64 |
65 |
66 |
67 | 68 | 69 | 70 | 71 |
72 |
73 |
74 |
75 | 76 |
77 |
SVG调用 - 作为背景图
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 87 |
88 |
SVG调用 - 在HTML使用
89 |
90 |
91 |
92 |
HTML直接引用
93 | 94 |
95 |
96 |
内联到HTML 动画需求
97 |
在src中链接的最后加?i
98 | 99 |
100 |
101 |
合并SYMBOL 需求
102 |
在src中链接的最后加?s
103 | 104 | 105 | 106 | 107 |
108 |
109 |
110 |
111 | 112 | 113 | 114 |
115 | 116 | <% var text = "点击查看更多源码说明" %> 117 | <%-text %> 118 |
119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /project-webpack/src/img/bg-body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/img/bg-body.png -------------------------------------------------------------------------------- /project-webpack/src/img/mod-sticker/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/img/mod-sticker/1.gif -------------------------------------------------------------------------------- /project-webpack/src/img/mod-sticker/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/img/mod-sticker/2.gif -------------------------------------------------------------------------------- /project-webpack/src/img/mod-sticker/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/img/mod-sticker/3.gif -------------------------------------------------------------------------------- /project-webpack/src/img/mod-sticker/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/img/mod-sticker/4.gif -------------------------------------------------------------------------------- /project-webpack/src/img/weflow-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/img/weflow-logo.png -------------------------------------------------------------------------------- /project-webpack/src/js/index.js: -------------------------------------------------------------------------------- 1 | 2 | let name = 'ES2015'; 3 | let output = `${name} test`; 4 | 5 | console.log(output); -------------------------------------------------------------------------------- /project-webpack/src/manifest.json: -------------------------------------------------------------------------------- 1 | {"css/style-doc.d41d8cd9.css":"d41d8cd98f00b204e9800998ecf8427e","css/style-doc.d41d8cd9.webp.css":"d41d8cd98f00b204e9800998ecf8427e","css/style-index.d4842ae1.css":"3617271dd19a6f47d5eced8978e17d4c","css/style-index.d4842ae1.webp.css":"705fdccdc760c2c9ae937f313cc6836e","html/doc.html":"6f09107e89489670dd7e1356de7cb8e4","html/index.html":"fcf24811839aac5bf4a8726245d21391","img/bg-body.131a8d26.png":"709c6bc186c41c5e34d708b2448c3fe7","img/bg-body.131a8d26.webp":"fd95b388510d6b841a1afc211540207b","img/mod-sticker/1.91eb60b6.gif":"73581dc89d689cc238c618b7120804f6","img/mod-sticker/2.d205b06b.gif":"01fd08a7618087c1a0386c590b7df5c4","img/mod-sticker/3.8320284e.gif":"ef60bccb1d8fd1011ff95cffbef8a0c2","img/mod-sticker/4.5e721fbf.gif":"4a3da613dff25abcbfba9f690ba9925f","img/weflow-logo.acd32f66.png":"9ad4f784dac94bf16919d9a21cc95029","img/weflow-logo.acd32f66.webp":"3a9827bc496455c340a5842abb40493c","js/lib/zepto-touch.0944b1b2.js":"0944b1b21db838efa4d6100cba7a330d","js/lib/zepto.min.a8899b38.js":"a8899b38a1d2bff74e5e104a923cda43","sprite/style-index.b91f7ae0.png":"aa6c248216e3ddd2e926e6b057ab34ab","sprite/style-index.b91f7ae0.webp":"b502f7c999f686833e4437f27c873c54","sprite/style-index@2x.b983005a.png":"c21e07292df2f865f291f9c76011d620","sprite/style-index@2x.b983005a.webp":"24cd5195f4eb6fb8bff3a0864f60bb4c"} -------------------------------------------------------------------------------- /project-webpack/src/media/bgm.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/media/bgm.mp3 -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-discovery/icon-bottle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-discovery/icon-bottle.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-discovery/icon-bottle@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-discovery/icon-bottle@2x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-discovery/icon-game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-discovery/icon-game.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-discovery/icon-game@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-discovery/icon-game@2x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-discovery/icon-jd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-discovery/icon-jd.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-discovery/icon-jd@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-discovery/icon-jd@2x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-discovery/icon-locaitonservice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-discovery/icon-locaitonservice.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-discovery/icon-locaitonservice@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-discovery/icon-locaitonservice@2x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-discovery/icon-moment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-discovery/icon-moment.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-discovery/icon-moment@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-discovery/icon-moment@2x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-discovery/icon-qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-discovery/icon-qrcode.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-discovery/icon-qrcode@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-discovery/icon-qrcode@2x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-discovery/icon-shake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-discovery/icon-shake.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-discovery/icon-shake@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-discovery/icon-shake@2x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-social-media/icon-copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-social-media/icon-copy.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-social-media/icon-copy@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-social-media/icon-copy@2x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-social-media/icon-copy@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-social-media/icon-copy@3x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-social-media/icon-favadd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-social-media/icon-favadd.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-social-media/icon-favadd@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-social-media/icon-favadd@2x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-social-media/icon-favadd@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-social-media/icon-favadd@3x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-social-media/icon-moment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-social-media/icon-moment.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-social-media/icon-moment@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-social-media/icon-moment@2x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-social-media/icon-moment@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-social-media/icon-moment@3x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-social-media/icon-refresh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-social-media/icon-refresh.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-social-media/icon-refresh@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-social-media/icon-refresh@2x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-social-media/icon-refresh@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-social-media/icon-refresh@3x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-social-media/icon-share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-social-media/icon-share.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-social-media/icon-share@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-social-media/icon-share@2x.png -------------------------------------------------------------------------------- /project-webpack/src/slice/mod-social-media/icon-share@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project-webpack/src/slice/mod-social-media/icon-share@3x.png -------------------------------------------------------------------------------- /project-webpack/src/svg/svgicon/12w.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-webpack/src/svg/svgicon/4g.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-webpack/src/svg/svgicon/bl.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-webpack/src/svg/svgicon/ss.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-webpack/src/svg/svgicon/translate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 翻转的icon 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /project-webpack/src/svg/svgicon/ts.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project-webpack/src/svg/svglogo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 6 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /project-webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var path = require('path'); 3 | 4 | module.exports = { 5 | context: './src', 6 | entry: { 7 | 'index': './js/index.js', 8 | 'lib/prism': './js/lib/prism.js' 9 | }, 10 | output: { 11 | path:__dirname, 12 | filename: '[name].js' 13 | }, 14 | module: { 15 | loaders: [ 16 | { 17 | test: /\.js$/, 18 | exclude: /(node_modules|bower_components)/, 19 | loader: 'babel', // 'babel-loader' is also a legal name to reference 20 | query: { 21 | presets: ['es2015', 'stage-2'] 22 | } 23 | } 24 | ] 25 | }, 26 | resolveLoader: { 27 | root: path.resolve(__dirname, '../', 'node_modules') 28 | }, 29 | plugins: [] 30 | } 31 | -------------------------------------------------------------------------------- /project/.tmtworkflowrc: -------------------------------------------------------------------------------- 1 | { 2 | "ftp": { 3 | "host": "xx.xx.xx.xx", 4 | "port": "8021", 5 | "user": "tmt", 6 | "pass": "password", 7 | "remotePath": "remotePath", 8 | "includeHtml": true 9 | //ftp 上传是否包含 html 10 | }, 11 | "sftp": { 12 | "host": "xx.xx.xx.xx", 13 | "port": "xx", 14 | "user": "tmt", 15 | "password": "password", 16 | "remotePath": "", 17 | "includeHtml": true 18 | }, 19 | "livereload": { 20 | "available": true, 21 | //开启自动刷新 22 | "port": 8080, 23 | "startPath": "html/TmTIndex.html" 24 | }, 25 | //路径相对于 tasks/plugins 目录 26 | "plugins": { 27 | "build_devAfter": [ 28 | "TmTIndex" 29 | ], 30 | "build_distAfter": [], 31 | "ftpAfter": [ 32 | "ftp" 33 | ] 34 | }, 35 | "lazyDir": [ 36 | "../slice" 37 | ], 38 | //gulp-lazyImageCSS 寻找目录(https://github.com/weixin/gulp-lazyimagecss) 39 | 40 | "supportWebp": false, 41 | "supportREM": true, 42 | "supportChanged": false, 43 | "reversion": true, 44 | "SVGGracefulDegradation": true 45 | } 46 | -------------------------------------------------------------------------------- /project/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var fs = require('fs'); 3 | var path = require('path'); 4 | 5 | //注册 6 | var deep = 3; 7 | run_tasks('_tasks'); 8 | 9 | function run_tasks(tasks_path) { 10 | if (--deep < 0) { 11 | throw new Error('something wrong in require tasks!'); 12 | return; 13 | } 14 | 15 | tasks_path = path.join('../', tasks_path); 16 | 17 | if (fs.existsSync(tasks_path)) { 18 | require(tasks_path)(gulp); 19 | } else { 20 | run_tasks(tasks_path); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /project/src/css/lib/lib-mixins.less: -------------------------------------------------------------------------------- 1 | //---------------------------- 2 | // 3 | // mixins.less v0.1.5 4 | // http://mixinsless.com/ 5 | // Reuse snippets & Cross-browser private properties snippets. 6 | //---------------------------- 7 | 8 | // Border radius with the same argument 9 | // ------------------------- 10 | .rounded(@radius: 3px) { 11 | -webkit-border-radius:@radius; 12 | -moz-border-radius:@radius; 13 | border-radius:@radius; 14 | -webkit-background-clip:padding-box; 15 | -moz-background-clip:padding-box; 16 | background-clip:padding-box; 17 | } 18 | 19 | // Border radius with different arguments 20 | // ------------------------- 21 | .border-radius(@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0) { 22 | -webkit-border-top-left-radius:@topleft; 23 | -webkit-border-top-right-radius:@topright; 24 | -webkit-border-bottom-right-radius:@bottomright; 25 | -webkit-border-bottom-left-radius:@bottomleft; 26 | -moz-border-radius-topleft:@topleft; 27 | -moz-border-radius-topright:@topright; 28 | -moz-border-radius-bottomright:@bottomright; 29 | -moz-border-radius-bottomleft:@bottomleft; 30 | border-top-left-radius:@topleft; 31 | border-top-right-radius:@topright; 32 | border-bottom-right-radius:@bottomright; 33 | border-bottom-left-radius:@bottomleft; 34 | -webkit-background-clip:padding-box; 35 | -moz-background-clip:padding-box; 36 | background-clip:padding-box; 37 | } 38 | 39 | // Background size 40 | // ------------------------- 41 | .background-size(@size) { 42 | -webkit-background-size:@size; 43 | -moz-background-size:@size; 44 | -o-background-size:@size; 45 | background-size:@size; 46 | } 47 | 48 | // Opacity 49 | // ------------------------- 50 | .opacity(@opacity) { 51 | opacity:@opacity; 52 | @opacityIE : @opacity * 100; 53 | filter:~"alpha(opacity=@{opacityIE})"; 54 | } 55 | 56 | // Appearance 57 | // ------------------------- 58 | .appearance(@appearance:none) { 59 | -webkit-appearance:@appearance; 60 | appearance:@appearance; 61 | } 62 | 63 | // Gradient 64 | // ------------------------- 65 | .gradient(@start: #000000, @stop: #FFFFFF) { 66 | background:(@start + @stop)/2; 67 | background:-webkit-gradient(linear, left top, left bottom, color-stop(0, @start), color-stop(1, @stop)); 68 | background:-moz-linear-gradient(center top, @start 0%, @stop 100%); 69 | } 70 | 71 | // Box shadow 72 | // ------------------------- 73 | .drop-shadow(@horizontal: 0, @vertical: 1px, @blur: 2px, @alpha: 0.1) { 74 | -webkit-box-shadow:@horizontal @vertical @blur rgba(0, 0, 0, @alpha); 75 | -moz-box-shadow:@horizontal @vertical @blur rgba(0, 0, 0, @alpha); 76 | box-shadow:@horizontal @vertical @blur rgba(0, 0, 0, @alpha); 77 | } 78 | 79 | // Box shadow inset 80 | // ------------------------- 81 | .inner-shadow(@horizontal: 0, @vertical: 1px, @blur: 2px, @alpha: 0.4) { 82 | -webkit-box-shadow:inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); 83 | -moz-box-shadow:inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); 84 | box-shadow:inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); 85 | } 86 | 87 | // Box inner border 88 | // ------------------------- 89 | .inner-border(@width: 1px, @color: #000) { 90 | -webkit-box-shadow:inset 0 0 0 @width @color; 91 | -moz-box-shadow:inset 0 0 0 @width @color; 92 | box-shadow:inset 0 0 0 @width @color; 93 | } 94 | 95 | // Box shadow default 96 | // ------------------------- 97 | .box-shadow(@arguments) { 98 | -webkit-box-shadow:@arguments; 99 | -moz-box-shadow:@arguments; 100 | box-shadow:@arguments; 101 | } 102 | 103 | // Animation 104 | // ------------------------- 105 | .animation(@animation) { 106 | -webkit-animation:@animation; 107 | -moz-animation:@animation; 108 | animation:@animation; 109 | } 110 | 111 | .transition(@transition) { 112 | -webkit-transition:@transition; 113 | -moz-transition:@transition; 114 | -o-transition:@transition; 115 | transition:@transition; 116 | } 117 | .transition-delay(@transition-delay) { 118 | -webkit-transition-delay:@transition-delay; 119 | -moz-transition-delay:@transition-delay; 120 | -o-transition-delay:@transition-delay; 121 | transition-delay:@transition-delay; 122 | } 123 | .transition-duration(@transition-duration) { 124 | -webkit-transition-duration:@transition-duration; 125 | -moz-transition-duration:@transition-duration; 126 | -o-transition-duration:@transition-duration; 127 | transition-duration:@transition-duration; 128 | } 129 | 130 | // Transform 131 | // ------------------------- 132 | .transform(@arguments) { 133 | -webkit-transform:@arguments; 134 | -moz-transform:@arguments; 135 | transform:@arguments; 136 | } 137 | 138 | // Transform rotation 139 | // ------------------------- 140 | .rotation(@deg:5deg) { 141 | -webkit-transform:rotate(@deg); 142 | -moz-transform:rotate(@deg); 143 | transform:rotate(@deg); 144 | } 145 | 146 | // Transform scale 147 | // ------------------------- 148 | .scale(@ratio:1.5) { 149 | -webkit-transform:scale(@ratio); 150 | -moz-transform:scale(@ratio); 151 | transform:scale(@ratio); 152 | } 153 | 154 | // Translate 155 | // ------------------------- 156 | .translate(@x:0, @y:0) { 157 | -moz-transform:translate(@x, @y); 158 | -webkit-transform:translate(@x, @y); 159 | -o-transform:translate(@x, @y); 160 | -ms-transform:translate(@x, @y); 161 | transform:translate(@x, @y); 162 | } 163 | 164 | // Translate3d 165 | // ------------------------- 166 | .translate3d(@x, @y, @z) { 167 | -webkit-transform:translate3d(@x, @y, @z); 168 | -moz-transform:translate3d(@x, @y, @z); 169 | -o-transform:translate3d(@x, @y, @z); 170 | transform:translate3d(@x, @y, @z); 171 | } 172 | 173 | // Background clipping 174 | // ------------------------- 175 | .background-clip(@clip) { 176 | -webkit-background-clip:@clip; 177 | -moz-background-clip:@clip; 178 | background-clip:@clip; 179 | } 180 | 181 | // CSS columns 182 | // ------------------------- 183 | .columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEEEEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) { 184 | -moz-column-width:@colwidth; 185 | -moz-column-count:@colcount; 186 | -moz-column-gap:@colgap; 187 | -moz-column-rule-color:@columnRuleColor; 188 | -moz-column-rule-style:@columnRuleStyle; 189 | -moz-column-rule-width:@columnRuleWidth; 190 | -webkit-column-width:@colwidth; 191 | -webkit-column-count:@colcount; 192 | -webkit-column-gap:@colgap; 193 | -webkit-column-rule-color:@columnRuleColor; 194 | -webkit-column-rule-style:@columnRuleStyle; 195 | -webkit-column-rule-width:@columnRuleWidth; 196 | column-width:@colwidth; 197 | column-count:@colcount; 198 | column-gap:@colgap; 199 | column-rule-color:@columnRuleColor; 200 | column-rule-style:@columnRuleStyle; 201 | column-rule-width:@columnRuleWidth; 202 | } 203 | 204 | // Import font 205 | // ------------------------- 206 | .font-face(@fontFamily, @fileName, @style, @weight) { 207 | @font-face{ 208 | font-family:@fontFamily; 209 | font-style:@style; 210 | font-weight:@weight; 211 | src:url('@{fileName}.eot'); 212 | src:local('@fontFamily'), url('@{fileName}.eot?#iefix') format('embedded-opentype'), url('@{fileName}.woff') format('woff'), url('@{fileName}.ttf') format('truetype'), url('@{fileName}.svg#@{fontFamily}') format('svg'), url("@{fileName}.otf") format('opentype'); 213 | } 214 | } 215 | 216 | // Clearfix 217 | // ------------------------- 218 | .clearfix() { 219 | zoom:1; 220 | &:before{ 221 | content:''; 222 | display:block; 223 | } 224 | &:after{ 225 | content:''; 226 | display:table; 227 | clear:both; 228 | } 229 | } 230 | 231 | // CSS image replacement 232 | // ------------------------- 233 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 234 | .hide-text() { 235 | font:0/0 a; 236 | color:transparent; 237 | text-shadow:none; 238 | background-color:transparent; 239 | border:0; 240 | } 241 | 242 | // Force line breaks 243 | // ------------------------- 244 | .word-break() { 245 | word-break:break-all; 246 | word-wrap:break-word; 247 | white-space: normal; 248 | } 249 | 250 | // No wrap 251 | // ------------------------- 252 | .no-wrap() { 253 | word-break: normal; 254 | word-wrap: normal; 255 | white-space: nowrap; 256 | } 257 | 258 | // Text overflow with(...) 259 | // ------------------------- 260 | // Requires inline-block or block for proper styling 261 | .text-overflow() { 262 | overflow:hidden; 263 | text-overflow:ellipsis; 264 | white-space:nowrap; 265 | max-width:100%; 266 | } 267 | 268 | .line-overflow(@line) { 269 | overflow:hidden; 270 | text-overflow:ellipsis; 271 | display:-webkit-box; 272 | -webkit-line-clamp:@line; /* number of lines to show */ 273 | -webkit-box-orient:vertical; 274 | } 275 | 276 | // Creates a wrapper for a series of columns 277 | // ------------------------- 278 | .lay-row() { 279 | // Negative margin the row out to align the content of columns 280 | margin-left: (@grid-gutter-width / -2); 281 | margin-right: (@grid-gutter-width / -2); 282 | // Then clear the floated columns 283 | .clearfix(); 284 | } 285 | 286 | // Generate the columns 287 | // ------------------------- 288 | .lay-column(@columns) { 289 | @media (min-width: @grid-float-breakpoint) { 290 | float: left; 291 | // Calculate width based on number of columns available 292 | width: percentage(@columns / @grid-columns); 293 | } 294 | // Prevent columns from collapsing when empty 295 | min-height: 1px; 296 | // Set inner padding as gutters instead of margin 297 | padding-left: (@grid-gutter-width / 2); 298 | padding-right: (@grid-gutter-width / 2); 299 | } 300 | 301 | // Generate the column offsets 302 | // ------------------------- 303 | .lay-column-offset(@columns) { 304 | @media (min-width: @grid-float-breakpoint) { 305 | margin-left: percentage((@columns / @grid-columns)); 306 | } 307 | } 308 | 309 | // Alpha background 310 | // ------------------------- 311 | .alpha-background(@rgb:#000,@alpha:.5){ 312 | @rgba-color:fade(@rgb,@alpha*100); 313 | @argb-color:argb(@rgba-color); 314 | background-color:@rgba-color; 315 | filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{argb-color}', endColorstr='@{argb-color}', GradientType=0)\9"; 316 | zoom:1; 317 | } 318 | 319 | // Controls the selection model of an element. 320 | // ------------------------- 321 | .user-select(@arguments:none){ 322 | -webkit-user-select: @arguments; 323 | -moz-user-select: @arguments; 324 | -ms-user-select: @arguments; 325 | user-select: @arguments; 326 | } 327 | 328 | // Flexbox display 329 | // ------------------------- 330 | // flex or inline-flex 331 | .flex-display(@display: flex) { 332 | display: ~"-webkit-@{display}"; 333 | display: ~"-moz-@{display}"; 334 | display: @display; 335 | } 336 | 337 | // fix background-image with `./img/xxx.png` in REM support option. 338 | .rem-bg(){ 339 | background-repeat: no-repeat; 340 | background-position: center; 341 | background-size: 100%; 342 | } 343 | 344 | -------------------------------------------------------------------------------- /project/src/css/lib/lib-rem.less: -------------------------------------------------------------------------------- 1 | // REM 适配 2 | 3 | // 375px (iPhone 6) 4 | // 此为基准值, 与视觉设计稿 `宽度/2` 保持一致 5 | html[data-rem="375"] { 6 | font-size: 20PX; 7 | } 8 | 9 | // 17.06 = 320*20/375 (iPhone 5) 10 | @media only screen and (min-width: 320px) { 11 | html[data-rem="375"] { 12 | font-size: 17.06PX !important; 13 | } 14 | } 15 | 16 | // base root size (iPhone 6) 17 | @media only screen and (min-width: 375px) { 18 | html[data-rem="375"] { 19 | font-size: 20PX !important; 20 | } 21 | } 22 | 23 | // 21.33333333 = 400*20/375 (Most Android) 24 | @media only screen and (min-width: 400px) { 25 | html[data-rem="375"] { 26 | font-size: 21.33333333PX !important; 27 | } 28 | } 29 | 30 | // 22.08 = 414*20/375 (iPhone 6 Plus) 31 | @media only screen and (min-width: 414px) { 32 | html[data-rem="375"] { 33 | font-size: 22.08PX !important; 34 | } 35 | } 36 | 37 | // 25.6 = 480*20/375 (iPad) 38 | @media only screen and (min-width: 480px) { 39 | html[data-rem="375"] { 40 | font-size: 25.6PX !important; 41 | } 42 | } 43 | 44 | // 20*100/375 = 5.333333333 以 375 宽度为基准动态计算 45 | //html[data-rem="375"] { 46 | // font-size: 5.333333333vw; 47 | //} 48 | 49 | // REM 适配, 用法: 50 | 51 | // 320px (iPhone 5) 52 | // 此为基准值, 与视觉设计稿 `宽度/2` 保持一致 53 | html[data-rem="320"] { 54 | font-size: 20PX; 55 | } 56 | 57 | // 23.4375 = 375*20/320 (Most Android) 58 | @media only screen and (min-width: 375px) { 59 | html[data-rem="320"] { 60 | font-size: 23.4375PX !important; 61 | } 62 | } 63 | 64 | // 25 = 400*20/320 (Most Android) 65 | @media only screen and (min-width: 400px) { 66 | html[data-rem="320"] { 67 | font-size: 25PX !important; 68 | } 69 | } 70 | 71 | // 25.875 = 414*20/320 (iPhone 6 Plus) 72 | @media only screen and (min-width: 414px) { 73 | html[data-rem="320"] { 74 | font-size: 25.875PX !important; 75 | } 76 | } 77 | 78 | // 30 = 30 (iPad) 79 | @media only screen and (min-width: 480px) { 80 | html[data-rem="320"] { 81 | font-size: 30PX !important; 82 | } 83 | } 84 | 85 | // 20*100/320 = 6.25 以 320 宽度为基准动态计算 86 | //html[data-rem="320"] { 87 | // font-size: 6.25vw; 88 | //} -------------------------------------------------------------------------------- /project/src/css/lib/lib-reset.less: -------------------------------------------------------------------------------- 1 | /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Prevent adjustments of font size after orientation changes in IE and iOS. 6 | */ 7 | 8 | html { 9 | font-family: sans-serif; /* 1 */ 10 | -ms-text-size-adjust: 100%; /* 2 */ 11 | -webkit-text-size-adjust: 100%; /* 2 */ 12 | } 13 | 14 | /** 15 | * Remove the margin in all browsers (opinionated). 16 | */ 17 | 18 | body { 19 | margin: 0; 20 | } 21 | 22 | /* HTML5 display definitions 23 | ========================================================================== */ 24 | 25 | /** 26 | * Add the correct display in IE 9-. 27 | * 1. Add the correct display in Edge, IE, and Firefox. 28 | * 2. Add the correct display in IE. 29 | */ 30 | 31 | article, 32 | aside, 33 | details, /* 1 */ 34 | figcaption, 35 | figure, 36 | footer, 37 | header, 38 | main, /* 2 */ 39 | menu, 40 | nav, 41 | section, 42 | summary { /* 1 */ 43 | display: block; 44 | } 45 | 46 | /** 47 | * Add the correct display in IE 9-. 48 | */ 49 | 50 | audio, 51 | canvas, 52 | progress, 53 | video { 54 | display: inline-block; 55 | } 56 | 57 | /** 58 | * Add the correct display in iOS 4-7. 59 | */ 60 | 61 | audio:not([controls]) { 62 | display: none; 63 | height: 0; 64 | } 65 | 66 | /** 67 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 68 | */ 69 | 70 | progress { 71 | vertical-align: baseline; 72 | } 73 | 74 | /** 75 | * Add the correct display in IE 10-. 76 | * 1. Add the correct display in IE. 77 | */ 78 | 79 | template, /* 1 */ 80 | [hidden] { 81 | display: none; 82 | } 83 | 84 | /* Links 85 | ========================================================================== */ 86 | 87 | /** 88 | * 1. Remove the gray background on active links in IE 10. 89 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 90 | */ 91 | 92 | a { 93 | background-color: transparent; /* 1 */ 94 | -webkit-text-decoration-skip: objects; /* 2 */ 95 | } 96 | 97 | /** 98 | * Remove the outline on focused links when they are also active or hovered 99 | * in all browsers (opinionated). 100 | */ 101 | 102 | a:active, 103 | a:hover { 104 | outline-width: 0; 105 | } 106 | 107 | /* Text-level semantics 108 | ========================================================================== */ 109 | 110 | /** 111 | * 1. Remove the bottom border in Firefox 39-. 112 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 113 | */ 114 | 115 | abbr[title] { 116 | border-bottom: none; /* 1 */ 117 | text-decoration: underline; /* 2 */ 118 | text-decoration: underline dotted; /* 2 */ 119 | } 120 | 121 | /** 122 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 123 | */ 124 | 125 | b, 126 | strong { 127 | font-weight: inherit; 128 | } 129 | 130 | /** 131 | * Add the correct font weight in Chrome, Edge, and Safari. 132 | */ 133 | 134 | b, 135 | strong { 136 | font-weight: bolder; 137 | } 138 | 139 | /** 140 | * Add the correct font style in Android 4.3-. 141 | */ 142 | 143 | dfn { 144 | font-style: italic; 145 | } 146 | 147 | /** 148 | * Correct the font size and margin on `h1` elements within `section` and 149 | * `article` contexts in Chrome, Firefox, and Safari. 150 | */ 151 | 152 | h1 { 153 | font-size: 2em; 154 | margin: 0.67em 0; 155 | } 156 | 157 | /** 158 | * Add the correct background and color in IE 9-. 159 | */ 160 | 161 | mark { 162 | background-color: #ff0; 163 | color: #000; 164 | } 165 | 166 | /** 167 | * Add the correct font size in all browsers. 168 | */ 169 | 170 | small { 171 | font-size: 80%; 172 | } 173 | 174 | /** 175 | * Prevent `sub` and `sup` elements from affecting the line height in 176 | * all browsers. 177 | */ 178 | 179 | sub, 180 | sup { 181 | font-size: 75%; 182 | line-height: 0; 183 | position: relative; 184 | vertical-align: baseline; 185 | } 186 | 187 | sub { 188 | bottom: -0.25em; 189 | } 190 | 191 | sup { 192 | top: -0.5em; 193 | } 194 | 195 | /* Embedded content 196 | ========================================================================== */ 197 | 198 | /** 199 | * Remove the border on images inside links in IE 10-. 200 | */ 201 | 202 | img { 203 | border-style: none; 204 | } 205 | 206 | /** 207 | * Hide the overflow in IE. 208 | */ 209 | 210 | svg:not(:root) { 211 | overflow: hidden; 212 | } 213 | 214 | /* Grouping content 215 | ========================================================================== */ 216 | 217 | /** 218 | * 1. Correct the inheritance and scaling of font size in all browsers. 219 | * 2. Correct the odd `em` font sizing in all browsers. 220 | */ 221 | 222 | code, 223 | kbd, 224 | pre, 225 | samp { 226 | font-family: monospace, monospace; /* 1 */ 227 | font-size: 1em; /* 2 */ 228 | } 229 | 230 | /** 231 | * Add the correct margin in IE 8. 232 | */ 233 | 234 | figure { 235 | margin: 1em 40px; 236 | } 237 | 238 | /** 239 | * 1. Add the correct box sizing in Firefox. 240 | * 2. Show the overflow in Edge and IE. 241 | */ 242 | 243 | hr { 244 | box-sizing: content-box; /* 1 */ 245 | height: 0; /* 1 */ 246 | overflow: visible; /* 2 */ 247 | } 248 | 249 | /* Forms 250 | ========================================================================== */ 251 | 252 | /** 253 | * 1. Change font properties to `inherit` in all browsers (opinionated). 254 | * 2. Remove the margin in Firefox and Safari. 255 | */ 256 | 257 | button, 258 | input, 259 | select, 260 | textarea { 261 | font: inherit; /* 1 */ 262 | margin: 0; /* 2 */ 263 | } 264 | 265 | /** 266 | * Restore the font weight unset by the previous rule. 267 | */ 268 | 269 | optgroup { 270 | font-weight: bold; 271 | } 272 | 273 | /** 274 | * Show the overflow in IE. 275 | * 1. Show the overflow in Edge. 276 | */ 277 | 278 | button, 279 | input { /* 1 */ 280 | overflow: visible; 281 | } 282 | 283 | /** 284 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 285 | * 1. Remove the inheritance of text transform in Firefox. 286 | */ 287 | 288 | button, 289 | select { /* 1 */ 290 | text-transform: none; 291 | } 292 | 293 | /** 294 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 295 | * controls in Android 4. 296 | * 2. Correct the inability to style clickable types in iOS and Safari. 297 | */ 298 | 299 | button, 300 | html [type="button"], /* 1 */ 301 | [type="reset"], 302 | [type="submit"] { 303 | -webkit-appearance: button; /* 2 */ 304 | } 305 | 306 | /** 307 | * Remove the inner border and padding in Firefox. 308 | */ 309 | 310 | button::-moz-focus-inner, 311 | [type="button"]::-moz-focus-inner, 312 | [type="reset"]::-moz-focus-inner, 313 | [type="submit"]::-moz-focus-inner { 314 | border-style: none; 315 | padding: 0; 316 | } 317 | 318 | /** 319 | * Restore the focus styles unset by the previous rule. 320 | */ 321 | 322 | button:-moz-focusring, 323 | [type="button"]:-moz-focusring, 324 | [type="reset"]:-moz-focusring, 325 | [type="submit"]:-moz-focusring { 326 | outline: 1px dotted ButtonText; 327 | } 328 | 329 | /** 330 | * Change the border, margin, and padding in all browsers (opinionated). 331 | */ 332 | 333 | fieldset { 334 | border: 1px solid #c0c0c0; 335 | margin: 0 2px; 336 | padding: 0.35em 0.625em 0.75em; 337 | } 338 | 339 | /** 340 | * 1. Correct the text wrapping in Edge and IE. 341 | * 2. Correct the color inheritance from `fieldset` elements in IE. 342 | * 3. Remove the padding so developers are not caught out when they zero out 343 | * `fieldset` elements in all browsers. 344 | */ 345 | 346 | legend { 347 | box-sizing: border-box; /* 1 */ 348 | color: inherit; /* 2 */ 349 | display: table; /* 1 */ 350 | max-width: 100%; /* 1 */ 351 | padding: 0; /* 3 */ 352 | white-space: normal; /* 1 */ 353 | } 354 | 355 | /** 356 | * Remove the default vertical scrollbar in IE. 357 | */ 358 | 359 | textarea { 360 | overflow: auto; 361 | } 362 | 363 | /** 364 | * 1. Add the correct box sizing in IE 10-. 365 | * 2. Remove the padding in IE 10-. 366 | */ 367 | 368 | [type="checkbox"], 369 | [type="radio"] { 370 | box-sizing: border-box; /* 1 */ 371 | padding: 0; /* 2 */ 372 | } 373 | 374 | /** 375 | * Correct the cursor style of increment and decrement buttons in Chrome. 376 | */ 377 | 378 | [type="number"]::-webkit-inner-spin-button, 379 | [type="number"]::-webkit-outer-spin-button { 380 | height: auto; 381 | } 382 | 383 | /** 384 | * 1. Correct the odd appearance in Chrome and Safari. 385 | * 2. Correct the outline style in Safari. 386 | */ 387 | 388 | [type="search"] { 389 | -webkit-appearance: textfield; /* 1 */ 390 | outline-offset: -2px; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. 395 | */ 396 | 397 | [type="search"]::-webkit-search-cancel-button, 398 | [type="search"]::-webkit-search-decoration { 399 | -webkit-appearance: none; 400 | } 401 | 402 | /** 403 | * Correct the text style of placeholders in Chrome, Edge, and Safari. 404 | */ 405 | 406 | ::-webkit-input-placeholder { 407 | color: inherit; 408 | opacity: 0.54; 409 | } 410 | 411 | /** 412 | * 1. Correct the inability to style clickable types in iOS and Safari. 413 | * 2. Change font properties to `inherit` in Safari. 414 | */ 415 | 416 | ::-webkit-file-upload-button { 417 | -webkit-appearance: button; /* 1 */ 418 | font: inherit; /* 2 */ 419 | } -------------------------------------------------------------------------------- /project/src/css/lib/prism-github-theme.less: -------------------------------------------------------------------------------- 1 | /** 2 | * Github-like theme for Prism.js 3 | * @author Luke Askew http://github.com/lukeaskew 4 | */ 5 | code, 6 | code[class*='language-'], 7 | pre[class*='language-'] { 8 | color: #333; 9 | text-align: left; 10 | white-space: pre; 11 | word-spacing: normal; 12 | tab-size: 4; 13 | hyphens: none; 14 | font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; 15 | line-height: 1.4; 16 | direction: ltr; 17 | cursor: text; 18 | } 19 | 20 | pre[class*='language-'] { 21 | overflow: auto; 22 | margin: 1em 0; 23 | padding: 1.2em; 24 | border-radius: 3px; 25 | font-size: 85%; 26 | } 27 | 28 | p code, 29 | li code, 30 | table code { 31 | margin: 0; 32 | border-radius: 3px; 33 | padding: 0.2em 0; 34 | font-size: 85%; 35 | } 36 | p code:before, p code:after, 37 | li code:before, 38 | li code:after, 39 | table code:before, 40 | table code:after { 41 | letter-spacing: -0.2em; 42 | content: '\00a0'; 43 | } 44 | 45 | code, 46 | :not(pre) > code[class*='language-'], 47 | pre[class*='language-'] { 48 | background: #f7f7f7; 49 | } 50 | 51 | :not(pre) > code[class*='language-'] { 52 | padding: 0.1em; 53 | border-radius: 0.3em; 54 | } 55 | 56 | .token.comment, .token.prolog, .token.doctype, .token.cdata { 57 | color: #969896; 58 | } 59 | .token.punctuation, .token.string, .token.atrule, .token.attr-value { 60 | color: #183691; 61 | } 62 | .token.property, .token.tag { 63 | color: #63a35c; 64 | } 65 | .token.boolean, .token.number { 66 | color: #0086b3; 67 | } 68 | .token.selector, .token.attr-name, .token.attr-value .punctuation:first-child, .token.keyword, .token.regex, .token.important { 69 | color: #a71d5d; 70 | } 71 | .token.operator, .token.entity, .token.url, .language-css .token.string { 72 | color: #a71d5d; 73 | } 74 | .token.entity { 75 | cursor: help; 76 | } 77 | .namespace { 78 | opacity: 0.7; 79 | } -------------------------------------------------------------------------------- /project/src/css/lib/prism.less: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+json+less+sass+scss&plugins=line-highlight */ 2 | /** 3 | * prism.js default theme for JavaScript, CSS and HTML 4 | * Based on dabblet (http://dabblet.com) 5 | * @author Lea Verou 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: black; 11 | background: none; 12 | text-shadow: 0 1px white; 13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | word-wrap: normal; 19 | line-height: 1.5; 20 | 21 | -moz-tab-size: 4; 22 | -o-tab-size: 4; 23 | tab-size: 4; 24 | 25 | -webkit-hyphens: none; 26 | -moz-hyphens: none; 27 | -ms-hyphens: none; 28 | hyphens: none; 29 | } 30 | 31 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 32 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 33 | text-shadow: none; 34 | background: #b3d4fc; 35 | } 36 | 37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 38 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 39 | text-shadow: none; 40 | background: #b3d4fc; 41 | } 42 | 43 | @media print { 44 | code[class*="language-"], 45 | pre[class*="language-"] { 46 | text-shadow: none; 47 | } 48 | } 49 | 50 | /* Code blocks */ 51 | pre[class*="language-"] { 52 | padding: 1em; 53 | margin: .5em 0; 54 | overflow: auto; 55 | } 56 | 57 | :not(pre) > code[class*="language-"], 58 | pre[class*="language-"] { 59 | background: #f5f2f0; 60 | } 61 | 62 | /* Inline code */ 63 | :not(pre) > code[class*="language-"] { 64 | padding: .1em; 65 | border-radius: .3em; 66 | white-space: normal; 67 | } 68 | 69 | .token.comment, 70 | .token.prolog, 71 | .token.doctype, 72 | .token.cdata { 73 | color: slategray; 74 | } 75 | 76 | .token.punctuation { 77 | color: #999; 78 | } 79 | 80 | .namespace { 81 | opacity: .7; 82 | } 83 | 84 | .token.property, 85 | .token.tag, 86 | .token.boolean, 87 | .token.number, 88 | .token.constant, 89 | .token.symbol, 90 | .token.deleted { 91 | color: #905; 92 | } 93 | 94 | .token.selector, 95 | .token.attr-name, 96 | .token.string, 97 | .token.char, 98 | .token.builtin, 99 | .token.inserted { 100 | color: #690; 101 | } 102 | 103 | .token.operator, 104 | .token.entity, 105 | .token.url, 106 | .language-css .token.string, 107 | .style .token.string { 108 | color: #a67f59; 109 | background: hsla(0, 0%, 100%, .5); 110 | } 111 | 112 | .token.atrule, 113 | .token.attr-value, 114 | .token.keyword { 115 | color: #07a; 116 | } 117 | 118 | .token.function { 119 | color: #DD4A68; 120 | } 121 | 122 | .token.regex, 123 | .token.important, 124 | .token.variable { 125 | color: #e90; 126 | } 127 | 128 | .token.important, 129 | .token.bold { 130 | font-weight: bold; 131 | } 132 | .token.italic { 133 | font-style: italic; 134 | } 135 | 136 | .token.entity { 137 | cursor: help; 138 | } 139 | 140 | pre[data-line] { 141 | position: relative; 142 | padding: 1em 0 1em 3em; 143 | } 144 | 145 | .line-highlight { 146 | position: absolute; 147 | left: 0; 148 | right: 0; 149 | padding: inherit 0; 150 | margin-top: 1em; /* Same as .prism’s padding-top */ 151 | 152 | background: hsla(24, 20%, 50%,.08); 153 | background: -moz-linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 154 | background: -webkit-linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 155 | background: -o-linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 156 | background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 157 | 158 | pointer-events: none; 159 | 160 | line-height: inherit; 161 | white-space: pre; 162 | } 163 | 164 | .line-highlight:before, 165 | .line-highlight[data-end]:after { 166 | content: attr(data-start); 167 | position: absolute; 168 | top: .4em; 169 | left: .6em; 170 | min-width: 1em; 171 | padding: 0 .5em; 172 | background-color: hsla(24, 20%, 50%,.4); 173 | color: hsl(24, 20%, 95%); 174 | font: bold 65%/1.5 sans-serif; 175 | text-align: center; 176 | vertical-align: .3em; 177 | border-radius: 999px; 178 | text-shadow: none; 179 | box-shadow: 0 1px white; 180 | } 181 | 182 | .line-highlight[data-end]:after { 183 | content: attr(data-end); 184 | top: auto; 185 | bottom: .4em; 186 | } 187 | 188 | -------------------------------------------------------------------------------- /project/src/css/mod-discovery.less: -------------------------------------------------------------------------------- 1 | // 微信-发现 icon 模块 2 | .mod-discovery{ 3 | text-align: center; 4 | } 5 | .mod-discovery__list{ 6 | 7 | } 8 | .mod-discovery__icon{ 9 | width: 25px; 10 | height: 25px; 11 | display: inline-block; 12 | margin: 0 5px; 13 | } 14 | .mod-discovery__icon_moment{ 15 | background-image: url(../slice/mod-discovery/icon-moment.png); 16 | } 17 | .mod-discovery__icon_qrcode{ 18 | background-image: url(../slice/mod-discovery/icon-qrcode.png); 19 | } 20 | .mod-discovery__icon_shake{ 21 | background-image: url(../slice/mod-discovery/icon-shake.png); 22 | } 23 | .mod-discovery__icon_locaitonservice{ 24 | background-image: url(../slice/mod-discovery/icon-locaitonservice.png); 25 | } 26 | .mod-discovery__icon_bottle{ 27 | background-image: url(../slice/mod-discovery/icon-bottle.png); 28 | } 29 | .mod-discovery__icon_jd{ 30 | background-image: url(../slice/mod-discovery/icon-jd.png); 31 | } 32 | .mod-discovery__icon-game{ 33 | background-image: url(../slice/mod-discovery/icon-game.png); 34 | } 35 | .mod-svg__background-icon{ 36 | display: inline-block; 37 | background-image: url(../svg/svglogo.svg); 38 | } -------------------------------------------------------------------------------- /project/src/css/mod-example.less: -------------------------------------------------------------------------------- 1 | // 范例模块结构 2 | .mod-example{ 3 | text-align: center; 4 | margin-bottom: 40px; 5 | } 6 | .mod-example__title{ 7 | display: inline-block; 8 | font-size: 18px; 9 | text-align: center; 10 | border-bottom: 1px solid #409224; 11 | padding: 5px; 12 | margin-bottom: 20px; 13 | color: #326532; 14 | text-decoration: none; 15 | } 16 | .mod-example__preview{ 17 | border: 2px dashed #ddd; 18 | margin: 0 50px; 19 | padding: 20px; 20 | margin-bottom: 20px; 21 | width: auto; 22 | height: auto; 23 | background-image: url(../img/bg-body.png); 24 | background-repeat: repeat; 25 | } 26 | .mod-example__notes{ 27 | background-color: rgba(237,223,0,0.04); 28 | display: table; 29 | margin: 0 auto; 30 | border-radius: 5px; 31 | padding: 10px; 32 | font-size: 12px; 33 | line-height: 20px; 34 | text-align: left; 35 | color: #888; 36 | margin-bottom: 20px; 37 | border: 1px solid rgba(237,223,0,0.24); 38 | } 39 | .mod-example__doc{ 40 | 41 | } 42 | .mod-example__doc-title{ 43 | background: #eff4ef; 44 | padding: 5px 0; 45 | color: #326532; 46 | } 47 | .mod-example__show{ 48 | overflow: hidden; 49 | margin: 0 50px; 50 | font-size: 16px; 51 | } 52 | .mod-example__before{ 53 | width: 49%; 54 | float: left; 55 | } 56 | .mod-example__after{ 57 | width: 49%; 58 | float: right; 59 | } 60 | .mod-example__svg-red{ 61 | use,path{ 62 | fill:red; 63 | } 64 | } 65 | .mod-example__svg-blue{ 66 | use,path{ 67 | fill:blue; 68 | } 69 | } 70 | .mod-example__svg-button{ 71 | background: gray; 72 | color: white; 73 | border-radius: 10px; 74 | } 75 | -------------------------------------------------------------------------------- /project/src/css/mod-footer.less: -------------------------------------------------------------------------------- 1 | // footer 2 | .mod-footer{ 3 | font-size: 16px; 4 | text-align: center; 5 | overflow: hidden; 6 | } 7 | .mod-footer__link{ 8 | color: #27c946; 9 | display: inline-block; 10 | text-decoration: none; 11 | padding-bottom:2px; 12 | border-bottom:1px solid #27c946; 13 | margin-bottom: 50px; 14 | } -------------------------------------------------------------------------------- /project/src/css/mod-header.less: -------------------------------------------------------------------------------- 1 | .mod-header{ 2 | text-align: center; 3 | margin-top: 40px; 4 | padding-bottom: 20px; 5 | margin-bottom: 20px; 6 | border-bottom: 1px solid #eee; 7 | } 8 | .mod-header__logo{ 9 | display: block; 10 | width: 100px; 11 | height: 100px; 12 | background-size: 100px; 13 | text-indent: -9999px; 14 | margin: 0 auto 20px; 15 | background-image: url(../img/weflow-logo.png); 16 | } 17 | .mod-header__title{ 18 | display: block; 19 | color: #065315; 20 | text-decoration: none; 21 | font-size: 20px; 22 | margin-bottom: 20px; 23 | } 24 | .mod-header__desc{ 25 | color: #999; 26 | font-size:14px; 27 | } -------------------------------------------------------------------------------- /project/src/css/mod-social-media.less: -------------------------------------------------------------------------------- 1 | // 微信-分享 icon 模块 2 | .mod-social-media{ 3 | text-align: center; 4 | } 5 | .mod-social-media__list{ 6 | 7 | } 8 | .mod-social-media__icon{ 9 | width: 90px; 10 | height: 90px; 11 | display: inline-block; 12 | margin: 0 5px; 13 | background-color: #fff; 14 | .rounded(10px); 15 | } 16 | .mod-social-media__icon_share{ 17 | background-image: url(../slice/mod-social-media/icon-share.png); 18 | } 19 | .mod-social-media__icon_moment{ 20 | background-image: url(../slice/mod-social-media/icon-moment.png); 21 | } 22 | .mod-social-media__icon_favadd{ 23 | background-image: url(../slice/mod-social-media/icon-favadd.png); 24 | } 25 | .mod-social-media__icon_copy{ 26 | background-image: url(../slice/mod-social-media/icon-copy.png); 27 | } 28 | .mod-social-media__icon_refresh{ 29 | background-image: url(../slice/mod-social-media/icon-refresh.png); 30 | } -------------------------------------------------------------------------------- /project/src/css/mod-sticker.less: -------------------------------------------------------------------------------- 1 | // 表情模块 2 | .mod-sticker{ 3 | 4 | } 5 | .mod-sticker__list-border{ 6 | border: 1px solid #00aa22; 7 | padding: 10px; 8 | margin: 5px; 9 | >div{ 10 | padding:4px 0; 11 | } 12 | } 13 | .mod-sticker__icon { 14 | width: 50px; 15 | height: 50px; 16 | display: inline-block; 17 | background-size: 50px; 18 | margin: 0 5px; 19 | } 20 | .mod-sticker__icon_1{ 21 | background-image: url(../img/mod-sticker/1.gif); 22 | } 23 | .mod-sticker__icon_2{ 24 | background-image: url(../img/mod-sticker/2.gif); 25 | } 26 | .mod-sticker__icon_3{ 27 | width: 50px; 28 | height: 50px; 29 | background-image: url(../img/mod-sticker/3.gif); 30 | } 31 | .mod-sticker__icon_4{ 32 | width: 50px; 33 | height: 50px; 34 | background-image: url(../img/mod-sticker/4.gif); 35 | } -------------------------------------------------------------------------------- /project/src/css/style-doc.less: -------------------------------------------------------------------------------- 1 | /** 2 | * @name: tmt-workflow example doc 3 | * @description: Examples for tmt-workflow 4 | * @author: weixin 5 | */ 6 | 7 | // 引入库文件 8 | @import "./lib/lib-mixins"; 9 | @import "./lib/lib-reset"; 10 | 11 | // 引入 REM 解决方案依赖 12 | // 调用示例 13 | @import "./lib/lib-rem"; 14 | 15 | // 引入 Less 依赖文件 16 | @import "mod-header"; 17 | @import "mod-example"; 18 | @import "mod-discovery"; 19 | // @import "mod-social-media"; 20 | // 不调用可不引入依赖, 精简 21 | 22 | @import "mod-sticker"; 23 | @import "mod-footer"; 24 | 25 | // 代码高亮 26 | @import "./lib/prism"; 27 | @import "./lib/prism-github-theme"; 28 | 29 | -------------------------------------------------------------------------------- /project/src/css/style-index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * @name: tmt-workflow example 3 | * @description: Examples for tmt-workflow 4 | * @author: weixin 5 | */ 6 | 7 | /* 引入库文件 */ 8 | @import "./lib/lib-mixins"; 9 | @import "./lib/lib-reset"; 10 | 11 | // 引入 REM 解决方案依赖 12 | // 调用示例 13 | @import "./lib/lib-rem"; 14 | 15 | /* 引入 Less 依赖文件 */ 16 | @import "mod-header"; 17 | @import "mod-example"; 18 | @import "mod-discovery"; 19 | @import "mod-social-media"; 20 | @import "mod-sticker"; 21 | @import "mod-footer"; -------------------------------------------------------------------------------- /project/src/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | tmt-workflow Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 23 | 24 | 25 | 26 |
27 | 28 | tmt-workflow Demo 29 |
执行 开发(dev)/编译(dist) 任务后 [查看源码]
30 |
31 | 32 |
33 |
雪碧图合并 (支持多组)
34 |
35 |
36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
45 |
46 |
47 | 48 |
49 |
50 |
51 | 52 | 53 | 54 | 55 | 56 |
57 |
58 |
59 | 60 |
61 | 62 |
63 |
普通图片调用
64 |
65 |
66 |
67 | 68 | 69 | 70 | 71 |
72 |
73 |
74 |
75 | 76 |
77 |
SVG调用 - 作为背景图
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 87 |
88 |
SVG调用 - 在HTML使用
89 |
90 |
91 |
92 |
HTML直接引用
93 | 94 |
95 |
96 |
内联到HTML 动画需求
97 |
在src中链接的最后加?i
98 | 99 |
100 |
101 |
合并SYMBOL 需求
102 |
在src中链接的最后加?s
103 | 104 | 105 | 106 | 107 |
108 |
109 |
110 |
111 | 112 | 113 | 114 |
115 | 116 | <% var text = "点击查看更多源码说明" %> 117 | <%-text %> 118 |
119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 160 | 161 | -------------------------------------------------------------------------------- /project/src/img/bg-body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/img/bg-body.png -------------------------------------------------------------------------------- /project/src/img/mod-sticker/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/img/mod-sticker/1.gif -------------------------------------------------------------------------------- /project/src/img/mod-sticker/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/img/mod-sticker/2.gif -------------------------------------------------------------------------------- /project/src/img/mod-sticker/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/img/mod-sticker/3.gif -------------------------------------------------------------------------------- /project/src/img/mod-sticker/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/img/mod-sticker/4.gif -------------------------------------------------------------------------------- /project/src/img/weflow-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/img/weflow-logo.png -------------------------------------------------------------------------------- /project/src/js/index.js: -------------------------------------------------------------------------------- 1 | // js here 2 | let name = 'ES2015'; 3 | let output = `${name} test`; 4 | 5 | console.log(output); -------------------------------------------------------------------------------- /project/src/manifest.json: -------------------------------------------------------------------------------- 1 | {"css/style-doc.d41d8cd9.css":"d41d8cd98f00b204e9800998ecf8427e","css/style-doc.d41d8cd9.webp.css":"d41d8cd98f00b204e9800998ecf8427e","css/style-index.d4842ae1.css":"3617271dd19a6f47d5eced8978e17d4c","css/style-index.d4842ae1.webp.css":"705fdccdc760c2c9ae937f313cc6836e","html/doc.html":"6f09107e89489670dd7e1356de7cb8e4","html/index.html":"fcf24811839aac5bf4a8726245d21391","img/bg-body.131a8d26.png":"709c6bc186c41c5e34d708b2448c3fe7","img/bg-body.131a8d26.webp":"fd95b388510d6b841a1afc211540207b","img/mod-sticker/1.91eb60b6.gif":"73581dc89d689cc238c618b7120804f6","img/mod-sticker/2.d205b06b.gif":"01fd08a7618087c1a0386c590b7df5c4","img/mod-sticker/3.8320284e.gif":"ef60bccb1d8fd1011ff95cffbef8a0c2","img/mod-sticker/4.5e721fbf.gif":"4a3da613dff25abcbfba9f690ba9925f","img/weflow-logo.acd32f66.png":"9ad4f784dac94bf16919d9a21cc95029","img/weflow-logo.acd32f66.webp":"3a9827bc496455c340a5842abb40493c","js/lib/zepto-touch.0944b1b2.js":"0944b1b21db838efa4d6100cba7a330d","js/lib/zepto.min.a8899b38.js":"a8899b38a1d2bff74e5e104a923cda43","sprite/style-index.b91f7ae0.png":"aa6c248216e3ddd2e926e6b057ab34ab","sprite/style-index.b91f7ae0.webp":"b502f7c999f686833e4437f27c873c54","sprite/style-index@2x.b983005a.png":"c21e07292df2f865f291f9c76011d620","sprite/style-index@2x.b983005a.webp":"24cd5195f4eb6fb8bff3a0864f60bb4c"} -------------------------------------------------------------------------------- /project/src/media/bgm.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/media/bgm.mp3 -------------------------------------------------------------------------------- /project/src/slice/mod-discovery/icon-bottle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-discovery/icon-bottle.png -------------------------------------------------------------------------------- /project/src/slice/mod-discovery/icon-bottle@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-discovery/icon-bottle@2x.png -------------------------------------------------------------------------------- /project/src/slice/mod-discovery/icon-game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-discovery/icon-game.png -------------------------------------------------------------------------------- /project/src/slice/mod-discovery/icon-game@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-discovery/icon-game@2x.png -------------------------------------------------------------------------------- /project/src/slice/mod-discovery/icon-jd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-discovery/icon-jd.png -------------------------------------------------------------------------------- /project/src/slice/mod-discovery/icon-jd@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-discovery/icon-jd@2x.png -------------------------------------------------------------------------------- /project/src/slice/mod-discovery/icon-locaitonservice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-discovery/icon-locaitonservice.png -------------------------------------------------------------------------------- /project/src/slice/mod-discovery/icon-locaitonservice@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-discovery/icon-locaitonservice@2x.png -------------------------------------------------------------------------------- /project/src/slice/mod-discovery/icon-moment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-discovery/icon-moment.png -------------------------------------------------------------------------------- /project/src/slice/mod-discovery/icon-moment@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-discovery/icon-moment@2x.png -------------------------------------------------------------------------------- /project/src/slice/mod-discovery/icon-qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-discovery/icon-qrcode.png -------------------------------------------------------------------------------- /project/src/slice/mod-discovery/icon-qrcode@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-discovery/icon-qrcode@2x.png -------------------------------------------------------------------------------- /project/src/slice/mod-discovery/icon-shake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-discovery/icon-shake.png -------------------------------------------------------------------------------- /project/src/slice/mod-discovery/icon-shake@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-discovery/icon-shake@2x.png -------------------------------------------------------------------------------- /project/src/slice/mod-social-media/icon-copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-social-media/icon-copy.png -------------------------------------------------------------------------------- /project/src/slice/mod-social-media/icon-copy@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-social-media/icon-copy@2x.png -------------------------------------------------------------------------------- /project/src/slice/mod-social-media/icon-copy@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-social-media/icon-copy@3x.png -------------------------------------------------------------------------------- /project/src/slice/mod-social-media/icon-favadd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-social-media/icon-favadd.png -------------------------------------------------------------------------------- /project/src/slice/mod-social-media/icon-favadd@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-social-media/icon-favadd@2x.png -------------------------------------------------------------------------------- /project/src/slice/mod-social-media/icon-favadd@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-social-media/icon-favadd@3x.png -------------------------------------------------------------------------------- /project/src/slice/mod-social-media/icon-moment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-social-media/icon-moment.png -------------------------------------------------------------------------------- /project/src/slice/mod-social-media/icon-moment@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-social-media/icon-moment@2x.png -------------------------------------------------------------------------------- /project/src/slice/mod-social-media/icon-moment@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-social-media/icon-moment@3x.png -------------------------------------------------------------------------------- /project/src/slice/mod-social-media/icon-refresh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-social-media/icon-refresh.png -------------------------------------------------------------------------------- /project/src/slice/mod-social-media/icon-refresh@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-social-media/icon-refresh@2x.png -------------------------------------------------------------------------------- /project/src/slice/mod-social-media/icon-refresh@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-social-media/icon-refresh@3x.png -------------------------------------------------------------------------------- /project/src/slice/mod-social-media/icon-share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-social-media/icon-share.png -------------------------------------------------------------------------------- /project/src/slice/mod-social-media/icon-share@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-social-media/icon-share@2x.png -------------------------------------------------------------------------------- /project/src/slice/mod-social-media/icon-share@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/src/slice/mod-social-media/icon-share@3x.png -------------------------------------------------------------------------------- /project/src/svg/svgicon/12w.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project/src/svg/svgicon/4g.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project/src/svg/svgicon/bl.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project/src/svg/svgicon/ss.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project/src/svg/svgicon/translate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 翻转的icon 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /project/src/svg/svgicon/ts.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project/src/svg/svglogo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 6 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /project/tmp/css/style-doc.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 2rem}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 .1rem;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-.1rem}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html[data-rem="375"]{font-size:20px}@media only screen and (min-width:320px){html[data-rem="375"]{font-size:17.06px!important}}@media only screen and (min-width:375px){html[data-rem="375"]{font-size:20px!important}}@media only screen and (min-width:400px){html[data-rem="375"]{font-size:21.33333333px!important}}@media only screen and (min-width:414px){html[data-rem="375"]{font-size:22.08px!important}}@media only screen and (min-width:480px){html[data-rem="375"]{font-size:25.6px!important}}html[data-rem="320"]{font-size:20px}@media only screen and (min-width:375px){html[data-rem="320"]{font-size:23.4375px!important}}@media only screen and (min-width:400px){html[data-rem="320"]{font-size:25px!important}}@media only screen and (min-width:414px){html[data-rem="320"]{font-size:25.875px!important}}@media only screen and (min-width:480px){html[data-rem="320"]{font-size:30px!important}}.mod-header{text-align:center;margin-top:2rem;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid #eee}.mod-header__logo{display:block;width:5rem;height:5rem;background-size:5rem;text-indent:-499.95rem;margin:0 auto 1rem;background-image:url(../img/weflow-logo.png)}.mod-header__title{display:block;color:#065315;text-decoration:none;font-size:1rem;margin-bottom:1rem}.mod-header__desc{color:#999;font-size:.7rem}.mod-example{text-align:center;margin-bottom:2rem}.mod-example__title{display:inline-block;font-size:.9rem;text-align:center;border-bottom:1px solid #409224;padding:.25rem;margin-bottom:1rem;color:#326532;text-decoration:none}.mod-example__preview{border:.1rem dashed #ddd;margin:0 2.5rem;padding:1rem;margin-bottom:1rem;width:auto;height:auto;background-image:url(../img/bg-body.png);background-repeat:repeat}.mod-example__notes{background-color:rgba(237,223,0,.04);display:table;margin:0 auto;border-radius:.25rem;padding:.5rem;font-size:.6rem;line-height:1rem;text-align:left;color:#888;margin-bottom:1rem;border:1px solid rgba(237,223,0,.24)}.mod-example__doc-title{background:#eff4ef;padding:.25rem 0;color:#326532}.mod-example__show{overflow:hidden;margin:0 2.5rem;font-size:.8rem}.mod-example__before{width:49%;float:left}.mod-example__after{width:49%;float:right}.mod-example__svg-red path,.mod-example__svg-red use{fill:red}.mod-example__svg-blue path,.mod-example__svg-blue use{fill:blue}.mod-example__svg-button{background:gray;color:#fff;border-radius:.5rem}.mod-discovery{text-align:center}.mod-discovery__icon{width:1.25rem;height:1.25rem;display:inline-block;margin:0 .25rem}.mod-discovery__icon_moment{background-position:-.2rem -.2rem}.mod-discovery__icon_moment,.mod-discovery__icon_qrcode{background-image:url(../sprite/style-doc.png);width:1.25rem;height:1.25rem}.mod-discovery__icon_qrcode{background-position:-1.65rem -.2rem}.mod-discovery__icon_shake{background-position:-.2rem -1.65rem}.mod-discovery__icon_locaitonservice,.mod-discovery__icon_shake{background-image:url(../sprite/style-doc.png);width:1.25rem;height:1.25rem}.mod-discovery__icon_locaitonservice{background-position:-1.65rem -1.65rem}.mod-discovery__icon_bottle{background-position:-3.1rem -.2rem}.mod-discovery__icon_bottle,.mod-discovery__icon_jd{background-image:url(../sprite/style-doc.png);width:1.25rem;height:1.25rem}.mod-discovery__icon_jd{background-position:-3.1rem -1.65rem}.mod-discovery__icon-game{background-image:url(../sprite/style-doc.png);background-position:-.2rem -3.1rem;width:1.25rem;height:1.25rem}.mod-svg__background-icon{display:inline-block;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='51' height='52' viewBox='0 0 51 52' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='M.154 2.198h8.472V.476H.154z'/%3E%3Cpath id='c' d='M.07 8.541h1.8V.008H.07z'/%3E%3C/defs%3E%3Cg transform='translate(0 1)' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23DEDEDE' stroke-width='.5' fill='%23FFF' cx='25.5' cy='25' r='25'/%3E%3Cpath d='M35.929 18.523h-20.86c-.557 0-1.009.483-1.009 1.08v13.814c0 .3.1.554.296.765a.94.94 0 0 0 .713.316h20.86c.557 0 1.009-.483 1.009-1.08V19.602c0-.299-.098-.553-.296-.764a.939.939 0 0 0-.713-.316zm-20.303 14.32h19.745V20.177H15.626v12.666z' fill='%23F76260'/%3E%3Cg transform='translate(21.119 24.832)'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath fill='%23F76260' mask='url(%23b)' d='M-1.258 4.638h11.295v-6.244H-1.258z'/%3E%3C/g%3E%3Cg transform='translate(24.405 22.074)'%3E%3Cmask id='d' fill='%23fff'%3E%3Cuse xlink:href='%23c'/%3E%3C/mask%3E%3Cpath fill='%23F76260' mask='url(%23d)' d='M-1.996 9.964h6.199V-1.414h-6.199z'/%3E%3C/g%3E%3Cpath d='M20.533 18.553v-.603c0-1.512 1.288-2.737 2.875-2.737h4.2c1.589 0 2.876 1.225 2.876 2.737v.603' stroke='%23F76260' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E")}.mod-sticker__list-border{border:1px solid #0a2;padding:.5rem;margin:.25rem}.mod-sticker__list-border>div{padding:.2rem 0}.mod-sticker__icon{width:2.5rem;height:2.5rem;display:inline-block;background-size:2.5rem;margin:0 .25rem}.mod-sticker__icon_1{background-image:url(../img/mod-sticker/1.gif)}.mod-sticker__icon_2{background-image:url(../img/mod-sticker/2.gif)}.mod-sticker__icon_3{width:2.5rem;height:2.5rem;background-image:url(../img/mod-sticker/3.gif)}.mod-sticker__icon_4{width:2.5rem;height:2.5rem;background-image:url(../img/mod-sticker/4.gif)}.mod-footer{font-size:.8rem;text-align:center;overflow:hidden}.mod-footer__link{color:#27c946;display:inline-block;text-decoration:none;padding-bottom:.1rem;border-bottom:1px solid #27c946;margin-bottom:2.5rem}code[class*=language-],pre[class*=language-]{color:#000;background:none;text-shadow:0 1px #fff;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}pre[data-line]{position:relative;padding:1em 0 1em 3em}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:hsla(24,20%,50%,.08);background:linear-gradient(90deg,hsla(24,20%,50%,.1) 70%,hsla(24,20%,50%,0));pointer-events:none;line-height:inherit;white-space:pre}.line-highlight:before,.line-highlight[data-end]:after{content:attr(data-start);position:absolute;top:.4em;left:.6em;min-width:1em;padding:0 .5em;background-color:hsla(24,20%,50%,.4);color:#f5f2f0;font:700 65%/1.5 sans-serif;text-align:center;vertical-align:.3em;border-radius:49.95rem;text-shadow:none;box-shadow:0 1px #fff}.line-highlight[data-end]:after{content:attr(data-end);top:auto;bottom:.4em}code,code[class*=language-],pre[class*=language-]{color:#333;text-align:left;white-space:pre;word-spacing:normal;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;font-family:Consolas,Liberation Mono,Menlo,Courier,monospace;line-height:1.4;direction:ltr;cursor:text}pre[class*=language-]{overflow:auto;margin:1em 0;padding:1.2em;border-radius:.15rem;font-size:85%}li code,p code,table code{margin:0;border-radius:.15rem;padding:.2em 0;font-size:85%}li code:after,li code:before,p code:after,p code:before,table code:after,table code:before{letter-spacing:-.2em;content:"\00a0"}:not(pre)>code[class*=language-],code,pre[class*=language-]{background:#f7f7f7}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#969896}.token.atrule,.token.attr-value,.token.punctuation,.token.string{color:#183691}.token.property,.token.tag{color:#63a35c}.token.boolean,.token.number{color:#0086b3}.language-css .token.string,.token.attr-name,.token.attr-value .punctuation:first-child,.token.entity,.token.important,.token.keyword,.token.operator,.token.regex,.token.selector,.token.url{color:#a71d5d}.token.entity{cursor:help}.namespace{opacity:.7}@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{background-position:-.2rem -.2rem}.mod-discovery__icon_moment,.mod-discovery__icon_qrcode{background-image:url(../sprite/style-doc@2x.png);background-size:4.35rem}.mod-discovery__icon_qrcode{background-position:-1.65rem -.2rem}.mod-discovery__icon_shake{background-position:-.2rem -1.65rem}.mod-discovery__icon_locaitonservice,.mod-discovery__icon_shake{background-image:url(../sprite/style-doc@2x.png);background-size:4.35rem}.mod-discovery__icon_locaitonservice{background-position:-1.65rem -1.65rem}.mod-discovery__icon_bottle{background-position:-3.1rem -.2rem}.mod-discovery__icon_bottle,.mod-discovery__icon_jd{background-image:url(../sprite/style-doc@2x.png);background-size:4.35rem}.mod-discovery__icon_jd{background-position:-3.1rem -1.65rem}.mod-discovery__icon-game{background-image:url(../sprite/style-doc@2x.png);background-size:4.35rem;background-position:-.2rem -3.1rem}} -------------------------------------------------------------------------------- /project/tmp/css/style-index.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 2rem}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 .1rem;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-.1rem}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html[data-rem="375"]{font-size:20px}@media only screen and (min-width:320px){html[data-rem="375"]{font-size:17.06px!important}}@media only screen and (min-width:375px){html[data-rem="375"]{font-size:20px!important}}@media only screen and (min-width:400px){html[data-rem="375"]{font-size:21.33333333px!important}}@media only screen and (min-width:414px){html[data-rem="375"]{font-size:22.08px!important}}@media only screen and (min-width:480px){html[data-rem="375"]{font-size:25.6px!important}}html[data-rem="320"]{font-size:20px}@media only screen and (min-width:375px){html[data-rem="320"]{font-size:23.4375px!important}}@media only screen and (min-width:400px){html[data-rem="320"]{font-size:25px!important}}@media only screen and (min-width:414px){html[data-rem="320"]{font-size:25.875px!important}}@media only screen and (min-width:480px){html[data-rem="320"]{font-size:30px!important}}.mod-header{text-align:center;margin-top:2rem;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid #eee}.mod-header__logo{display:block;width:5rem;height:5rem;background-size:5rem;text-indent:-499.95rem;margin:0 auto 1rem;background-image:url(../img/weflow-logo.png)}.mod-header__title{display:block;color:#065315;text-decoration:none;font-size:1rem;margin-bottom:1rem}.mod-header__desc{color:#999;font-size:.7rem}.mod-example{text-align:center;margin-bottom:2rem}.mod-example__title{display:inline-block;font-size:.9rem;text-align:center;border-bottom:1px solid #409224;padding:.25rem;margin-bottom:1rem;color:#326532;text-decoration:none}.mod-example__preview{border:.1rem dashed #ddd;margin:0 2.5rem;padding:1rem;margin-bottom:1rem;width:auto;height:auto;background-image:url(../img/bg-body.png);background-repeat:repeat}.mod-example__notes{background-color:rgba(237,223,0,.04);display:table;margin:0 auto;border-radius:.25rem;padding:.5rem;font-size:.6rem;line-height:1rem;text-align:left;color:#888;margin-bottom:1rem;border:1px solid rgba(237,223,0,.24)}.mod-example__doc-title{background:#eff4ef;padding:.25rem 0;color:#326532}.mod-example__show{overflow:hidden;margin:0 2.5rem;font-size:.8rem}.mod-example__before{width:49%;float:left}.mod-example__after{width:49%;float:right}.mod-example__svg-red path,.mod-example__svg-red use{fill:red}.mod-example__svg-blue path,.mod-example__svg-blue use{fill:blue}.mod-example__svg-button{background:gray;color:#fff;border-radius:.5rem}.mod-discovery{text-align:center}.mod-discovery__icon{width:1.25rem;height:1.25rem;display:inline-block;margin:0 .25rem}.mod-discovery__icon_moment{background-position:-6.6rem -4.85rem}.mod-discovery__icon_moment,.mod-discovery__icon_qrcode{background-image:url(../sprite/style-index.png);width:1.25rem;height:1.25rem}.mod-discovery__icon_qrcode{background-position:-8.05rem -3.4rem}.mod-discovery__icon_shake{background-position:-8.05rem -4.85rem}.mod-discovery__icon_locaitonservice,.mod-discovery__icon_shake{background-image:url(../sprite/style-index.png);width:1.25rem;height:1.25rem}.mod-discovery__icon_locaitonservice{background-position:-.2rem -6.6rem}.mod-discovery__icon_bottle{background-position:-1.65rem -6.6rem}.mod-discovery__icon_bottle,.mod-discovery__icon_jd{background-image:url(../sprite/style-index.png);width:1.25rem;height:1.25rem}.mod-discovery__icon_jd{background-position:-6.6rem -3.4rem}.mod-discovery__icon-game{background-image:url(../sprite/style-index.png);background-position:-3.1rem -6.6rem;width:1.25rem;height:1.25rem}.mod-svg__background-icon{display:inline-block;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='51' height='52' viewBox='0 0 51 52' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='M.154 2.198h8.472V.476H.154z'/%3E%3Cpath id='c' d='M.07 8.541h1.8V.008H.07z'/%3E%3C/defs%3E%3Cg transform='translate(0 1)' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23DEDEDE' stroke-width='.5' fill='%23FFF' cx='25.5' cy='25' r='25'/%3E%3Cpath d='M35.929 18.523h-20.86c-.557 0-1.009.483-1.009 1.08v13.814c0 .3.1.554.296.765a.94.94 0 0 0 .713.316h20.86c.557 0 1.009-.483 1.009-1.08V19.602c0-.299-.098-.553-.296-.764a.939.939 0 0 0-.713-.316zm-20.303 14.32h19.745V20.177H15.626v12.666z' fill='%23F76260'/%3E%3Cg transform='translate(21.119 24.832)'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath fill='%23F76260' mask='url(%23b)' d='M-1.258 4.638h11.295v-6.244H-1.258z'/%3E%3C/g%3E%3Cg transform='translate(24.405 22.074)'%3E%3Cmask id='d' fill='%23fff'%3E%3Cuse xlink:href='%23c'/%3E%3C/mask%3E%3Cpath fill='%23F76260' mask='url(%23d)' d='M-1.996 9.964h6.199V-1.414h-6.199z'/%3E%3C/g%3E%3Cpath d='M20.533 18.553v-.603c0-1.512 1.288-2.737 2.875-2.737h4.2c1.589 0 2.876 1.225 2.876 2.737v.603' stroke='%23F76260' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E")}.mod-social-media{text-align:center}.mod-social-media__icon{width:4.5rem;height:4.5rem;display:inline-block;margin:0 .25rem;background-color:#fff;border-radius:.5rem;background-clip:padding-box}.mod-social-media__icon_share{background-position:-3.4rem -.2rem}.mod-social-media__icon_moment,.mod-social-media__icon_share{background-image:url(../sprite/style-index.png);width:3rem;height:3rem}.mod-social-media__icon_moment{background-position:-.2rem -3.4rem}.mod-social-media__icon_favadd{background-position:-3.4rem -3.4rem}.mod-social-media__icon_copy,.mod-social-media__icon_favadd{background-image:url(../sprite/style-index.png);width:3rem;height:3rem}.mod-social-media__icon_copy{background-position:-6.6rem -.2rem}.mod-social-media__icon_refresh{background-image:url(../sprite/style-index.png);background-position:-.2rem -.2rem;width:3rem;height:3rem}.mod-sticker__list-border{border:1px solid #0a2;padding:.5rem;margin:.25rem}.mod-sticker__list-border>div{padding:.2rem 0}.mod-sticker__icon{width:2.5rem;height:2.5rem;display:inline-block;background-size:2.5rem;margin:0 .25rem}.mod-sticker__icon_1{background-image:url(../img/mod-sticker/1.gif)}.mod-sticker__icon_2{background-image:url(../img/mod-sticker/2.gif)}.mod-sticker__icon_3{width:2.5rem;height:2.5rem;background-image:url(../img/mod-sticker/3.gif)}.mod-sticker__icon_4{width:2.5rem;height:2.5rem;background-image:url(../img/mod-sticker/4.gif)}.mod-footer{font-size:.8rem;text-align:center;overflow:hidden}.mod-footer__link{color:#27c946;display:inline-block;text-decoration:none;padding-bottom:.1rem;border-bottom:1px solid #27c946;margin-bottom:2.5rem}@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{background-position:-6.6rem -4.85rem}.mod-discovery__icon_moment,.mod-discovery__icon_qrcode{background-image:url(../sprite/style-index@2x.png);background-size:9.6rem}.mod-discovery__icon_qrcode{background-position:-8.05rem -3.4rem}.mod-discovery__icon_shake{background-position:-8.05rem -4.85rem}.mod-discovery__icon_locaitonservice,.mod-discovery__icon_shake{background-image:url(../sprite/style-index@2x.png);background-size:9.6rem}.mod-discovery__icon_locaitonservice{background-position:-.2rem -6.6rem}.mod-discovery__icon_bottle{background-position:-1.65rem -6.6rem}.mod-discovery__icon_bottle,.mod-discovery__icon_jd{background-image:url(../sprite/style-index@2x.png);background-size:9.6rem}.mod-discovery__icon_jd{background-position:-6.6rem -3.4rem}.mod-discovery__icon-game{background-position:-3.1rem -6.6rem}.mod-discovery__icon-game,.mod-social-media__icon_share{background-image:url(../sprite/style-index@2x.png);background-size:9.6rem}.mod-social-media__icon_share{background-position:-3.4rem -.2rem}.mod-social-media__icon_moment{background-position:-.2rem -3.4rem}.mod-social-media__icon_favadd,.mod-social-media__icon_moment{background-image:url(../sprite/style-index@2x.png);background-size:9.6rem}.mod-social-media__icon_favadd{background-position:-3.4rem -3.4rem}.mod-social-media__icon_copy{background-position:-6.6rem -.2rem}.mod-social-media__icon_copy,.mod-social-media__icon_refresh{background-image:url(../sprite/style-index@2x.png);background-size:9.6rem}.mod-social-media__icon_refresh{background-position:-.2rem -.2rem}}@media only screen and (min-device-width:414px) and (-webkit-min-device-pixel-ratio:3){.mod-social-media__icon_share{background-position:-.2rem -.2rem}.mod-social-media__icon_moment,.mod-social-media__icon_share{background-image:url(../sprite/style-index@3x.png);background-size:9.6rem}.mod-social-media__icon_moment{background-position:-3.4rem -.2rem}.mod-social-media__icon_favadd{background-position:-.2rem -3.4rem}.mod-social-media__icon_copy,.mod-social-media__icon_favadd{background-image:url(../sprite/style-index@3x.png);background-size:9.6rem}.mod-social-media__icon_copy{background-position:-3.4rem -3.4rem}.mod-social-media__icon_refresh{background-image:url(../sprite/style-index@3x.png);background-size:9.6rem;background-position:-6.6rem -.2rem}} -------------------------------------------------------------------------------- /project/tmp/img/bg-body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/tmp/img/bg-body.png -------------------------------------------------------------------------------- /project/tmp/img/mod-sticker/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/tmp/img/mod-sticker/1.gif -------------------------------------------------------------------------------- /project/tmp/img/mod-sticker/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/tmp/img/mod-sticker/2.gif -------------------------------------------------------------------------------- /project/tmp/img/mod-sticker/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/tmp/img/mod-sticker/3.gif -------------------------------------------------------------------------------- /project/tmp/img/mod-sticker/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/tmp/img/mod-sticker/4.gif -------------------------------------------------------------------------------- /project/tmp/img/weflow-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/tmp/img/weflow-logo.png -------------------------------------------------------------------------------- /project/tmp/js/index.js: -------------------------------------------------------------------------------- 1 | "use strict";var name="ES2015",output=name+" test";console.log(output); -------------------------------------------------------------------------------- /project/tmp/media/bgm.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/tmp/media/bgm.mp3 -------------------------------------------------------------------------------- /project/tmp/sprite/style-doc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/tmp/sprite/style-doc.png -------------------------------------------------------------------------------- /project/tmp/sprite/style-doc@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/tmp/sprite/style-doc@2x.png -------------------------------------------------------------------------------- /project/tmp/sprite/style-index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/tmp/sprite/style-index.png -------------------------------------------------------------------------------- /project/tmp/sprite/style-index@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/tmp/sprite/style-index@2x.png -------------------------------------------------------------------------------- /project/tmp/sprite/style-index@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tencent/tmt-workflow/e24fd92c954b8570b18b29ae7829254f0d86db7e/project/tmp/sprite/style-index@3x.png -------------------------------------------------------------------------------- /project/tmp/svg/svgicon/12w.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project/tmp/svg/svgicon/4g.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project/tmp/svg/svgicon/bl.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project/tmp/svg/svgicon/ss.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project/tmp/svg/svgicon/translate.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project/tmp/svg/svgicon/ts.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /project/tmp/svg/svglogo.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------