与 gulp 同步浏览器不会刷新浏览器

Question

已解决

如果您在命令行 (Reloading browsers...) 中收到消息并且它没有重新加载浏览器，您必须将 html & body 标记添加到您的 index.php / index.hmtl 文件中。

Answer 1

首先，如果一个任务可以完成，为什么需要两个任务？

gulp.task('style', function () {
    return gulp.src( styleSRC )
    /*********** COMPILE ***********/
    .pipe(sourcemaps.init())
    .pipe(sass({
        outputStyle: 'compact'
        // outputStyle: 'compressed'
        // outputStyle: 'nested'
        // outputStyle: 'expanded'
    }).on('error', sass.logError))
    .pipe( sourcemaps.init( { loadMaps: true } ) )
    .pipe( autoprefixer( AUTOPREFIXER_BROWSERS ) )
    .pipe(sourcemaps.write('/maps'))
    .pipe(gulp.dest( styleDEST )) // Sass -> css
    /*********** MINIFY ***********/
    .pipe(cleanCSS({
        level: '2',
        debug: true}, function(details) {
            console.log(details.name + ': ' + details.stats.originalSize + ' kb');
            console.log(details.name + ': ' + details.stats.minifiedSize + ' kb');
            console.log(details.name + ': ' + details.stats.timeSpent + ' ms');
            console.log(details.name + ': ' + details.stats.efficiency + '%');
        }))
    .pipe( rename( { suffix: '.min' } ) ) // rename to .min
    .pipe(gulp.dest( styleDEST )) // Publish
    .pipe(browserSync.stream())
    .pipe( notify( { message: 'TASK: "style" Completed! ', onLast: true } ) );
});

现在，回到您的问题。 Browsersync 只在编译完成时关心你的 CSS - 确保你在 gulp.dest.

之后调用 .stream()

.pipe(browserSync.stream())

您只在 minify 任务中使用 browserSync.stream()，但不用于 style 任务。另外，确保 <body> 标签必须存在。

Browsersync works by injecting an asynchronous script tag (<script async>...</script>) right after the tag during initial request. In order for this to work properly the <body> tag must be present. Alternatively you can provide a custom rule for the snippet using snippetOptions

与 gulp 同步浏览器不会刷新浏览器

Browsync with gulp doesn´t refresch browser

gulp

browser-sync