weflow如何使用?weflow的使用及配置文件教程

所属分类: 软件教程 / 编程开发 阅读数: 653
收藏 0 赞 0 分享

weflow是什么?weflow如何使用?WeFlow一个高效、强大、跨平台的前端开发工作流工具,具体的说就是一个 GUI 的前端工具,可以为用户提供一套标准化、规范化的工作流程,从而让大家在交接协作的时候更为高效有序。接下来小编就给大家简单介绍一下weflow怎么用,以及如何配置文件,需要的用户欢迎借鉴!

weflow怎么用?

1.开发任务 gulp build_dev

添加文件点击开发,进入开发模式

自动创建与 src 目录一致的 dev 目录存放 ejs 和 less 编译后的文件

自动监听所有文件变动

监听到文件变动时自动刷新浏览器, 可在工作流配置文件 .tmtworkflowrc 选择开启或关闭

2. 生产任务 gulp build_dist

当开发完成之后,点击生产编译,执行 gulp build_dist 生成可供发布上线的最终文件。 自动生成 dist 目录,存放所有经过编译合并的文件

3. FTP 部署 gulp ftp

此任务依赖于 生产任务,执行 gulp ftp时,会先执行 gulp build_dist 生成 dist 目录,然后将生成的 dist 目录上传至 .tmtworkflowrc 指定的 ftp 地址。

4. 打包 gulp zip

执行 zip 任务时,会先执行 gulp build_dist 生成 dist 目录,再将其打包压缩成 zip 包。

配置文件

在与项目同级的目录下,有一个全局的 .tmtworkflowrc 配置文件,项目下也可以有一个 .tmtworkflowrc,程序运行时先寻找当前目录下是否有配置文件,如果没有,则继续往上一层目录寻找,直到系统目录

我们使用 rc 组件来管理配置文件。如果项目下不存在 .tmtworkflowrc 文件,将会根据以下优化级进行寻找配置。

系统环境变量以 tmtworkflow_ 开头的变量,(例如: tmtworkflow_foo__bar__baz => foo.bar.baz)

项目目录下的 .tmtworkflowrc 或依次向上遍历查找 ./ ../ ../../ ../../../

$HOME/.tmtworkflowrc

$HOME/.tmtworkflowrc/config

$HOME/.config/tmtworkflowrc

$HOME/.config/tmtworkflowrc/config

/etc/tmtworkflowrc

/etc/tmtworkflowrc/config

工作流默认配置

通过修改配置文件,可以实现自定义任务中的相关流程,例如:是否需要编译一份 WEBP 资源,是否编译 HTML 文件到 dist 目录。

.tmtworkflowrc 配置示例

{

  //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"],  //dev 任务执行后自动执行

    "build_distAfter": [],          //build 任务执行后自动执行

    "ftpAfter": ["ftp"]        //ftp 任务执行后自动执行

  },

  "lazyDir": ["../slice"], //gulp-lazyImageCSS 寻找目录(https://github.com/weixin/gulp-lazyimagecss)

  "supportWebp": false,  //编译使用 webp

  "supportREM": false,   //REM转换

  "reversion": false     //新文件名功能

}

教程结束,以上就是关于weflow如何使用?weflow的使用及配置文件教程的全部内容,希望大家喜欢!更多精彩,尽在脚本之家网站!

更多精彩内容其他人还在看

parse_url函数解析

  描述  array parse_url ( string url )      此函数返回一个关联数组,包含现有 URL 的各种组成部分。如果缺少了其中的某一个,则不会为这个组成部分创建数组项。组成部分为:      scheme - ...
收藏 0 赞 0 分享

visualstudio2019怎么连接并使用VSTS?

visualstudio2019怎么连接并使用VSTS?visual studio 2019使用的时候,想要连接visual studio team service,该怎么操作呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

vscode怎么规范代码? vscode代码格式化的教程

vscode怎么规范代码?vscode编程开发的时候,发现代码很轮,想要自动格式化代码,该怎么操作呢?下面我们就来看看vscode代码格式化的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Sublime Text英文字母大小写怎么切换?

Sublime Text英文字母大小写怎么切换?Sublime Text中编程开发的时候,想要切换英文大小写,该怎么切换呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

CodeBlocks(vc开发工具)的入门使用教程

今天起我们将加大对其他编译器学习的支持,对于训练场中的题目,我们极力建议大家以CodeBlocks作为编程工具,因为VC6的种种问题及与训练场判题系统标准的不符,导致不少新同学被坑不少
收藏 0 赞 0 分享

Sublime代码编辑器怎么重新打开编码?

Sublime代码编辑器怎么重新打开编码?Sublime代码编辑器之前变价的编码想要打开,该怎么打开呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

vb怎么将年表分成四份季度表?

vb怎么将年表分成四份季度表?visual basic中的一个表想要分成多分表,该怎么实现呢?我们可以使用代码实现,下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

VB怎么编写给表格快速添加批注的代码?

VB怎么编写给表格快速添加批注的代码?想要给表格中的数据添加批注,我们可以使用vb代码来实现,下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

UltraEdit怎么修改选中文本的颜色?

UltraEdit怎么修改选中文本的颜色?UltraEdit编程开发的时候,想要修改文本的颜色,该怎么修改选中文本的颜色呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

ueditor编辑器怎么修改复制粘贴文档源代码的字体?

ueditor编辑器怎么修改复制粘贴文档源代码的字体?ueditor复制来的代码想要编辑一下,该怎么设置代码字体大小呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多