Java / Web项目中的NPM模块Browser-Sync

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/showcase
    External: http://192.168.178.27:3000/showcase
 ---------------------------------------------------------------------
          UI: http://localhost:3001
 UI 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.js
    var spawn = require('child_process').spawn;

    // set the working directory to project root where gulpfile.js exists
    process.chdir(__dirname);

    // run "mvn compile"
    var child = spawn('mvn', ['compile']);

    // print output
    child.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