扫一扫分享
以下 2 种方式任选,请确保已安装 Node.js 环境
使用 Yoeman 脚手架 generator-workflow 自动安装(推荐):
npm install -g generator-workflow
yo workflow
直接下载安装:
全局安装 Gulp 4,执行:npm install gulpjs/gulp#4.0 -g
点击下载 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
手机预览