Question

解决

如果你在命令行(Reloading browsers...)获得了messenge并且没有重新加载浏览器，你必须添加html＆amp; 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 - 请务必在.stream()之后致电gulp.dest。

.pipe(browserSync.stream())

您只能在minify任务中使用browserSync.stream()，但不能在样式任务中使用<body>。另外，请确保必须存在<script async>...</script>标记。

Browsersync通过在初始请求期间在标记之后注入异步脚本标记（<body>）来工作。 为了使其正常运行，必须存在app.use(csrf({ cookie: true, value: (req) => (req.cookies.csrfToken) }));标记。或者，您可以使用snippetOptions
为代码段提供自定义规则

与gulp的Browsync不会刷新浏览器

1 个答案: