Git Product home page Git Product logo

tmt-workflow's Introduction

项目迁移说明

由于业务调整,本项目不再更新,感谢大家一直以来的支持。
后续需求会合并到 Feflow 项目进行开发迭代,请移步:

tmt-workflow Version Number

Build Status Win Build status devDependencies License

一个基于 Gulp、高效、跨平台(macOS & Win)、可定制的前端工作流程。
现已推出 GUI 桌面工具:WeFlow,无需安装任何环境依赖即可使用,官网下载:http://weflow.io/

功能特性

快速开始

请确保已安装 Node.js (已支持到最新版,如:v5+, v8, v9 等)

  1. 全局安装 Gulp,执行:npm install gulp-cli -g
  2. 点击下载 tmt-workflow,进入根目录执行: npm install

推荐使用 yarn 安装环境依赖,详见yarn 注1:Windows 用户请先安装 git,然后在 Git Bash 下执行 npm install 即可(非 CMD)。

注2:如遇 npm install 网络问题,推荐尝试 cnpmNPM腾讯云分流 安装环境依赖

目录结构

工作流目录结构

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

配置文件 .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 功能
}

任务说明

注1:./src 为源文件(开发目录),/dev/dist 目录为流程自动生成的临时目录
注2:FTPzip 任务执行后会自动删除 /dist 目录。

1. 开发任务 gulp build_dev

按照目录结构创建好项目后,执行 gulp build_dev 生成开发文件位于 /dev,包含以下过程

  • 完成 ejs -> htmlless -> css 编译
  • 自动监听文件改动,触发浏览器刷新

注:浏览器刷新功能可在 .tmtworkflowrc 中进行配置

执行后 Demo 预览:project/dev/html/index.html

2. 生产任务 gulp build_dist

开发完成后,执行 gulp build_dist 生成最终文件到 /dist 目录,包含以下过程:

  • LESS/EJS 编译
  • CSS/JS/IMG 压缩合并
  • slice 图片合并成雪碧图
  • SVG 内联压缩打包合并
  • 文件添加版本号
  • WebP 图片支持

执行后 Demo 预览:project/dist/html/index.html

3. FTP 部署 gulp ftp

依赖于 生产任务,执行后,会先执行 gulp build_dist ,然后将其生成的 /dist 目录上传至 .tmtworkflowrc 指定的 FTP 服务器。

4. 打包任务 gulp zip

gulp build_dist 生成 dist 目录压缩成 zip 格式。

更多详细说明 参见 WiKi

使用预览

推荐配合 WebStorm 等编辑器的 Gulp 任务管理器 使用,体验更佳。

也可配合桌面工具:[WeFlow],无需安装环境依赖,获得可视化的操作体验。

tmt-workflow yo

其它说明

tmt-workflow 具有良好的定制性扩展性,用户可针对自身团队的具体需求,参看以下文档进行定制:

参与贡献

如果你有 Bug反馈功能建议,请创建 Issue 或发送 Pull Request,非常感谢。

腾讯开源激励计划 鼓励开发者的参与和贡献,期待你的加入。

License

所有代码采用 MIT License 开源,可根据自身团队和项目特点 fork 进行定制。

tmt-workflow's People

Contributors

bitdeli-chef avatar bugluo avatar hoosin avatar hzlzh avatar littledu avatar zhanyuzhang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tmt-workflow's Issues

关于gulp zip

请教个问题, 为何gulp zip是增量打包方式?只有修改过的文件才会被纳入?之前版本好像不是这样的。

发布流程里的雪碧图问题

因为我看这是开发过程把要合成雪碧图的图片放在slice里,发布生产时会合成雪碧图,那css里引用的类的话呢,也会自动定位图片替换背景position么? 还是要遵循什么class的命名规范

最近遇到官网的目录结构不适合html文件放到html目录里,

