ms-point
前端构建工具,前端自动化构建工具
Last updated 2 months ago by mikoshu .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ms-point 
SYNC missed versions from official npm registry.

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 浏览

集成功能

  • scsssass 实时在线预览(无需编译打包)
  • livereload 自动刷新
  • ssi include 语法 (语法形式为: <!--#include virtual="header.shtml" --> 如上语句将把该行代码位置替换成header.shtml文件内容。支持其他ssi语法 具体参阅 ssi )
  • js文件css文件打包
  • css文件自动添加前缀
  • png文件压缩
  • ES6语法编译

打包处理

  • 通过执行 msp pack 执行打包命令(默认不压缩文件)。
  • 默认生成打包文件目录为 ./dist 如已经存在 dist文件夹,则会将内部文件删除后再将打包文件复制进目录,因此若存在有用的同名文件夹请修改文件夹名称。
  • msp pack 命令会处理 sass 文件以及 ssi 语法,如果需要压缩 jscss 可跟参数 -j|--js-c|--css 或者 -a|--all
  • -j|--js 该参数会将所有js文件压缩。(暂不支持ES6语法压缩,若存在ES6语法将导致报错退出)。
  • -c|--css 该参数会将所有css文件压缩(即使原先是scss或者sass也会被预编译后压缩)。
  • -a|--all 该参数会将cssjs以及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 文件夹下,且压缩jspng图片以及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.scssstyle.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: ''
    },
    ...
  // 可配置更多相关代理信息
}

Current Tags

  • 3.0.3                                ...           latest (2 months ago)

39 Versions

  • 3.0.3                                ...           2 months ago
  • 3.0.2                                ...           7 months ago
  • 3.0.1                                ...           a year ago
  • 3.0.0                                ...           a year ago
  • 2.1.5                                ...           2 years ago
  • 2.1.4                                ...           2 years ago
  • 2.1.3                                ...           2 years ago
  • 2.1.2                                ...           2 years ago
  • 2.1.1                                ...           2 years ago
  • 2.1.0                                ...           2 years ago
  • 2.0.19                                ...           4 years ago
  • 2.0.18                                ...           4 years ago
  • 2.0.17                                ...           4 years ago
  • 2.0.16                                ...           4 years ago
  • 2.0.15                                ...           4 years ago
  • 2.0.14                                ...           4 years ago
  • 2.0.13                                ...           4 years ago
  • 2.0.12                                ...           4 years ago
  • 2.0.11                                ...           4 years ago
  • 2.0.10                                ...           4 years ago
  • 2.0.9                                ...           4 years ago
  • 2.0.8                                ...           4 years ago
  • 2.0.7                                ...           4 years ago
  • 2.0.6                                ...           4 years ago
  • 2.0.5                                ...           4 years ago
  • 2.0.4                                ...           4 years ago
  • 2.0.3                                ...           4 years ago
  • 2.0.2                                ...           4 years ago
  • 2.0.1                                ...           4 years ago
  • 2.0.0                                ...           4 years ago
  • 1.0.11                                ...           4 years ago
  • 1.0.10                                ...           4 years ago
  • 1.0.8                                ...           4 years ago
  • 1.0.7                                ...           4 years ago
  • 1.0.6                                ...           4 years ago
  • 1.0.5                                ...           4 years ago
  • 1.0.4                                ...           4 years ago
  • 1.0.3                                ...           4 years ago
  • 1.0.2                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (19)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |