README
smt
SMT 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
Install node.js(https://nodejs.org)
Install smt global
npm install smt -g
Test smt
smt -v
Command list
index | command | instructions |
---|---|---|
1 | smt | Start the static service |
2 | smt config | Generate smtfile.js configuration file (for configuration code compilation, service forwarding, etc.) |
3 | smt init template name | For example:smt init st-launcher |
4 | smt build | Compile the project |
5 | smt clean | Clear the directory specified by dist in the configuration file |
6 | smt rebuild | Recompile the project, this command is equivalent to smt clean && smt build |
7 | smt -v | Check the currently installed smt version |
smt function
Start the static service
- Enter the command
smt
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.
- Enter the command
Forwarding service
- To achieve service forwarding, need to rely on the configuration file. Generate the configuration file by entering the command
smt config
- The configuration file is as follows: Details
- To achieve service forwarding, need to rely on the configuration file. Generate the configuration file by entering the command
{
// Service agent forwarding
server: {
proxy:{
//Automatically forward the request containing /minierp to the target server address
"/minierp":{
target: 'http://trunk.minierp.hhwy.org', // target host
changeOrigin: true
}
}
}
}
- According to the configuration file, type the command smt, forwarding service can be realized
- Code compiled
- Need to rely on the smtfiles.js configuration file, compile the file in the build field configuration, the file is compiled, compressed, copied
- Enter the command
smt build
for code compilation
{
// smtfile.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
- smt 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, visit https://dev.365power.cn/sujs/#smt/start
smt
smt 是一款基于webpack、gulp的前端开发工具,支持前后端分离开发的模式。具有快速搭建项目、文件监听、页面实时刷新、编译压缩、服务转发等功能。
特点
- 快速构建项目
- 启动静态服务
- 监听文件变化,实时刷新页面
- 源码编译、压缩(支持:css/js/pug/md/vue等)
- 前后端分离、服务转发
- ES6转ES5,提高 js 代码的浏览器兼容性
安装
安装 smt
npm install smt -g
测试 smt
smt -v
命令列表
序号 | 命令 | 说明 |
---|---|---|
1 | smt | 启动静态服务 |
2 | smt config | 生成smtfile.js配置文件(用于配置代码编译、服务转发等) |
3 | smt init 模板名称 | 例如:smt init st-launcher |
4 | smt build | 编译项目 |
5 | smt clean | 清除配置文件中dist指定的目录 |
6 | smt rebuild | 重新编译项目,此命令等价于 smt clean && smt build |
7 | smt -v | 查看当前安装的smt版本 |
smt 的功能
若您只想启动一个静态服务,则无需关心配置文件smtfiles.js的相关说明。
启动静态服务
- 输入命令
smt
启动静态服务。服务的根目录为当前执行命令的目录。 - 监听目录文件的变化,实现页面的实时刷新
- 输入命令
服务转发
- 实现服务转发,需要依赖于配置文件。 通过输入命令
smt config
生成配置文件- 配置文件如下: 详情
- 实现服务转发,需要依赖于配置文件。 通过输入命令
{
// 服务代理转发
server: {
proxy:{
//自动将包含 /minierp 的请求转发到target服务器地址
"/minierp":{
target: 'http://trunk.minierp.hhwy.org', // target host
changeOrigin: true
}
}
}
}
- 根据配置文件,输入命令`smt` ,即可实现服务转发
- 代码编译
- 需要依赖于smtfiles.js配置文件,在build字段进行文件编译的配置,将文件进行编译,压缩,拷贝
- 输入命令
smt build
进行代码编译
{
// smtfile.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在使用前,需按实际项目进行配置文件的修改。
- 从模板创建项目
- smt 工具提供的模板有:st-launcher,mst-launcher
- 您可以在初始化模板后,进行配置文件的修改
Help
To check out live examples and docs, visit https://dev.365power.cn/sujs/#smt/start