于是做了些修改,发现TmTIndex.js这个插件并没有引用配置里的目录,而是写死的html位置,导致之前就算改配置里的入口文件也没用,还在Dev里加入了posthtml的include插件,可以用标签方式导入别的html文件作为模板块,这样就更灵活组装头部底部和部分页面共用,它和别的插件最大区别就是不是用的注释标签,而是这个自定标签,在gulp的时候它会被插件替换成src 批向的html里的内容,最重要的是它可以被不用的时候被注释!(其它注释型标签不能被注释);
这些新的东西需要我push给你么?

这个 Workflow 支持 EJS 模板引擎,可为什么 Task 里面编译 HTML 的代码里没有转换 .ejs 格式为 .html 格式的步骤?

我没用过 EJS 模板引擎,但以往用其他模板引擎的经验告诉我,模板应该都有自己特殊的格式,例如 Handlebars 的文件后缀为 .hbs。

既然本 Workflow 是支持 EJS 模板引擎的,为什么在 Task 里面编译 HTML 的代码部分没有转换 .ejs 格式文件为 .html 的步骤?

https://github.com/weixin/tmt-workflow/blob/master/_tasks/TaskBuildDev.js#L99-L118

BTW,我用 EJS 模板主要是为了快速引入 CSS 和 JS 而已……麻烦告知一下正确的用法。

build_dev

build_dev这个任务要自己写的吗

TaskBuildDev.js发现监视任务的BUG和win路径BUG

两个BUG都在watchHandler 这个回调函数中,对监视任务的removed和add动作操作上有两个问题:
1, 201行的util.loadPlugin('BuildDev');这个方法是载入配置文件中定义的发布后要输入的插件,但你传入的字距和你的.tmtworkflowrc文件中的字串明显不一样,所以这个函数会执行不能。
2,file.replace('src/', 'dev/'); 这个方法只能用在mac等liunx系统下,在windows系统中,你这个已经不是在流中了,回调返回的路径的分隔斜杠是"",而不是“/",所以这个路径是不会切换成开发目录下的路径!
以上两个BUG最终会导致不管是win和liunx下,当文件被删除或是文件名被修改,开发环境的文件是不会有任何刷新。。
然后强烈建议把配置文件开放,不要弄这么个东西,既然开源,为什么要把配置文件搞得这么麻烦,比如直接读写在项目目录下的config.json什么的多好,这样就能根据不同项目进行定制插件和流程,又能共享插件和你的方法。
image
顺便再帖上我做的修正;

