Question

我有我的Gulp设置，可以在应用程序发生变化时自动加载/刷新我的网页。但是，我还想让它加载我的文档页面，并且每次都刷新该源文件。

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

[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
});

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

我希望启动并加载我的App和API文档，并在更改任何代码时继续刷新。我可以验证应用程序是否有效，并且我的API确实正确记录了文档。

Answer 1

我一直在使用BrowserSync和选项，并找到了如何托管两个不同的路径，您只需使用路由服务器选项。这将保持两个窗口同步，如我所愿。唯一的问题是我必须通过克隆应用程序窗口并更改URL来启动第二个窗口（对于API文档）。

add_rewrite_rule( 'resources/(.+?)(/page/([0-9]+))?/?$', 'index.php?taxonomy=res_category&term=$matches[1]&paged=$matches[3]', 'top');

添加startPath将在刷新时加载Application窗口并启动。但是，我必须克隆此窗口，并更改地址以显示API文档。完成此操作后，两个窗口都将在文件更改时更新。打开两个窗户会很不错，但这仍然非常出色。

Answer 2

基本上，我在所有重要任务中使用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

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

2 个答案: