使用Gulp+BrowserSync自动刷新网页和JSDoc网页

Question

我的 Gulp 设置为在应用程序发生更改时自动 load/refresh 我的网页。但是，我也想让它加载我的文档页面，并每次都刷新该源。

我已将它配置为从两个目录提供服务，但我不知道如何让它加载带有文档目录的第二个选项卡。

[BS] Access URLs:
 ---------------------------------------
   Local: http://localhost:3000
 External: http://192.168.11.181:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.11.181:3001
 ---------------------------------------
[BS] Serving files from: app/
[BS] Serving files from: docs/API.v1.1.0/

我的 gulpfile.js 服务器部分。

AppSync.init({
    server: {
        baseDir: [RootDir.home, RootDir.docs + DocumentationPath.javascript], 
        index: 'index.html',
        directory: false,           // Set to True for Browsing Files, not launching index
    },
    //open: false,
    //reloadOnRestart: false
});

我尝试使用 BrowserSync.create() 添加第二个 HelpSync 并设置服务器变量，但这会导致重新使用地址时出现错误，即使我指定了新端口也是如此。

我希望让它启动并加载我的应用程序和 API 文档，并在我更改任何代码时保持刷新。我可以验证应用程序是否正常工作，并且我的 API 文档正确无误。

Answer 1

基本上，我在所有重要任务中都使用 BrowserSync.reload() 方法，例如

var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var gulp        = require('gulp');
var sass        = require('gulp-sass');

// Sass task, will run when any SCSS files change.
gulp.task('sass', function () {
    return gulp.src('scss/styles.scss')
        .pipe(sass({includePaths: ['scss']})) // compile sass
        .pipe(gulp.dest('css')) // write to css dir
        .pipe(filter('**/*.css')) // filter the stream to ensure only CSS files passed.
        .pipe(**reload**({stream:true})); // inject into browsers
});

// Browser-sync task, only cares about compiled CSS
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

如文档所述here

Answer 2

我一直在使用 BrowserSync 和选项，发现如何托管两个不同的路径，您只需使用 Routes 服务器选项即可。这将使两个 windows 保持同步，如我所愿。唯一的问题是我必须通过克隆应用程序 window 并更改 URL.

来启动第二个 window（对于 API 文档）

return AppSync.init({
    server: {
        baseDir: ['./'], 
        index: 'index.html',
        directory: false,           // Set to True for Browsing Files, not launching index
        routes: {
            '/API': 'APIV1.0.0/,
            "/app": 'app/'
        }
    },
   port: 3000,
   startPath: '/app'
});

添加 startPath 将使应用程序 window 在刷新时加载并启动。但是，我必须克隆此 window，并更改地址才能显示 API 文档。不过，一旦完成此操作，windows 都将根据文件更改进行更新。如果能同时打开 windows 就好了，但这仍然很出色。

使用Gulp+BrowserSync自动刷新网页和JSDoc网页

Using Gulp+BrowserSync to automatically refresh web page and JSDoc Web page

gulp

browser-sync