Question

敬畏，为什么不赢得浏览器同步更新Chrome。 = [我正在使用gulp来运行浏览器同步，这似乎是正确托管的。我在gulp文件中设置了这样的服务器：

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

gulp.task('webserver', function() {
    browser({
        server:{
            baseDir: './'
        }
    });
});

gulp.task('reload', function(){reload();});

我在webstorm中运行webserver任务，我得到一个新的chrome选项卡，其中包含一条消息，说明＆＃34;已连接到Browser Sync＆＃34;。真棒。我也在输出窗口中得到它。

[18:47:45] Using gulpfile ...\gulpfile.js 
[18:47:45] Starting 'webserver'... 
[18:47:45] Finished 'webserver' after 27 ms
[BS] Access URLs:  
-------------------------------------
      Local: http://localhost:3000
   External: http://192.168.1.17:3000  
-------------------------------------
         UI: http://localhost:3001  
UI External: http://192.168.1.17:3001  
------------------------------------- 
[BS] Serving files from: ./

一切看起来都很棒。然后我在index.html中更改了一些HTML并运行重新加载任务。我得到了这个输出：

[19:02:55] Using gulpfile ...\gulpfile.js
[19:02:55] Starting 'reload'...
[19:02:55] Finished 'reload' after 121 μs

Process finished with exit code 0

但浏览器并未使用我的最新内容进行更新。我已经尝试将其归结为应该运行的最基本代码，但我无法更新浏览器。 = [我错过了任何会阻止它工作的东西吗？

Answer 1

TL; DR

我相信你的回答是你如何看文件，然后调用加载。所以基本上，如果你使用sass或更少，或打字稿等。你需要你的browsersync任务：

首先监视这些文件，然后执行他们的任务以转换（编译）到.css，.js等...
一旦检测到.css，.js，.html文件中的更改（将在转换器任务将它们转换为这些文件后发生），请重新加载浏览器。

但无论您是否使用它们，您仍然可以查看所有文件夹位置和文件扩展名。这是通过将您正在观看的所有位置放入一个数组，并观察文件数组来完成的。

注意： Browsersync与gulp的手表有一个单独的.watch()。使用browsersyncs watch函数而不是gulp会看到新文件，而gulps watch命令则不会。请参阅下面的示例。

我为提供这样一个不必要的详细回复而道歉，但我使用gulp-cli（gulp 4）w /多个任务文件和外部配置），并且暂时没有使用gulp 3，所以我会尝试在一个任务中将其移植到吞咽3中。

一些例子

我提供这两个版本，因为gulp 4可能很快就会发布。我将复制并粘贴我的，并稍微修改它。这意味着我将使用多任务文件版本。

以下是我将提供的两个版本的概述：

我使用的那个，是：gulp 4 w /多个任务文件和外部配置
- gulpfile
- 外部任务
- 外部配置
  - 我还将包含一个示例sass和typescript配置来显示带有浏览器同步监视任务的通配符
带有浏览器同步任务的gulpfile，我将尝试移植到gulp 3

1。 Gulp 4 w /多个任务文件和外部配置

我将在每个文件中提供一些注释，就像我在每个文件中一样。如果感兴趣的话，我会提供安装说明，就像我在我的每一个中一样。这主要是出于复制和粘贴的原因。而且我还将提供sass和typescript的配置，因为它超出了答案范围，我不会提供任务文件。

以下是gulp文件夹结构的简要概述，以帮助澄清：

| -- Project-Folder/
|    | -- gulp/
|    |    | -- tasks/
|    |    |    ' -- browser-sync.js
|    |    ' -- config.js
|    ' -- gulpfile.js

gulpfile

gulpfile.js

// =========================================================
// Project: PROJECT-TITLE
//
// NOTES: Using Gulp 4, in order to use, please uninstall gulp 3 globally and locally, and install gulp 4 both globally and locally
// Dependencies: ---
// Global: npm install -g gulpjs/gulp.git#4.0 browser-sync
// Local: npm install --save-dev gulpjs/gulp.git#4.0 browser-sync gulp-load-plugins
// ========================================================= 
// ------------------------------------------------ Requires
var gulp        = require('gulp'),
    config      = require('./gulp/config'),
    plugins     = require('gulp-load-plugins')();

// --------------------function to get tasks from gulp/tasks
function getTask(task) {
    return require('./gulp/tasks/' + task)(gulp, plugins);
}
// ---------------------------------------------- Gulp Tasks
gulp.task('sass'        ,       getTask( 'sass'         ));
gulp.task('ts'          ,       getTask( 'typescript'   ));
gulp.task('sync'        ,       getTask( 'browsersync'  ));

// --------------------------------------- Default Gulp Task
gulp.task('default', gulp.series(
    gulp.parallel('sass', 'ts'), 'sync')
);

外部任务文件

browser-sync.js

// =========================================================
// Gulp Task: browsersync
// NOTE: Using gulp v4
// Description:  Sync sass, typescript, html, and browser
// using an external config, or modify src and config options
// npm install --save-dev browser-sync gulp-typescript gulpjs/gulp.git#4.0
// Options: node-sass gulp-sass || gulp-ruby-sass
// =========================================================
var config              = require( '../config.js' );
var browserSync         = require( 'browser-sync' ).create();

module.exports = function( gulp, plugins ) {
    return function () {
    var stream = 
// -------------------------------------------- Start Task
    browserSync.init( config.browsersync.opts );

    browserSync.watch( config.sass.src, gulp.series( 'sass' ) );
    browserSync.watch( config.typescript.src, gulp.series( 'ts' ) );
    browserSync.watch( config.browsersync.watch ).on( 'change', browserSync.reload );
// ---------------------------------------------- End Task
    return stream;
    };
};

外部配置

注意：如果这似乎没必要，可以轻松地将这些配置添加到任务文件中。我只是提供，以便我可以轻松地从我自己的项目中复制和粘贴一些任务。

// =========================================================
// Project: PROJECT-TITLE
// =========================================================
// ------------------------------------------ Export Configs
module.exports = {
production: false,

// --------------------------------------------- browsersync
    browsersync: {
        opts: {
            server: './src/',
            // proxy: 'localhost:3000',
            port: 8000
        },
        watch: [
            './src/assets/styles/css/**/*.css',
            './src/assets/scripts/js/**/*.js',
            './src/**/*.html'
        ]
    },
// ---------------------------------------------------- sass
    sass: {
        src: [
            "./src/assets/styles/sass/**/*.{scss,sass}"
        ],
        opts: { },
        outputName: 'main.css',
        dest: './src/assets/styles/css/'
    },
// ---------------------------------------------- typescript
    typescript: {
        src: [
            './src/assets/scripts/ts/**/*.ts'
        ],
        dest: './src/assets/scripts/js',
        opts: {
            noImplicitAny: true, 
        }
    }
}

Gulp 3版

注意：在配置部分，我只会将带有扩展名的sass和typescript src文件夹放在一起，并将其余部分留空，因为它们与此示例无关。 gulpfile.js

// =========================================================
// Project: PROJECT-TITLE
//
// NOTES: Using Gulp 4, in order to use, please uninstall gulp 3 globally and locally, and install gulp 4 both globally and locally
// Dependencies: ---
// Global: npm install -g gulpjs/gulp.git#4.0 browser-sync
// Local: npm install --save-dev gulpjs/gulp.git#4.0 browser-sync gulp-load-plugins
// ========================================================= 
// ------------------------------------------------ Requires
var gulp        = require( 'gulp' ),
    sass        = require( 'gulp-sass' ),
    ts          = require( 'gulp-typescript' )
    browsersync = require( 'browser-sync' ).create();


// -------------------------------------------------- Config
var config = {
    browsersync = {
        opts: {
            server: './src/',
            // proxy: 'localhost:3000',
            port: 8000
        },
        watch: [
            './src/assets/styles/css/**/*.css',
            './src/assets/scripts/js/**/*.js',
            './src/**/*.html'
        ]
    },
    sass = { src: './src/assets/styles/sass/**/*.{scss,sass}', ... },
    ts   = { src: './src/assets/scripts/ts/**/*.ts', ... }
}

// ---------------------------------------------- Gulp Tasks
gulp.task( 'sass', function() {
    // task code here
});

gulp.task( 'ts', function() {
    // task code here
});

gulp.task('browsersync', [ 'sass', 'ts' ], function() {
    browserSync.init( config.browsersync.opts );

    // Transpile your preprocessors to their .css, .js, .html versions first
    browserSync.watch( config.sass.src, [ 'sass' ] );
    browserSync.watch( config.typescript.src, [ 'ts' ] );

    // Then under watch, watch all of the locations in an array glob
    // such as in the config object at the top of this file.
    // Once the preprocessors change to their .css, .js, .html  
    // counterparts, that will trigger the reload
    browserSync.watch( config.browsersync.watch ).on( 'change', browserSync.reload );
});

// --------------------------------------- Default Gulp Task
gulp.task( 'default', [ 'browsersync' ] );

再次，对于非常详细的回复感到抱歉。只是为了清晰起见。我希望它能帮助你和其他任何人。

为什么浏览器不会同步更新我的浏览器？

1 个答案: