Browser-Sync是一個方便的基于Node.js的NPM模塊，可用于更快的Web開發。 瀏覽器同步可在許多設備之間同步文件更改和交互。 最重要的功能是實時重新加載。 我們也可以在Java / Web項目中使用Browser-Sync。 Cagatay Civici創造了一個偉大的
視頻教程如何在PrimeFaces展示柜中使用此模塊。 PrimeFaces展示柜具有內置的Jetty服務器，該服務器將源文件夾src / main / webapp查找為Web上下文根。 通過Node.js軟件包管理器NPM安裝瀏覽器同步后

npm install -g browser-sync

我們必須在http：// localhost：8080 / showcase上啟動PrimeFaces展示柜的Jetty服務器。 此外，我們可以將此URL用作Browser-Sync中包含的內置服務器的代理。 Browser-Sync應該偵聽src / main / webapp下的更改

browser-sync start --proxy "http://localhost:8080/showcase" --files "src/main/webapp/**/*"

結果，將在帶有PrimeFaces展示柜的http：// localhost：3000 / showcase中啟動默認瀏覽器。 端口3000是Browser-Sync的默認端口。

在對Java文件進行更改之前，此方法將很好地起作用。 Java文件不是src / main / webapp下的Web資源。 在Maven項目中，它們位于src / main / java下 。 這意味著將無法識別Java文件中的更改。 解決方案是WAR爆炸 。 爆炸的WAR是從中部署Web應用程序的目錄。 每個應用程序服務器都可以部署爆炸的WAR。 對于Maven項目，該目錄通常為target / webapp 。 Maven WAR插件的目標是war：也爆炸了。 如果您有IDE，則可以將Web應用程序配置為爆炸式WAR。 幾年前，我已經用IntelliJ IDEA發表了有關熱部署的博客。 在IntelliJ中，您可以將更改的文件（CSS，JS，HTML資源和已編譯的Java文件）自動復制到爆炸的WAR的目錄中。

現在，如果您手動刷新瀏覽器，您還將看到Java類中的更改。 但我們希望做得更好。 我們要使用廣受贊譽的實時重新加載！ 為了實現此目標，請按以下方式設置要監視的文件

browser-sync start --proxy "http://localhost:8080/showcase" --files "target/classes/**/*.class, target/webapp/**/*"

輸出看起來像

[BS] Proxying: http://localhost:8080 [BS] Access URLs:---------------------------------------------------------------------Local: http://localhost:3000/showcaseExternal: http://192.168.178.27:3000/showcase---------------------------------------------------------------------UI: http://localhost:3001UI External: http://192.168.178.27:3001---------------------------------------------------------------------

現在，我可以對所有重要文件進行任何更改，并在控制臺中看到類似的內容

[BS] Watching files... [BS] File changed: target\webapp\META-INF\MANIFEST.MF [BS] File changed: target\webapp\WEB-INF\classes\some\showcase\bean\SomeBean.class [BS] File changed: target\webapp\views\someView.xhtml [BS] File changed: target\webapp\META-INF\MANIFEST.MF

瀏覽器頁面由Browser-Sync自動更新（順便使用WebSocket）。 如果您的IDE遇到問題，可以使用Gulp進行救援！ 這是我對gulpfile.js的想法（Gulp 4）。

var browsersync = require('browser-sync').create();// init Browser-Sync gulp.task('browser-sync', function() {browsersync.init({proxy: "http://localhost:8080/my-showcase"}); });// compile changed Java files by Maven "mvn compile" // compiled classes will be transfered to target/classes automatically gulp.task('java', function () {// use 'spawn' to execute command using Node.jsvar spawn = require('child_process').spawn;// set the working directory to project root where gulpfile.js existsprocess.chdir(__dirname);// run "mvn compile"var child = spawn('mvn', ['compile']);// print outputchild.stdout.on('data', function(data) {if (data) {console.log(data.toString());}}); });// copy changes from src/main/webapp to target/webapp gulp.task('webapp', function () {return gulp.src('src/main/webapp/**/*', since: {gulp.lastRun('webapp')}).pipe(gulp.dest('target/webapp')); });// watch files for changes gulp.task('watch', function () {gulp.watch('src/main/java/**/*.java', ['java']);gulp.watch('src/main/webapp/**/*', ['webapp']);gulp.watch(['target/classes/**/*.class', 'target/webapp/**/*'], browsersync.reload); });// default task gulp.task('default', gulp.series('browser-sync', 'watch'));

該文件應放在項目根文件夾中。 現在，您可以執行命令了（當然應該安裝Gulp了）

gulp

并享受現場重裝！ 請考慮一下Gulp java任務。 Maven僅編譯更改的文件。 它運作非常快！ 如果不做任何更改，則無需編譯-mvn compile的輸出如下所示：

[INFO] Nothing to compile - all classes are up to date

如果我們在一個Java文件中進行更改，則輸出如下所示：

[INFO] Compiling 1 source file to <path>\showcase\target\classes

我還可以想象一些復雜的Gulp任務，例如在相關的JAR文件中編譯Java類，構建JAR并將其復制到爆炸的WAR的WEB-INF / lib文件夾中。

翻譯自: https://www.javacodegeeks.com/2016/05/npm-module-browser-sync-java-web-projects.html

總結

以上是生活随笔為你收集整理的Java / Web项目中的NPM模块Browser-Sync的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。