Ms-point NPM | npm.io

ms-point 使用文档

新版本修改新增功能（版本3.x.x）

编译出错时打印错误提示，不会自动关闭服务器。
css文件自动添加前缀。
png文件压缩。
新增对ES6的支持，使用babel编译
代理配置简化

工具安装

npm install -g ms-point 更新最新 ms-point
sudo npm install -g ms-point (苹果系统)
若安装出错可能为node-sass模块出错，请使用淘宝镜像 cnpm 命令如下(cnpm安装方法点击此处查看)：
cnpm install -g ms-point

创建目录

关键字：

msp init
msp start
msp pack

如果是全新项目，在目录下使用msp init命令初始化项目目录和文件。
初始化后的目录下会生成一个wwwroot文件夹，若已有该文件夹则忽略。
初始化生成的wwwroot目录下将生成一个example文件夹，该文件夹下有本工具基本用法的实例。
若已存在wwwroot目录，则不生成example实例文件。
初始化成功后，将自己的项目放入wwwroot文件夹下即可运行 msp start 开启服务（默认80端口，如端口被占用，可通过 port=[端口号] 来修改服务器开启端口，如 msp start port=3333）。
如果在开发环境就需要编译 ES6 语法可以通过 msp start es6 来使当前引入的js资源通过虚拟路径编译为兼容性js文件以便低级浏览器如 IE 浏览

集成功能

scss，sass 实时在线预览（无需编译打包）
livereload 自动刷新
ssi include 语法 (语法形式为：  如上语句将把该行代码位置替换成header.shtml文件内容。支持其他ssi语法具体参阅 ssi )
js文件css文件打包
css文件自动添加前缀
png文件压缩
ES6语法编译

打包处理

通过执行 msp pack 执行打包命令（默认不压缩文件）。
默认生成打包文件目录为 ./dist 如已经存在 dist文件夹，则会将内部文件删除后再将打包文件复制进目录，因此若存在有用的同名文件夹请修改文件夹名称。
msp pack 命令会处理 sass 文件以及 ssi 语法，如果需要压缩 js 或 css 可跟参数 -j|--js ， -c|--css 或者 -a|--all。
-j|--js 该参数会将所有js文件压缩。（暂不支持ES6语法压缩，若存在ES6语法将导致报错退出）。
-c|--css 该参数会将所有css文件压缩（即使原先是scss或者sass也会被预编译后压缩）。
-a|--all 该参数会将css和js以及png图片都压缩（不处理ES6语法需要额外的 es6 参数）。
-p|--png 该参数会将wwwroot目录下的所有.png图片压缩。
es6|ES6 该参数将会编译ES6语法(包括引入本地的js文件以及html文件script标签内的js语句)，在启动服务msp start时添加该参数，将会预处理ES6语法(此时会先给引入的本地js文件添加一个虚拟目录/_temp_scripts/用于sourceMap定位原错误位置，用户可以不用理会，不影响文件打包)，js错误信息会通过sourceMap定位，（如果是html页面内的js标签内的js错误，将无法通过sourceMap定位，所以建议将js都以文件的方式引入，获得更好的体验）

打包实例

msp pack -a es6

运行如上代码，会将当前wwwroot目录下的内容打包到项目文件夹 ./dist 文件夹下，且压缩js，png图片以及css文件。（默认配置已处理scss编译以及ssi语法，如要处理ES6语法，需额外添加es6参数，默认不处理ES6语法）

注意

若用sass编译css文件，html文件内部 <link> 标签的 href 属性后缀应为 .css 后台开启的express服务器会将同名的 .scss 或 .sass 文件编译后代理到同名的 .css 请求内容里，如：
```
	`<link href="css/style.css" rel="stylesheet">`
```
以上链接，若 css/ 目录下不存在style.css文件，将会请求 style.scss 或 style.sass 文件并且编译后作为css文件。执行 msp pack 命令后会在 ./dist 目录下生成css文件，因此html文件里无需改变(不要再html文件内写上<link href="css/style.scss" rel="stylesheet">这样的link标签,会导致html文件打包后找不到样式文件)。
对于 .html 和 .shtml 文件，服务器也会在同名之间互相代理，如目录下没有 index.shtml 文件，访问 localhost/index.shtml时，则会访问到同名的 .html 文件。同样如果不存在 .html 文件时，会访问到同名的.shtml文件。但执行 msp pack 打包命令以后，所有的 .shtml 文件都将被重命名为 .html 。因此如有跳转链接时，统一使用 .html 后缀。
wwwroot 目录只用于托管项目资源，请勿将 node_modules 文件夹放入wwwroot目录下，打包时将会忽略node_modules目录。如需node模块资源可将其放在与wwwroot目录同级的node_modules下。

代理配置

msp init 初始化时生成 DEV-INF/route.js 文件，该文件用于对生成的 express 服务器进行代理配置具体用法可参见默认生成的route.js文件以及注释。

module.exports = { // 反代配置 可配置多个代理
    '/testApi': { // 将把所有包含 /testApi 的请求反向代理到 http://xxx.com  
      // 如:http://localhost:port/testApi/xxx 都将代理到 http://xxx.com/testApi/xxx
      target: 'http://xxx.com',
      pathRewrite: {},
      changeOrigin:true,
      cookieDomainRewrite: ''
      //更多参数配置请参照 https://www.npmjs.com/package/http-proxy-middleware
    },
    '/testApi2': { // 将把所有包含 testApi2 的请求反向代理到 http://yyy.com 
      target: 'http://yyy.com',
      pathRewrite: {},
      changeOrigin:true,
      cookieDomainRewrite: ''
    },
    ...
  // 可配置更多相关代理信息
}

sass ssi pack ES6