При добавлении нового компонента в master.scss синхронизация браузера не перезагружается.

если я добавлю новый компонент (_example.scss) в свой master.scss и сохраню его, моя синхронизация с браузером автоматически перезагрузится и покажет изменения стиля из «_example.scss». Если я изменю что-то еще в этом файле и сохраню его, мой браузер не перезагрузится... Есть идеи? Если я перезапущу глоток, он отлично работает. Можно ли повторно инициализировать файлы, которые выполняются с помощью синхронизации браузера?

Вот мой 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'])
});

gulp browser-sync gulp-sass gulp-watch
person ngo94    schedule 09.08.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я бы сказал, что это проблема времени. 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 перезагружались в самой задаче, используя опцию потоковой передачи. И вышеприведенный стиль используется для всего, кроме дерзости. Это связано с тем, что browserSync вводит новый css без полной перезагрузки страницы, но перезагрузка по-прежнему требуется для js и html. См. https://www.browsersync.io/docs/gulp.

person peterorum    schedule 10.08.2016
comment
спасибо за ваш ответ, все еще не работает :( - Мне нужно перезапустить gulp.. Suckz - person ngo94; 16.08.2016
comment
В дополнение к тому, что сказал @peterorum, что верно, добавьте операторы return во все свои задачи и посмотрите, поможет ли это. Также изучите параметр {stream:true}, упомянутый peterorum, и переместите вызов перезагрузки в конец соответствующих задач. - person Mark; 30.07.2017