var watchHandler = function(type, file) {
        var target = file.match(/^src[\/|\\](.*?)[\/|\\]/)[1];
        var pathSrc = file.match(/^src[\/|\\]/)[0],
            pathDev;
        if (pathSrc === 'src/') {
            pathDev = 'dev/';
        } else if (pathSrc === 'src\\') {
            pathDev = 'dev\\';
        }else{
            throw(pathSrc + "根路径出错");
        };
        var tmp = file.replace(pathSrc, pathDev);
        switch (target) {

然后对是下面的调用错误的修正以html文件为例:

case 'html':
                if (type === 'removed') {
                    del([tmp]).then(function() {
                        util.loadPlugin('build_dev');
                    })
                } else {
                    compileHtml();
                }

                if (type === 'add') {
                    setTimeout(function() {
                        util.loadPlugin('build_dev');
                    }, 500);
                }

                break;

配置文件啥的我自己去取我配置的文件,然后把gulpfile和util里的参数换了。

图片问题

很奇怪的一个问题,运行gulp build_dist第一次时正常,多次之后图片没有拷贝过来合并,望大神指点
image

建议支持 JS 模块化

建议新增对 JS 模块化的支持。使用 ES2015 或者 Require.js 之类。像 REM 一样,在初始化 Workflow 时可选。

雪碧图自动适配问题

我发现在适配方面还是有点问题 是基于iphone6的 375尺寸 是没问题的 ,但是plus和小一点屏幕计算都有一点点失误。求解决方案
image
image

雪碧图压缩找不到文件

w mi w0fxsg6 _ p 9z6
如图 在common里面的less有使用背景图片,dev都是正常的,但是dist就会告知找不到图片,原因是少找了一个层级,如何解决
mv0n_j arpkvw vry a2 g

关于reversion解决方案的bug

reversion解决方案发现一个bug。dist后href的几种地址方式。
qq 20160622162305
1、绝对地址没问题
2和3、项目内不存在的相对地址没问题
4和5、如图。

配置文件在win下面自己要定义比较麻烦

因为这个配置文件是.tmtworkflow,这样格式的,在win下面只能复制你的同样的文件,自己是创建不来这种空文件名只有扩展名的文件,会报错,然后IDE也是识别后会忽略,只能在文件夹资源管理器里找到改,建议转成json也是比较符合nodejs的一般规范,也比较好用。。

我的nodejs刚学不久,试着改了一下你的run_tasks的方法去找配置json,正在测试

另外,我也是深圳的,我哥和以前好多也在TX呢,方便加Q交流不。

[HowTo] Install NodeJS & Grunt

Install NodeJS via brew or you can download it form http://nodejs.org/:

brew install node

then run node -v & npm -v to check is that is ok.

after that:

run

npm install -g grunt-cli

npm install grunt --save-dev

and then grunt --version to check

[How To] Install GraphicsMagick and Phantomjs

环境准备

Mac OS

  1. 建议使用 Brew 安装 Node.js [默认此步骤已完成]

  2. 单独安装下面两个依赖

    // 安装 GraphicsMagick 图像处理库
    brew install GraphicsMagick
    
    // 安装 Phantomjs 库
    brew install phantomjs
    
  3. 运行 gm versionphantomjs --version 来测试上述依赖是否成功安装完成

Windows

  1. 安装 Node.js 默认此步骤已完成
  2. 下载安装 GraphicsMagickPhantomjs
  3. 下载完毕,解压到任意目录后,会得到文件夹路径,继续添加环境变量

Mac OS & Windows 通用步骤

  1. 成功安装上述GraphicsMagickPhantomjs之后,在项目目录下运行 npm install 继续安装其他依赖。

screen shot 2014-02-28 at 1 02 52 am
screen shot 2014-02-28 at 1 04 51 am

rem字体

rem的字体解决也是rem么 还是不同的dpr下不同的PX~~

lib-rem.less 小讨论

lib-rem我看用css用了一些响应式的定义,它和用js里的ready+resize动态根据宽度改有哪些优缺点呢。

如何进行组件化开发?

r77c k r 7570u gkf__l p

假如我这里写了一个header组件,它有js less 和html结构, 我想在index.html来include它,我希望gulp能帮我把less文件编译到/dev/css/common/header.css,然后动态吧这个css加载到head标签里面。这样开发是否正确?

[How To] Windows 如何给 GraphicsMagick & Phantomjs 添加环境变量

我的 电脑->属性->高级->环境变量->系统变量 中添加 环境变量

以下是范例:(注意是 Q8 而非 Q16,到目录结束,而非可执行文件)

c:\program files\graphicsmagick-1.3.19-q8;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\Program Files\nodejs;C:\Program Files\GraphicsMagick-1.3.19-Q8;C:\Program Files\phantomjs-1.9.2-windows;

path1
path2
path3

关于引入css库问题

我现在想在开发中引入 bootstrap 库,但是无论放在 scr 或者 dev 的 css 目录下,tmt-workflow 都不会进行编译,那该如何处理?

[How To] Update your forked repo to the news version?

To keep your repo updated to the newest, you can use those two ways.

  1. Use bower.io

    #view git repo
    bower info grunt-workflow
    #install Grunt-Workflow
    bower install grunt-workflow
    #update Grunt-Workflow
    bower update grunt-workflow
  2. Use git command.

git clone [email protected]:hzlzh/Grunt-Workflow.git new
git remote add bob https://github.com/hzlzh/Grunt-Workflow.git
git remote -v
git fetch bob
git merge bob/master
git push origin master

iphone 5适配

// 21.33333333 = 320*20/375 (iPhone 5)
@media only screen and (min-width: 320px) {
html {
font-size: 19PX !important;
}
}

// 17.06 = 320*20/375 (iPhone 5)
这个地方应该为17吧

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.