lite-server工具使用

lite-server

轻量级的仅适用于开发 的 node 服务器， 它仅支持 web app, 它能够为你打开浏览器, 当你的html或是JavaScript文件变化时，它会识别到并自动帮你刷新浏览器, 还能使用套接字自动注入变化的CSS, 当路由没有被找到时，它将自动后退页面。

Why

在一个轻量级的开发服务器中，浏览器同步能够支持我们的大多数需求. 它提供静态的内容, 监测文本变化, 刷新浏览器, 并且提供更多自定义功能.

When creating a SPA there are routes that are only known to the browser. For example, /customer/21 may be a client side route for an Angular app. If this route is entered manually or linked to directly as the entry point of the Angular app (aka a deep link) the static server will receive the request, because Angular is not loaded yet. The server will not find a match for the route and thus return a 404. The desired behavior in this case is to return the index.html (or whatever starting page of the app we have defined). BrowserSync does not automatically allow for a fallback page. But it does allow for custom middleware. This is where lite-server steps in.

lite-server is a simple customized wrapper around BrowserSync to make it easy to serve SPAs.

安装与使用

以下是被推荐的安装lite-server的方式:

$ npm install lite-server --save-dev

在你的项目中的 package.json 文件中添加一个 “script” 入口:

# Inside package.json...
  "scripts": {    
    "dev": "lite-server"
  },

有了上面的script 入口, 你就可以通过以下命令来启动 lite-server 了:

$ npm run dev

更多的使用npm插件的选项参看这篇 Stack Overflow 文章: How to use package installed locally in node_modules；祝好运！！

全局安装

只要你想，lite-server可以安装成为全局的:

$ npm install -g lite-server

# To run:
$ lite-server

定制一些自定义配置

The default behavior serves from the current folder, opens a browser, and applies a HTML5 route fallback to ./index.html.

lite-server 使用BrowserSync, 它是允许你去覆盖默认的配置，这得通过你项目里的文件 bs-config.json 或 bs-config.js 来完成

You can provide custom path to your config file via -c or --config= run time options:

lite-server -c configs/my-bs-config.js

举例来说, 要改变端口号, 被监测的文件路径, 以及你项目的base路径, 在你项目中创建 bs-config.json 文件咯:

{
  "port": 8000,
  "files": ["./src/**/*.{html,htm,css,js}"],
  "server": { "baseDir": "./src" }
}

A more complicated example with modifications to the server middleware can be done with a bs-config.js file, which requires the module.exports = { ... }; syntax:

module.exports = {
  server: {
    middleware: {
      // overrides the second middleware default with new settings
      1: require('connect-history-api-fallback')({index: '/index.html', verbose: true})
    }
  }
};

The bs-config.js file may also export a function that receives the lite-server Browsersync instance as its only argument. While not required, the return value of this function will be used to extend the default lite-server configuration.

module.exports = function(bs) {

  return {
    server: {
      middleware: {
        // overrides the second middleware default with new settings
        1: require('connect-history-api-fallback')({
          index: '/index.html',
          verbose: true
        })
      }
    }
  };

};

NOTE: Keep in mind that when using middleware overrides the specific middleware module must be installed in your project. For the above example, you’ll need to do:

$ npm install connect-history-api-fallback --save-dev

…otherwise you’ll get an error similar to:

Error: Cannot find module 'connect-history-api-fallback'

Another example: To remove one of the default middlewares, such as connect-logger, you can set it’s array index to null:

module.exports = {
  server: {
    middleware: {      
      0: null     // removes default `connect-logger` middleware
    }
  }
};

A list of the entire set of BrowserSync options can be found in its docs: http://www.browsersync.io/docs/options/

Testing

When using lite-server to run end to end tests, we may not want to log verbosely. We may also want to prevent the browser from opening. These options in the bs-config.js will silence all logging from lite-server:

  open: false
  logLevel: "silent",
  server: {
    middleware: {
      0: null
    }
  }

Known Issues

CSS with Angular 2 is embedded thus even though BrowserSync detects the file change to CSS, it does not inject the file via sockets. As a workaround, injectChanges defaults to false.

Contributing

1. Fork and clone it
2. Install dependencies: npm install
3. Create a feature branch: git checkout -b new-feature
4. Commit changes: git commit -am 'Added a feature'
5. Run static code analysis and unit tests: npm test
6. Push to the remote branch: git push origin new-feature
7. Create a new Pull Request

License

Code released under the MIT license.