Skip to content

A web developer workflow used by WeChat team based on Gulp, with cross-platform supported and solutions prepared.

License

Notifications You must be signed in to change notification settings

haifa88/tmt-workflow

 
 

Repository files navigation

项目迁移说明

由于业务调整,本项目不再更新,感谢大家一直以来的支持。
后续需求会合并到 Feflow 项目进行开发迭代,请移步:

tmt-workflow Version Number

Build Status Win Build status devDependencies License

一个基于 Gulp、高效、跨平台(macOS & Win)、可定制的前端工作流程。
现已推出 GUI 桌面工具:WeFlow,无需安装任何环境依赖即可使用,官网下载:https://weflow.io/

功能特性

快速开始

请确保已安装 Node.js (已支持到最新版,如:v5+, v8, v9 等)

  1. 全局安装 Gulp,执行:npm install gulp-cli -g
  2. 点击下载 tmt-workflow,进入根目录执行: npm install

推荐使用 yarn 安装环境依赖,详见yarn 注1:Windows 用户请先安装 git,然后在 Git Bash 下执行 npm install 即可(非 CMD)。

注2:如遇 npm install 网络问题,推荐尝试 cnpmNPM腾讯云分流 安装环境依赖

目录结构

工作流目录结构

tmt-workflow/
│
├── _tasks          		// Gulp 任务目录
│   ├── TaskBuildDev.js     // gulp build_dev
│   ├── TaskBuildDist.js    // gulp build_dist
│   ├── TaskFTP.js      	// gulp ftp
│   ├── TaskZip.js      	// gulp zip
│   │
│   ├── common
│   │   └── webp.js
│   │
│   ├── index.js
│   │
│   ├── lib
│   │   └── util.js
│   │
│   └── plugins       		// 插件目录
│       ├── TmTIndex.js
│       └── ftp.js
│
├── package.json
│
└── project         		  // 项目目录,详见下述项目结构 ↓↓↓
    ├── src
    ├── dev
    ├── dist
    └── gulpfile.js

项目目录结构

project/                          // 项目目录
├── gulpfile.js                   // Gulp 工作流配置文件
│
├── src                           // 源文件目录,`gulp build_dev`阶段会监听此目录下的文件变动
│   ├── css                       // 存放 Less 文件的目录,只有 style-*.less 的文件名会被编译
│   │   └── lib/
│   │   │   ├── lib-reset.less
│   │   │   ├── lib-mixins.less
│   │   │   └── lib-rem.less
│   │   └── style-index.less        // CSS 编译出口文件
│   │ 
│   ├── html
│   ├── media                     // 存放媒体文件,如 bgm.mp3 abc.font 1.mp4 等
│   ├── img                       // 存放背景图等无需合并雪碧图处理的图片
│   └── slice                     // 切片图片素材,将会进行雪碧图合并,同名 @2x 图片也会合并
│       ├── icon-shake.png
│       └── [email protected]
│
├── dev                           // 开发目录,由 `gulp build_dev` 任务生成
│   ├── css
│   ├── html
│   ├── media
│   ├── img
│   └── slice                     // 开发阶段,仅从 src/slice 拷贝至此,不做合并雪碧图处理
│
└── dist                          // 生产目录,由 `gulp build_dist` 任务生成
    ├── css
    ├── html
    ├── media
    ├── img
    └── sprite                    // 将 /src/slice 合并雪碧图,根据 /css 文件名,命名为 style-*.png 
        ├── style-index.png
        └── [email protected]

配置文件 .tmtworkflowrc

.tmtworkflowrc 配置文件为隐藏文件,位于工作流根目录,可存放配置信息或开启相关功能,详见WiKi
如:FTP 配置信息、开启 WebP功能,开启 REM 支持等。

{
  // FTP 发布配置
  "ftp": {
    "host": "xx.xx.xx.xx",
    "port": "8021",
    "user": "tmt",
    "pass": "password",
    "remotePath": "remotePath",         // 默认上传至根目录,此属性可指定子目录路径
    "includeHtml": true                 // FTP 上传时是否包含 .html 文件
  },

  // 浏览器自动刷新
  "livereload": {
     "available": true,                 // 开启
     "port": 8080,
     "startPath": "html/TmTIndex.html"  // 启动时自动打开的路径
  },

  // 插件功能

  // 路径相对于 tasks/plugins 目录
  "