reload

build status js-standard-style NPM version

Automatically refresh and reload your code in your browser when your code changes. No browser plugins required.

Why?

Restarting your HTTP server and refreshing your browser is annoying.

How does it work?

Reload works in two different ways depending on if you're using it:

  1. In an existing Express application in which it creates a server side route for reload or,
  2. As a command line tool which starts its own Express application to monitor the file you're editing for changes and to serve reload-client.js to the browser.

Once reload-server and reload-client are connected, the client side code opens a WebSocket to the server and waits for the WebSocket to close, once it closes, reload waits for the server to come back up (waiting for a socket on open event), once the socket opens we reload the page.

Installation

npm install [-g] [--save-dev] reload

Two ways to use reload

There are two different ways to use reload.

  1. In an Express application, allowing your whole project to utilize reload when the code is altered
  2. As a command line application to serve up static HTML files and be able to reload when the code is altered

Using reload in Express

When used with Express reload creates a new Express route for reload. When you restart the server, the client will detect the server being restarted and automatically refresh the page.

Reload can be used in conjunction with tools that allow for automatically restarting the server such as supervisor (recommended), nodemon, forever, etc.

Express Example

server.js:

var express = require('express')
var http = require('http')
var path = require('path')
var reload = require('reload')
var bodyParser = require('body-parser')
var logger = require('morgan')

var app = express()

var publicDir = path.join(__dirname, 'public')

app.set('port', process.env.PORT || 3000)
app.use(logger('dev'))
app.use(bodyParser.json()) //parses json, multi-part (file), url-encoded

app.get('/', function(req, res) {
  res.sendFile(path.join(publicDir, 'index.html'))
})

var server = http.createServer(app)

// Reload code here
reload(server, app)

server.listen(app.get('port'), function(){
  console.log("Web server listening on port " + app.get('port'));
});

public/index.html:

<!doctype html>
<html>
  <head>
    <title>Reload Express Sample App</title>
  </head>
  <body>
    <h1>Reload Express Sample App12</h1>
    <!-- All you have to do is include the reload script and have it be on every page of your project -->
    <script src="/reload/reload.js"></script>
  </body>
</html>

Refer to the reload express sample app for this working example.

Manually firing server-side reload events

You can manually call a reload event by calling reload() yourself. An example is shown below:

reloadServer = reload(server, app);
watch.watchTree(__dirname + "/public", function (f, curr, prev) {
    // Fire server-side reload event
    reloadServer.reload();
});

API for Express

reload(httpServer, expressApp, [verbose])
  • httpServer: The Node.js http server from the module http.
  • expressApp: The express app. It may work with other frameworks, or even with Connect. At this time, it's only been tested with Express.
  • verbose: If set to true, will show logging on the server and client side

Using reload as a command line application

There are two ways to use the command line application.

  1. In a directory serving blank static HTML files or
  2. In a project with a package.json file

Each will require different modes of installing.

In case one you should install reload globally with npm install reload -g. Also with reload installed globally you can go to any directory with an HTML file and use the command reload to constantly watch it and reload it while you make changes.

In case two you should install locally with npm install --save-dev, since this tool is to aid in development you should install it as a dev dependency.

Navigate to your html directory:

reload -b

This will open your index.html file in the browser. Any changes that you make will now reload in the browser. You don't need to modify your HTML at all.

Usage for Command Line Application

Usage: reload [options]

Options:

  -h, --help                        Output usage information
  -V, --version                     Output the version number
  -b, --browser                     Open in the browser automatically.
  -n, --hostname                    If -b flag is being used, this allows for custom hostnames. Defaults to localhost.
  -d, --dir [dir]                   The directory to serve up. Defaults to current dir.
  -e, --exts [extensions]           Extensions separated by commas or pipes. Defaults to html,js,css.
  -p, --port [port]                 The port to bind to. Can be set with PORT env variable as well. Defaults to 8080
  -s, --start-page [start-page]     Specify a start page. Defaults to index.html.
  -v, --verbose                     Turns on logging on the server and client side. Defaults to false.

License

(MIT License)

Copyright 2016, JP Richardson jprichardson@gmail.com



reload

建立状态 JS-标准式 NPM版本

代码更改时,在浏览器中自动刷新并重新加载代码。不需要浏览器插件。

为什么?

重新启动HTTP服务器并刷新浏览器很麻烦。

它如何工作?

重新载入可以通过两种不同的方式进行,具体取决于您是否使用它:

  1. In an existing Express application in which it creates a server side route for reload or,
  2. As a command line tool which starts its own Express application to monitor the file you're editing for changes and to serve reload-client.js to the browser.

一旦重新加载服务器和重新加载客户端,客户端代码将打开一个 WebSocket 到服务器,并等待为了关闭WebSocket,一旦关闭,重新加载等待服务器重新启动(等待打开事件时的套接字),一旦插槽打开,我们重新加载页面。

安装

npm install [-g] [–save-dev] reload

使用重新加载的两种方法

使用重新加载有两种不同的方法。

  1. In an Express application, allowing your whole project to utilize reload when the code is altered
  2. As a command line application to serve up static HTML files and be able to reload when the code is altered

在Express

中使用reload

当与Express重新加载一起使用时,会创建一个新的快速路由重新加载。当您重新启动服务器时,客户端将检测到正在重新启动的服务器,并自动刷新页面。

重新加载可以与允许自动重新启动服务器的工具一起使用,例如主管(推荐),< a href =https://github.com/remy/nodemon> nodemon ,永远等。< / p>

实例

server.js

var express = require('express')
var http = require('http')
var path = require('path')
var reload = require('reload')
var bodyParser = require('body-parser')
var logger = require('morgan')

var app = express()

var publicDir = path.join(__dirname, 'public')

app.set('port', process.env.PORT || 3000) app.use(logger('dev')) app.use(bodyParser.json()) //parses json, multi-part (file), url-encoded

app.get('/', function(req, res) { res.sendFile(path.join(publicDir, 'index.html')) })

var server = http.createServer(app)

// Reload code here reload(server, app)

server.listen(app.get('port'), function(){ console.log("Web server listening on port " + app.get('port')); });

public / index.html

<!doctype html>
<html>
  <head>
    <title>Reload Express Sample App</title>
  </head>
  <body>
    <h1>Reload Express Sample App12</h1>
    <!– All you have to do is include the reload script and have it be on every page of your project –>
    <script src="/reload/reload.js"></script>
  </body>
</html>

请参阅重新加载明细示例应用,以获取此实例。

手动启动服务器端重新加载事件

您可以通过自己调用 reload()来手动调用重新加载事件。一个例子如下所示:

reloadServer = reload(server, app);
watch.watchTree(__dirname + "/public", function (f, curr, prev) {
    // Fire server-side reload event
    reloadServer.reload();
});

Express for Express

reload(httpServer, expressApp, [verbose])
  • httpServer :Node.js从http服务器模块 http
  • expressApp :Express应用程序。它可能与其他框架一起使用,甚至可以与Connect一起使用。在这个时候,它只有通过Express测试。
  • verbose :如果设置为true,将在服务器和客户端显示日志记录

<一个ID =使用重载作为一种的命令行的应用程序的用户内容的类=锚 HREF =#使用重载作为一种的命令行的应用程序咏叹调-hidden = 真> <路径fill-rule =evenoddd =M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58 -45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2 -1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z > </路径> 使用重载作为命令行应用

使用命令行应用程序有两种方法。

  1. In a directory serving blank static HTML files or
  2. In a project with a package.json file

每个将需要不同的安装模式。

如果您应该使用 npm安装reload -g 全局重新加载。还可以在全球安装reload,您可以使用HTML文件转到任何目录,并使用命令reload来持续监视并在进行更改时重新加载。

如果你应该在本地安装 npm install –save-dev ,因为这个工具是为了帮助开发,你应该把它安装为一个dev依赖。

浏览到您的html目录:

reload -b

这将在浏览器中打开您的 index.html 文件。您所做的任何更改现在将在浏览器中重新加载。您不需要修改HTML。

命令行应用程序的使用

Usage: reload [options]

Options:

-h, –help Output usage information -V, –version Output the version number -b, –browser Open in the browser automatically. -n, –hostname If -b flag is being used, this allows for custom hostnames. Defaults to localhost. -d, –dir [dir] The directory to serve up. Defaults to current dir. -e, –exts [extensions] Extensions separated by commas or pipes. Defaults to html,js,css. -p, –port [port] The port to bind to. Can be set with PORT env variable as well. Defaults to 8080 -s, –start-page [start-page] Specify a start page. Defaults to index.html. -v, –verbose Turns on logging on the server and client side. Defaults to false.

许可证

(麻省理工学院许可证)

版权所有2016,JP Richardson jprichardson@gmail.com




相关问题推荐