由于业务调整,本项目不再更新,感谢大家一直以来的支持。
后续需求会合并到 Feflow 项目进行开发迭代,请移步:
一个基于 Gulp、高效、跨平台(macOS & Win)、可定制的前端工作流程。
现已推出 GUI 桌面工具:WeFlow,无需安装任何环境依赖即可使用,官网下载:https://weflow.io/
- 自动化流程
- 调试 & 部署
- 解决方案集成
请确保已安装 Node.js (已支持到最新版,如:v5+, v8, v9 等)
- 全局安装 Gulp,执行:
npm install gulp-cli -g
- 点击下载 tmt-workflow,进入根目录执行:
npm install
推荐使用
yarn
安装环境依赖,详见yarn 注1:Windows 用户请先安装 git,然后在 Git Bash 下执行npm install
即可(非CMD
)。
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
配置文件为隐藏文件,位于工作流根目录,可存放配置信息或开启相关功能,详见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 目录
"