gulp-通过 https 进行实时加载？

Question

我一直在使用 livereload chrome 扩展程序将 http://[...]/livereload.js 插入到文档中。不幸的是，我正在做一个需要 https 的项目，我希望在本地复制它，但我没有必要这样做，因为我可以更改不同环境的协议，但我想知道是否可以设置 gulp-livereload 改为通过 https 加载？

我尝试了一些方法，例如手动添加脚本但没有成功，因为我收到连接错误 (GET https://127.0.0.1:35729/livereload.js?snipver=1 net::ERR_CONNECTION_CLOSED):

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://127.0.0.1:35729/livereload.js?snipver=1';
document.getElementsByTagName('body')[0].appendChild(script)

Answer 1

我想到了两个解决方案：

1。自己主持客户

https://github.com/livereload/livereload-js

将其作为依赖项安装：

bower install livereload-js --save-dev

或

npm install livereload-js --save

然后像包含楷书一样包含它。然而be aware of these caveats.

/path/to/dist/livereload.js?host=localhost

2。代理客户端脚本

这很复杂，但肯定行得通。在您的 gulpfile 中创建一个 HTTPS 服务器（可能在 watch 任务中）。

https://github.com/nodejitsu/node-http-proxy

https://github.com/nodejitsu/node-http-proxy#using-https

httpProxy.createServer({
  ssl: {
    key: fs.readFileSync('valid-ssl-key.pem', 'utf8'),
    cert: fs.readFileSync('valid-ssl-cert.pem', 'utf8')
  },
  target: 'https://localhost:35729',
  secure: true // Depends on your needs, could be false.
}).listen(443);

然后就可以引用代理脚本了

https://127.0.0.1:443/livereload.js?snipver=1

Answer 2

虽然在 API 文档中添加 key/cert 参数没有效果

gulp.task('run-reload-server', function() {
  livereload.listen({
    host: "my.domain.com",
    port: 35729,
    key: fs.readFileSync(path.join(__dirname, 'livereload.key'), 'utf-8'),
    cert: fs.readFileSync(path.join(__dirname, 'livereload.crt'), 'utf-8'),
  });
});

gulp-通过 https 进行实时加载？

gulp-livereload over https?

livereload

gulp

gulp-livereload

1。自己主持客户

2。代理客户端脚本