tmt-workflow 项目教程

tmt-workflow 项目教程

tmt-workflow A web developer workflow used by WeChat team based on Gulp, with cross-platform supported and solutions prepared. 项目地址: https://gitcode.com/gh_mirrors/tm/tmt-workflow

1. 项目的目录结构及介绍

tmt-workflow 项目的目录结构如下：

tmt-workflow/
├── _tasks/          // Gulp 任务目录
│   ├── TaskBuildDev.js
│   ├── TaskBuildDist.js
│   ├── TaskFTP.js
│   ├── TaskZip.js
│   └── ...
├── common/
│   └── webp.js
├── index.js
├── lib/
│   └── util.js
├── plugins/        // 插件目录
│   ├── TmTIndex.js
│   └── ftp.js
├── package.json
├── project/        // 项目目录
│   ├── gulpfile.js // Gulp 工作流配置文件
│   ├── src/        // 源文件目录
│   │   ├── css/
│   │   ├── html/
│   │   ├── media/
│   │   ├── img/
│   │   └── slice/
│   ├── dev/        // 开发目录
│   │   ├── css/
│   │   ├── html/
│   │   ├── media/
│   │   ├── img/
│   │   └── slice/
│   └── dist/       // 生产目录
│       ├── css/
│       ├── html/
│       ├── media/
│       ├── img/
│       └── sprite/
└── tmtworkflowrc   // 配置文件

目录结构介绍

• _tasks/: 包含所有 Gulp 任务的目录，每个任务对应一个 JavaScript 文件。
• common/: 包含一些通用的 JavaScript 文件，如 webp.js。
• index.js: 项目的入口文件。
• lib/: 包含一些工具函数或库文件，如 util.js。
• plugins/: 包含自定义的插件文件。
• package.json: 项目的依赖管理文件。
• project/: 项目的主要工作目录，包含源文件、开发目录和生产目录。
  • gulpfile.js: Gulp 工作流的配置文件。
  • src/: 源文件目录，包含 CSS、HTML、媒体文件、图片和切片图片。
  • dev/: 开发目录，由 gulp build_dev 任务生成。
  • dist/: 生产目录，由 gulp build_dist 任务生成。
• tmtworkflowrc: 项目的配置文件，包含 FTP 配置、WebP 功能、REM 支持等配置信息。

2. 项目的启动文件介绍

项目的启动文件是 gulpfile.js，位于 project/ 目录下。该文件是 Gulp 工作流的配置文件，定义了项目的构建流程和任务。

启动文件介绍

• gulpfile.js: 该文件定义了项目的构建任务，包括开发任务 build_dev、生产任务 build_dist、FTP 部署任务 ftp 和打包任务 zip。通过执行这些任务，可以完成项目的开发、构建、部署和打包。

3. 项目的配置文件介绍

项目的配置文件是 tmtworkflowrc，位于项目根目录下。该文件是一个 JSON 格式的配置文件，用于配置项目的各种功能和选项。

配置文件介绍

• ftp: 配置 FTP 发布信息，包括主机地址、端口、用户名、密码和远程路径。
• livereload: 配置浏览器自动刷新功能，包括是否开启、端口和启动路径。
• plugins: 配置插件功能，指定在特定任务执行后自动执行的插件。
• lazyDir: 配置 gulp-lazyImageCSS 插件的启用目录。
• supportWebp: 配置是否开启 WebP 解决方案。
• supportREM: 配置是否开启 REM 适配方案。
• supportChanged: 配置是否开启只编译有变动的文件。
• reversion: 配置是否开启新文件名 MD5 功能。

通过配置文件，可以灵活地调整项目的功能和行为，以满足不同的开发需求。

tmt-workflow A web developer workflow used by WeChat team based on Gulp, with cross-platform supported and solutions prepared. 项目地址: https://gitcode.com/gh_mirrors/tm/tmt-workflow