功能特性

• 自动化流程
  • Less -> css (Sass 可自行定制)
    
  • CSS Autoprefixer 前缀自动补全
    
  • 自动生成图片 CSS 属性，width & height 等
    
  • CSS 压缩 cssnano
    
  • CSS Sprite 雪碧图合成
    
  • Retina @2x & @3x 自动生成适配
    
  • imagemin 图片压缩
    
  • JS 合并压缩
    
  • EJS 模版语言
    
• 调试 & 部署
  • 监听文件变动，自动刷新浏览器 (LiveReload)
    
  • FTP 发布部署
    
  • ZIP 项目打包
    
• 解决方案集成
• px -> rem 兼容适配方案
  
• 智能 WebP 解决方案
  
• 去缓存文件 Reversion (MD5) 解决方案
  
• 
  

快速开始

以下 2 种方式任选，请确保已安装 Node.js 环境

• 使用 Yoeman 脚手架 generator-workflow 自动安装（推荐）：

npm install -g generator-workflow
yo workflow

• 直接下载安装：

1. 全局安装 Gulp 4，执行：npm install gulpjs/gulp#4.0 -g

2. 点击下载 tmt-workflow，进入根目录执行： npm install

注1：Gulp 4 目前 尚未正式发布，Windows 用户请先安装 git， 然后在 Git Bash 下执行 npm install 即可（非 CMD）。
注2：如遇 npm install 网络问题，推荐尝试 cnpm 安装环境依赖

目录结构

工作流目录结构

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-reset.less
│   │ ├── lib-mixins.less
│   │ ├── lib-rem.less
│   │ └── style-index.less        // CSS 编译出口文件
│   │ 
│   ├── html
│   ├── img                       // 存放背景图等无需合并雪碧图处理的图片
│   └── slice                     // 切片图片素材，将会进行雪碧图合并，同名 @2x 图片也会合并
│       ├── icon-dribbble.png
│       └── icon-dribbble@2x.png
│
├── dev                           // 开发目录，由 `gulp build_dev` 任务生成
│   ├── css
│   ├── html
│   ├── img
│   └── slice                     // 开发阶段，仅从 src/slice 拷贝至此，不做合并雪碧图处理
│
└── dist                          // 生产目录，由 `gulp build_dist` 任务生成
    ├── css
    ├── html
    ├── img
    └── sprite                    // 将 /src/slice 合并雪碧图，根据 /css 文件名，命名为 style-*.png 
        ├── style-index.png
        └── style-index@2x.png

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/1966