lite-server工具使用
来源:互联网 发布:windows 网络发现 编辑:程序博客网 时间:2024/05/19 20:20
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
- Fork and clone it
- Install dependencies:
npm install
- Create a feature branch:
git checkout -b new-feature
- Commit changes:
git commit -am 'Added a feature'
- Run static code analysis and unit tests:
npm test
- Push to the remote branch:
git push origin new-feature
- Create a new Pull Request
License
Code released under the MIT license.
- lite-server工具使用
- lite-server
- 使用lite-server快速搭建本地服务器
- orm Lite的使用
- Flash 8:使用Flash Lite
- Etherpad-Lite 使用 Radius 认证
- Sourcery G++ Lite 一个arm开发工具
- FireBug lite,在线网页调试工具
- pcduino lite wifi联网--工具准备,热身。
- 使用Flash Lite 制作手机主题
- 如何使用Navicat Lite链接Oracle数据库
- 使用 Navicat Lite 连接 Oracle 数据库
- Sourcery CodeBech Lite安装及使用
- Sourcery CodeBech Lite安装及使用
- 使用 Navicat Lite 连接 Oracle 数据库
- PCSC-LITE使用及移植总结
- ps-lite本地模式使用简介
- EViews9 Student Version Lite 使用注意点
- Ubuntu下Node.js和nw.js环境搭建
- 使用 Intellij idea Springboot maven 的一个小小的问题
- 5 个 iOS 和 Android 最佳的开源自动化工具
- 区块链开发(四)区块链技术详解PPT
- 文本数据的机器学习自动分类方法(上)
- lite-server工具使用
- EditText的富媒体开发(Edittext显示网络图片) 一
- C语言与C++编译连接的不同点(从程序中看)
- 串口打印设置
- ListView不同type加载数据
- OkHttp3简单使用说明
- Sql基础语句3
- 蓝图职业规划
- supervise系统进程监控