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

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

2. Install smt global

   npm install smt -g

3. 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.

• 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

{
    // 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 代码的浏览器兼容性

安装

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

2. 安装 smt

   npm install smt -g

3. 测试 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