How to use weflow? A tutorial of using and configuring web flow


What is weflow? How to use weflow? Weflow is an efficient, powerful, cross platform front-end development workflow tool, specifically a GUI front-end tool, which can provide users with a set of standardized and standardized workflow, so that everyone can be more efficient and orderly when handing over and cooperating. Next, I will give you a brief introduction of how to use webflow and how to configure files. Users who need it are welcome to learn from it!

Software name:
Weflow v1.3.3 free green
Software size:

How to use weflow?

1. Development task

Add files and click development to enter development mode

Automatically create a dev directory consistent with the SRC directory to store EJS and less compiled files

Automatically monitor all file changes

Automatically refresh the browser when listening to file changes. You can choose to turn it on or off in the workflow configuration file. Tmtworkflowrc

2. Production task

When the development is completed, click production compile, execute gulp build ﹣ dist to generate the final file for release and launch. Automatically generate dist directory to store all compiled and merged files

3. FTP deployment gulp FTP

This task depends on the production task. When you execute gulp FTP, you will execute gulp build ﹣ dist to generate the dist directory, and then upload the generated dist directory to the FTP address specified by. Tmtworkflowrc.

4. Package gulp zip

When you execute the zip task, you will first execute gulp build ﹣ dist to generate the dist directory, and then package it into a zip package.

configuration file

In the directory of the same level as the project, there is a global. Tmtworkflowrc configuration file. In the project, there can also be a. Tmtworkflowrc configuration file. When the program is running, first look for whether there is a configuration file in the current directory. If not, continue to look up the directory until the system directory

We use the RC component to manage the configuration file. If the. Tmtworkflowrc file does not exist under the project, the configuration will be found according to the following optimization level.

A variable whose system environment variable begins with tmtworkflow (for example, tmtworkflow ﹣ foo ﹣ bar ﹣ Baz = > foo. Bar. Baz)

. tmtworkflowrc under the project directory or traverse up to find/







Workflow default configuration

By modifying the configuration file, you can implement the relevant processes in the custom task, such as whether you need to compile a webp resource, and whether you need to compile an HTML file to the dist directory.

. tmtworkflowrc configuration example


//ftp configuration

  “ftp”: {

    “host”: “xx.xx.xx.xx”,

    “port”: “8021”,

    “user”: “tmt”,

    “pass”: “password”,

“Remotepath”: “remotepath”, / / upload to the root directory by default. Configure this property to specify specific subdirectories

“Includehtml”: true / / whether the FTP upload contains HTML


//Auto refresh

  “livereload”: {

“Available”: true, / / enable auto refresh

     “port”: 8080,

“Startpath”: “HTML / tmtindex. HTML” / / path opened automatically when starting


//Plug in function

//Path relative to tasks / plugins directory

  “plugins”: {

“Build devafter”: [“tmtindex”], / / Auto execute after dev task execution

“Build ﹣ distafter”: [], / / Auto execute after build task execution

“FTP after”: [“FTP”] / / Auto execute after FTP task execution


“Lazydir”: [“.. / slice”], / / gulp lazyimagecss find directory (

“Supportwebp”: false, / / compile using webp

“Supportrem”: false, / / REM conversion

“Conversion”: false / / new filename function


At the end of the tutorial, the above is about how to use weflow? I hope you like the whole content of the tutorial of using and configuring the web flow! More exciting, on the developepaer website!