Question

如果我向master.scss添加一个新组件（_example.scss）并保护它我的浏览器同步自动重新加载并显示＆＃34; _example.scss＆＃34;的样式更改。如果我更改此文件中的其他内容并保护它，我的浏览器不会重新加载...任何想法？如果我重新开始gulp，它完美无缺。是否可以通过浏览器同步重新初始化文件？

继承人我的gulpfile.js：

var gulp = require('gulp');  
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var notify = require('gulp-notify');
var cssmin = require('gulp-cssmin');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();
var changed = require('gulp-changed');
var autoprefixer = require('gulp-autoprefixer');
var reload = browserSync.reload;

// Compile
gulp.task('sass-master', function () {  
    gulp.src('./files/layout/scss/master.scss')
        .pipe(plumber())
        .pipe(sass({}).on('error', function(err) {
            return notify().write(err);
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(cssmin())
        .pipe(autoprefixer('last 2 version', '> 1%', 'ie 7', 'ie 8'))
        .pipe(gulp.dest('./files/layout/css'))
        .pipe(notify('sass-master-task done, ready!'));
});
gulp.task('sass-ieframe', function () {  
    gulp.src('./files/layout/scss/base/ieframe.scss')
        .pipe(plumber())
        .pipe(sass({}).on('error', function(err) {
            return notify().write(err);
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(cssmin())
        .pipe(gulp.dest('./files/layout/css'))
        .pipe(autoprefixer('last 2 version', '> 1%', 'ie 7', 'ie 8'))
        .pipe(notify('sass-ieframe-task done, ready!'));
});
gulp.task('sass-fonts', function () {  
    gulp.src('./files/layout/scss/base/fonts.scss')
        .pipe(plumber())
        .pipe(sass({}).on('error', function(err) {
            return notify().write(err);
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(cssmin())
        .pipe(gulp.dest('./files/layout/css'))
        .pipe(autoprefixer('last 2 version', '> 1%', 'ie 7', 'ie 8'))
        .pipe(notify('sass-fonts-task done, ready!'));
});

// Serve
gulp.task('browser-sync', function() {
    browserSync.init(['./files/layout/css/*.css'], {
        proxy: 'dumb-test'
    });
});

// Reload Task
gulp.task('bs-reload', function () {
    browserSync.reload();
});


// Watch Task
gulp.task('default', ['sass-master', 'sass-fonts', 'sass-ieframe', 'browser-sync'], function () {
    gulp.watch(['./files/layout/scss/**/*.scss', './files/layout/scss/master.scss', '!./files/layout/scss/base/ieframe.scss', '!./files/layout/scss/base/fonts.scss'], ['sass-master', 'bs-reload'])
    gulp.watch(['./files/layout/scss/base/ieframe.scss'], ['sass-ieframe', 'bs-reload'])
    gulp.watch(['./files/layout/scss/base/fonts.scss'], ['sass-fonts', 'bs-reload'])
    gulp.watch(['./templates/**/*'], ['bs-reload'])
    gulp.watch(['./files/**/*.+(png|jpg|gif|svg)'], ['bs-reload'])
});

Answer 1

我说这是一个时间问题。 Gulp并行运行任务，重新加载任务应该等到构建完成后。例如而不是

gulp.watch(['./files/layout/scss/base/ieframe.scss'], ['sass-ieframe', 'bs-reload'])

应该是

gulp.watch(['./files/layout/scss/base/ieframe.scss'], ['sass-ieframe-watch']

单独的任务

gulp.task('sass-ieframe-watch', ['sass-ieframe'], function(done) {
  browserSync.reload();
  done();
});

最好使用流选项在您的任务中重新加载您的sass任务。而上述风格除了sass之外还用于其他一切。这样浏览器会在没有完整页面重新加载的情况下注入新的css，但js＆amp; s仍然需要重新加载。 HTML。见https://www.browsersync.io/docs/gulp

如果向master.scss添加新组件，则浏览器同步不会重新加载

1 个答案: