supervisor / nodemon + Browsersync

一、supervisor 或者nodemon重启node进程

如果你有 PHP 开发经验，会习惯在修改 PHP 脚本后直接刷新浏览器以观察结果，而你在开发 Node.js 实现的 HTTP 应用时会发现，无论你修改了代码的哪一部份，都必须终止Node.js 再重新运行才会奏效。这是因为 Node.js 只有在第一次引用到某部份时才会去解析脚本文件，以后都会直接访问内存，避免重复载入，而 PHP 则总是重新读取并解析脚本（如果没有专门的优化配置）。Node.js的这种设计虽然有利于提高性能，却不利于开发调试，因为我们在开发过程中总是希望修改后立即看到效果，而不是每次都要终止进程并重启。supervisor 或者nodemon ，可以帮助你实现这个功能，它会监视你对代码的改动，并自动重启 Node.js。

1.supervisor示例
npm install -g supervisor
接下来，使用 supervisor 命令启动 app.js：

$ supervisor app.js
DEBUG: Running node-supervisor with
DEBUG: program 'app.js'
DEBUG: --watch '.'
DEBUG: --extensions 'node|js'
DEBUG: --exec 'node'
DEBUG: Starting child process with 'node app.js'
DEBUG: Watching directory '/home/byvoid/.' for changes.
HTTP server is listening at port 3000.

当代码被改动时，运行的脚本会被终止，然后重新启动。在终端中显示的结果如下：

DEBUG: crashing child
DEBUG: Starting child process with 'node app.js'
HTTP server is listening at port 3000.

2.参考使用 nodemon 或者 Supervisor 监控 Express 4.x 代码改动进行开发
使用 nodemon 来代替 supervisor 来进行监控任务。相比 supervisor ，nodemon 的优点包括：更轻量级，内存占用更小。使用更加方便，更容易进行扩展等。
nodemon 的使用方法与 supervisor 相似，npm install -g nodemon
直接运行nodemon app.js即可，可以随时输入rs回车进行手动重启，非常方便。

Express 4.x 默认将启动模块分离到了./bin/www中，直接使用 supervisor 无法正常监控应用，使得开发过程中的调试非常不方便。
直接在 app.js 添加 app 模块即可。

var debug = require('debug')('my-application'); // debug模块
app.set('port', process.env.PORT || 3000); // 设定监听端口

// Environment sets...

// module.exports = app; 这是 4.x 默认的配置，
//分离了 app 模块,将它注释即可，上线时可以重新改回来

//启动监听
var server = app.listen(app.get('port'), function() {
  debug('Express server listening on port ' + server.address().port);
});

之后就可以正常的supervisor app.js进行调试了。如果需要彻底改变启动方式，还需要修改packages.json

"scripts": {
  "start": "node app.js" // 此处将原本的 'node ./bin/www' 改为 'node app.js'
}

之后运行npm start实际就是node app.js了。
3.nodemon 基本配置与使用

二、Browsersync

supervisor修改代码时可以自动重启服务器但不更新浏览器，类似supervior工具的有nodemon（推荐）、node-dev、hotnode.

作为一名前端狗，我们的日常工作除了撸出一手新鲜的代码，剩下的时间就是和各式浏览器，各种手机PK（兼容性调试）。接下来就是无休止的Ctrl+S，F5，而且每次都要编辑器浏览器来回切换。据不完全统计，前端每次切换屏幕耗时0.5s，每次点击F5耗时0.5s，平均每天需切换3600次，等于3600s，等于60分，等于1小时，Ctrl，Tab，F5键每天被点击N次（以上数字纯属虾扯蛋）。为了防止键盘被破坏，为了追求极客之速度，为了，，，停。。。此处为广告时间。接下来就为大家介绍一款神器————browsersync

browsersync是类似于livereload的东东，简单的说就是它可以帮你本地启动一个静态文件服务器，当你改动某个文件，点击Ctrl+S，接下来浏览器能够自动刷新并显示你改动后的效果。这样你就不用点击F5了，有人说这有什么厉害的，只是自动刷新而已，还得切换屏幕，同样是浪费时间。但如果你有外接屏，这时，你会发现，所改及所得，这速度杠杠的。但如果你有两块屏（有钱淫），这时你会发现改完之后两块屏同时刷新了。但如果你有三块屏，或者你有N块屏（想想而已）。N块屏是很少有了，但是有了它，你可以在一块大的显示器上显示IE，Chrome，Firefox等浏览器的窗口。这时你可以看到各个浏览器的显示情况，当你改了文件时，每个浏览器都可以自动刷新。同样对于移动应用来说，你可以将你的页面投射到多个移动终端上。怎么样，这个是不是很酷炫。如果说这个还是不够装13的话，那就要介绍另一个功能，当你用鼠标滚动你的网页时（你的网页长度超过你的浏览器窗口），你会发现，其它的浏览器也会滚动到相应的页面。这，，，牛13。（看到这，大家是不是觉得它可以作为一个遥控？）。除此之外，它还有其他一些炫酷功能会在后续博客更新。

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。

有了它，您不用在多个浏览器、多个设备间来回切换，频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制。

参考
Browsersync中文网
Browsersync的安装及使用方法
web开发神器——browsersync(1)
web开发神器——browsersync(2)：gulp集成
web开发神器——browsersync(3)：控制界面使用

1.静态网站

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server --files "css/*.css"

监听多个类型的文件，需要用逗号隔开。例如我们再加入一个.html文件

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server --files "css/*.css, *.html"

如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。 browser-sync start --server --files "**/*.css, **/*.html"
运行命令后，Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000地址，这一切都会在命令行工具里显示。

2.动态网站
如果你已经有其他本地服务器环境PHP或类似的，需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看。

// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"

比如我的项目服务是用tomcat跑起来的，访问地址是"localhost:8081",使用以下命令方式，Browsersync将提供一个新的地址localhost:3000来访问localhost:8081，并监听其css目录下的所有css文件。browser-sync start --proxy "localhost:8081" "css/*.css"

3.重新指定port
3000端口可能被占用，如果被占用可以用下面的命令指定一个端口：browser-sync start --server --port 8081 --files "**.css"

4.匹配所有文件改动
browser-sync start --server --files "**"

5.其他规则，参考Browsersync命令行用法
--help 输出使用信息
--version 输出的版本号
--browser 选择哪个浏览器应该是自动打开
--files 文件路径看
--exclude 文件模式忽视
--server 运行本地服务器（使用您的CWD作为Web根）
--index 指定哪些文件应该被用作索引页
--extensions 指定文件扩展名回退
--startPath 指定起始路径，打开浏览器
--https 启用SSL地方发展
--directory 显示服务器的目录列表
--proxy 代理现有的服务器
--xip 使用xip.io域路由
--tunnel 使用公共网址
--open 选择哪个URL是自动打开（本地，外部或隧道）
--config 指定为BS-config.js文件的路径
--host 指定主机名使用
--logLevel 设置记录器输出电平（沉默，信息或调试）
--port 指定要使用的端口
--reload-delay 以毫秒为单位的时间延迟重装事件以下文件的变化
--reload-debounce 限制在浏览器中的频率：刷新事件可以被发射到连接的客户机
--ui-port 指定端口的UI使用
--no-notify 禁用浏览器的通知元素
--no-open 不要打开一个新的浏览器窗口
--no-online 强制离线使用
--no-ui 不要启动用户界面
--no-ghost-mode 禁用幽灵模式
--no-inject-changes 刷新上的每个文件更改
--no-reload-on-restart 不要自动重新加载在重新启动所有浏览器

具体使用参考web开发神器——browsersync(2)：gulp集成

6.更改启动的浏览器
因为我电脑上默认浏览器是QQ浏览器，我想用chrome浏览器调试，参照以上规则，可以这样改browser-sync start --server --files "*.js,*.html" --port 8090 --browser chrome

7.结合gulp

gulp.task('browser-sync', function() {
    browserSync({
        files: "*.js,*.html",
        server: {
            baseDir: "./",
             //指定默认打开的文件
            index:'index.html'
        },
        port: 8090,
        browser:'chrome'
    });
});

supervisor / nodemon + Browsersync

一、supervisor 或者nodemon重启node进程

二、Browsersync

你可能感兴趣的:(supervisor / nodemon + Browsersync)