weflow如何使用?weflow的使用及配置文件教程
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的使用及配置文件教程的全部内容,希望大家喜欢!更多精彩,尽在网站!
推荐阅读
-
搜狗壁纸如何使用 搜狗桌面壁纸的安装使用图文教程
-
如何使用百度图片搜索批量下载工具下载图片的详细图文教程
-
Ultra Video Splitter如何使用?快速分割截取为相同格式的视频教程
-
如何使用七牛Python SDK写一个同步脚本及使用教程
-
iOS App开发中使用及自定义UITableViewCell的教程
-
vue-cli3脚手架的配置及使用教程
-
如何使用Python爬虫获取offcn上的公考信息及写入Excel表格并发送至指定邮箱
-
weflow如何使用?weflow的使用及配置文件教程
-
千牛PC版子账号如何使用插件的图文教程
-
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解