generator-xbt

xbt workflow generator

项目基于 Tencent/tmt-workflow 构建 xbt是基于gulp构建的前端工作流, 其不限于以下功能：

功能特性

• 自动化流程

  • Less/Sass -> CSS
  • CSS Autoprefixer 前缀自动补全
  • 自动生成图片 CSS 属性，width & height 等
  • 自动内联 SVG 到 CSS
  • CSS 压缩 cssnano
  • CSS Sprite 雪碧图合成
  • Retina @2x & @3x 自动生成适配
  • imagemin 图片压缩
  • JS 合并压缩
  • EJS 模版语言

• 调试 & 部署

  • 监听文件变动，自动刷新浏览器 (LiveReload)
  • FTP 发布部署
  • ZIP 项目打包

• 解决方案集成

  • px -> rem 兼容适配方案
  • 智能 WebP 解决方案
  • SVG 整体解决方案
  • 去缓存文件 Reversion (MD5) 解决方案

• 除以上官方功能支持外，继续支持

  • CDN解决方案
  • inline resource资源管理方案，包括：js,css

快速开始

  1. `npm install gulpjs/gulp#4.0 -g`
  2. `npm install -g yo`
  3. `npm install -g generator-xbt`
  4. `yo xbt`

配置文件 .tmtworkflowrc

.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 目录
  "plugins": {
    "build_devAfter": ["TmTIndex"],     // build_dev 任务执行完成后，自动执行
    "build_distAfter": [],              // build_dist 任务执行完成后，自动执行
    "ftpAfter": ["ftp"]                 // ftp 任务执行完成后，自动执行
  },

  "lazyDir": ["../slice"],              // gulp-lazyImageCSS 启用目录
  
  "supportWebp": false,                 // 开启 WebP 解决方案

  "supportREM": false,                  // 开启 REM 适配方案，自动转换 px -> rem

  "supportChanged": false,              // 开启 只编译有变动的文件

  "reversion": false                    // 开启 新文件名 md5 功能
}

License

所有代码采用 MIT License