vmt

vmt is a front-end development tool based on webpack and gulp, which supports the separation and development of the front and rear ends.

Characteristics

• Build projects quickly
• Start the static service
• Monitor file changes, refresh the page in real time.
• Source compilation, compression（support：css/js/pug/md/vue Etc.）
• Front-end separation and service forwarding.
• ES6 to ES5, improved js code browser compatibility

Installation

1. Install node.js（https://nodejs.org）

2. Install vmt global

   npm install vmt -g

3. Test vmt

   vmt -v

Command list

vmt function

• Start the static service

  • Enter the command vmt to start the static service. The root directory of the service is the directory in which the command is currently executed.
  • Monitor the changes of directory files to realize real-time refresh of the page.

• Forwarding service

  • To achieve service forwarding, need to rely on the configuration file. Generate the configuration file by entering the command vmt config
    • The configuration file is as follows:

{
    // Service agent forwarding
    server: {
        proxy:{
            //Automatically forward the request containing /data to the target server address
            "/data":{
                target: 'http://my.com', // target host 
                changeOrigin: true
            }
        }
    }
}

- According to the configuration file, type the command vmt, forwarding service can be realized

• Code compiled
  • Need to rely on the vmtfiles.js configuration file, compile the file in the build field configuration, the file is compiled, compressed, copied
  • Enter the command vmt build for code compilation

{
    // vmtfile.js 
    // compile
    build :{
        // src: source directory; dist：target directory；
        // Compile js
        js:[],
        css:[],
        // Compile HTML without providing code merge functionality.
        html:[],
        // Compiling jade does not provide code merge functionality.
        pug:[],
        // Compile md to generate HTML fragments.
        md: [],
        //Compile vue, and monitor changes, to achieve automatic browser refresh
        vue: [],
        // Other files, copy directly.
        others:[]
    },
    //The compiled file holds the directory.
    dist:"dist",
    //Global substitution field
    replace:[
        {src:"${version}",value:"?_v=0.1.7",}
    ]
}

Command build, clean, rebuild before use, according to the actual project configuration file changes.

• Create the project from the template
  • vmt tools provided by the template there：st-launcher，mst-launcher
  • You can modify the configuration file after initializing the template

Help

To check out live examples and docs

vmt

vmt 是一款基于webpack、gulp的前端开发工具，支持前后端分离开发的模式。具有快速搭建项目、文件监听、页面实时刷新、编译压缩、服务转发等功能。

特点

• 快速构建项目
• 启动静态服务
• 监听文件变化，实时刷新页面
• 源码编译、压缩（支持：css/js/pug/md/vue等）
• 前后端分离、服务转发
• ES6转ES5，提高 js 代码的浏览器兼容性

安装

1. 安装 node.js（https://nodejs.org）

2. 安装 vmt

   npm install vmt -g

3. 测试 vmt

   vmt -v

命令列表

vmt 的功能

若您只想启动一个静态服务，则无需关心配置文件vmtfiles.js的相关说明。

• 启动静态服务

  • 输入命令 vmt 启动静态服务。服务的根目录为当前执行命令的目录。
  • 监听目录文件的变化，实现页面的实时刷新

• 服务转发

  • 实现服务转发，需要依赖于配置文件。 通过输入命令 vmt config 生成配置文件
    • 配置文件如下：

{
    // 服务代理转发
    server: {
        proxy:{
            //自动将包含 /data 的请求转发到target服务器地址
            "/data":{
                target: 'http://my.com', // target host 
                changeOrigin: true
            }
        }
    }
}

- 根据配置文件，输入命令`vmt` ，即可实现服务转发

• 代码编译
  • 需要依赖于vmtfiles.js配置文件，在build字段进行文件编译的配置，将文件进行编译，压缩，拷贝
  • 输入命令 vmt build 进行代码编译

{
    // vmtfile.js 
    // 编译
    build :{
        // src: 源目录； dist：目标目录；
        // 编译js
        js:[],
        css:[],
        // 编译html，不提供代码合并功能
        html:[],
        // 编译jade，不提供代码合并功能
        pug:[],
        // 编译md，生成html片段
        md: [],
        //编译vue,并监听变化，实现浏览器自动刷新
        vue: [],
        // 其它文件,直接拷贝
        others:[]
    },
    //编译后文件存放目录
    dist:"dist",
    //全局替换字段
    replace:[
        {src:"${version}",value:"?_v=0.1.7",}
    ]
}

命令build,clean,rebuild在使用前，需按实际项目进行配置文件的修改。

• 从模板创建项目
  • vmt 工具提供的模板有：st-launcher，mst-launcher
  • 您可以在初始化模板后，进行配置文件的修改