Question

我正在尝试配置Gulp和Browsersync以在不重新加载的情况下注入CSS更改。附加的Gulpfile.js在SASS任务之后调用.pipe（browserSync.stream（））。我们看到它注入，但随后调用完全重新加载。

/**
 * Gulpfile
 */
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var notify = require('gulp-notify');
var browserSync = require('browser-sync');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var fs = require("fs");
var exec = require('child_process').exec;
var config = require("./config");
var appDir = 'web'

/**
 * If config.js exists, load that config for overriding certain values below.
 */
function loadConfig() {
    if (fs.existsSync(__dirname + "/./config.js")) {
        config = {};
        config = require("./config");
    }

    return config;
}

loadConfig();

/*
* This task generates CSS from all SCSS files and compresses them down.
*/
gulp.task('sass', function () {
    return gulp.src(appDir + '/anonymous/scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({
            noCache: true,
            outputStyle: "compressed",
            lineNumbers: false,
            loadPath: appDir + '/anonymous/css/*',
            sourceMap: true
        })).on('error', function(error) {
            gutil.log(error);
            this.emit('end');
        })
        .pipe(sourcemaps.write(appDir + '/anonymous/maps'))
        .pipe(gulp.dest(appDir + '/anonymous/css'))
        .pipe(browserSync.stream())
        .pipe(notify({
            title: "SASS Compiled",
            message: "All SASS files have been recompiled to CSS.",
            onLast: true
        }))
        ;
});


/**
 * Define a task to spawn Browser Sync.
 * Options are defaulted, but can be overridden within your config.js file.
 */
gulp.task('browser-sync', function() {
    browserSync.init({
        port: config.browserSync.port,
        proxy: config.browserSync.hostname,
        open: config.browserSync.openAutomatically,
        injectChanges: config.browserSync.injectChanges
    });
});

/**
 * Defines the watcher task.
 */
gulp.task('watch', function() {
    // watch scss for changes
    gulp.watch([
        appDir + '/anonymous/scss/**/*.scss',
        appDir + '/secure/components/**/*.scss'
    ], ['sass']);

});

gulp.task('default', [
    'sass',
    'watch',
    'browser-sync'
]);

以下是browsersync配置中引用的config.js。

module.exports = {
  browserSync: {
    hostname: "http://192.168.50.4:9080/site/secure",
    port: 3000,
    openAutomatically: true,
    reloadDelay: 50,
    injectChanges: true,
  },
};

Answer 1

我找到了自己问题的答案。

生成源地图，browsersync正在观看sourcemap文件夹，并在重新生成源地图时触发完全刷新。删除这些行将停止SASS任务的完全刷新。

    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write(appDir + '/anonymous/maps'))

参考

https://github.com/BrowserSync/browser-sync/issues/235

Gulp和Browsersync注入CSS但导致完全重新加载

1 个答案: