使用npm init创建一个包。Json在根目录下

NPM install——save-dev gulp-open &&

然后创建gulpfile.js

它看起来像:

/* File: gulpfile.js */

// grab our gulp packages
var gulp  = require('gulp'),
    open = require('gulp-open');

// create a default task and just log a message
gulp.task('default', ['watch']);

// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
  gulp.watch('extensionData/userCode/**/*.js', ['uri']);
});

gulp.task('uri', function(){
  gulp.src(__filename)
  .pipe(open({uri: "http://reload.extensions"}));
});

这适用于我开发CrossRider，你可能会观察改变路径，你看文件在，也假设你有npm和节点安装。

另一个解决方案是创建自定义liverload脚本(extension-reload.js):

// Reload client for Chrome Apps & Extensions.
// The reload client has a compatibility with livereload.
// WARNING: only supports reload command.

var LIVERELOAD_HOST = 'localhost:';
var LIVERELOAD_PORT = 35729;
var connection = new WebSocket('ws://' + LIVERELOAD_HOST + LIVERELOAD_PORT + '/livereload');

connection.onerror = function (error) {
  console.log('reload connection got error:', error);
};

connection.onmessage = function (e) {
  if (e.data) {
    var data = JSON.parse(e.data);
    if (data && data.command === 'reload') {
      chrome.runtime.reload();
    }
  }
};

这个脚本使用websockets连接到liverload服务器。然后，它会在重载消息时发出一个chromium .runtime.reload()调用。下一步是将该脚本添加到清单中作为后台脚本运行。Json，瞧!

注意:这不是我的解决方案。我只是把它发布出来。我在Chrome扩展生成器(伟大的工具!)的生成代码中发现它。我把这个贴在这里，因为它可能有帮助。

你的内容文件，如html和清单文件是不能改变没有安装扩展，但我相信JavaScript文件是动态加载，直到扩展已经打包。

我知道这是因为当前的项目，我通过Chrome扩展API工作，似乎每次我刷新一个页面加载。

苹果只

使用扩展Reloader:

使用打印稿

将你的观察者添加到你的项目中:yarn Add tsc-watch 向package.json添加脚本命令

...
  "scripts": {
    "dev": "tsc-watch --onSuccess \"open -a '/Applications/Google Chrome.app' 'http://reload.extensions'\""
  },
...

运行脚本yarn dev

使用JavaScript

将你的watcher添加到你的项目中:yarn Add watch-cli 向package.json添加脚本命令

...
  "scripts": {
    "dev": "watch -p \"**/*.js\" -c \"open -a '/Applications/Google Chrome.app' 'http://reload.extensions'\""
  },
...

运行脚本yarn dev

额外的好处:在Extensions Reloader选项中打开“reload current tab”，这样它就会在做出更改后重新加载:

如果你有一台Mac，最简单的方法就是使用Alfred App!

只需使用Powerpack获取Alfred App，然后添加下面链接中提供的工作流，并自定义你想要的热键(我喜欢使用⌘+ + R)。

现在，每次你使用热键，谷歌Chrome浏览器将重新加载，无论你在那个时刻的应用程序。

如果你想使用其他浏览器，打开AppleScript在阿尔弗雷德首选工作流程和替换“谷歌Chrome”与“Firefox”，“Safari”，…

我还将在这里显示在ReloadChrome中使用的/usr/bin/osascript脚本的内容。Alfredworkflow文件，这样你就可以看到它在做什么。

tell application "Google Chrome"
  activate
  delay 0.5
  tell application "System Events" to keystroke "r" using command down
  delay 0.5
  tell application "System Events" to keystroke tab using command down
end tell

工作流文件为ReloadChrome.alfredworkflow。

BROWSER-SYNC

使用惊人的浏览器同步

更新浏览器(任何)当源代码改变(HTML, CSS，图像等) 支持Windows、MacOS和Linux操作系统 您甚至可以使用移动设备观看您的代码更新(实时)

MacOS上的安装(查看其他OS上的安装帮助)

安装NVM，这样您就可以尝试任何Node版本

brew install nvm             # install a Node version manager
nvm ls-remote                # list available Node versions
nvm install v10.13.0         # install one of them
npm install -g browser-sync  # install Browser-Sync

如何使用浏览器同步静态网站

让我们来看两个例子:

browser-sync start --server --files . --host YOUR_IP_HERE --port 9000

browser-sync start --server --files $(ack --type-add=web:ext:htm,html,xhtml,js,css --web -f | tr \\n \ ) --host $(ipconfig getifaddr en0) --port 9000

——server选项允许您在终端的任何地方运行本地服务器，而——files选项允许您指定将跟踪哪些文件的更改。我更喜欢对跟踪的文件更具体，因此在第二个示例中，我使用ack来列出特定的文件扩展名(重要的是这些文件没有带空格的文件名)，并使用useipconfig来查找我在MacOS上的当前IP。

如何使用浏览器同步动态网站

如果您正在使用PHP、Rails等，您已经有一个正在运行的服务器，但是当您更改代码时它不会自动刷新。所以你需要使用——proxy开关让browser-sync知道该服务器的主机在哪里。

browser-sync start --files $(ack --type-add=rails:ext:rb,erb,js,css,sass,scss,coffee --rails -f | tr \\n \ ) --proxy 192.168.33.12:3000 --host $(ipconfig getifaddr en0) --port 9000 --no-notify --no-open

在上面的例子中，我已经在浏览器的192.168.33.12:3000上运行了一个Rails应用程序。它实际上运行在使用Vagrant盒子的虚拟机上，但我可以使用该主机上的端口3000访问虚拟机。我喜欢——no-notify来停止浏览器同步，每次我修改代码时，都会在浏览器上发送通知警报，——no-open来停止浏览器同步行为，当服务器启动时立即加载浏览器选项卡。

重要提示:如果您正在使用Rails，请避免在开发中使用Turbolinks，否则在使用——proxy选项时将无法单击链接。

希望对别人有用。我尝试了许多技巧来刷新浏览器(甚至是我之前使用AlfredApp提交的关于这个StackOverflow问题的旧帖子)，但这是真正的方法;没有更多的黑客，它只是流动。

CREDIT:用一个命令启动本地实时重载web服务器