Loading...
tmt-workflow
香港
程序代码 模块/管理

tmt-workflow

一个基于 Gulp(v4.0)、高效、跨平台(Mac & Win)、可定制的前端工作流程

爱站权重:PC 百度权重移动 百度移动权重
其他站点: GitHub

功能特性

  • 自动化流程
    • 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

数据统计

数据评估

tmt-workflow浏览人数已经达到12,如你需要查询该站的相关权重信息,可以点击"爱站数据""Chinaz数据"进入;以目前的网站数据参考,建议大家请以爱站数据为准,更多网站价值评估因素如:tmt-workflow的访问速度、搜索引擎收录以及索引量、用户体验等;当然要评估一个站的价值,最主要还是需要根据您自身的需求以及需要,一些确切的数据则需要找tmt-workflow的站长进行洽谈提供。如该站的IP、PV、跳出率等!

关于tmt-workflow特别声明

本站东辰资源网提供的tmt-workflow都来源于网络,不保证外部链接的准确性和完整性,同时,对于该外部链接的指向,不由东辰资源网实际控制,在2021年10月27日 上午9:08收录时,该网页上的内容,都属于合规合法,后期网页的内容如出现违规,可以直接联系网站管理员进行删除,东辰资源网不承担任何责任。

相关导航

暂无评论

暂无评论...