Перезагрузка синхронизации браузера, но CSS не меняется с помощью LESS и Gulp

Я пытаюсь понять, как использовать синхронизацию браузера в сочетании с gulp и less, чтобы браузер автоматически обновлялся при изменении меньшего количества файлов после компиляции. То, что у меня есть прямо сейчас, вызывает то, что выглядит как перезагрузка в системе с сообщением «Подключено к синхронизации браузера», но я не вижу изменений в браузере. При полной ручной перезагрузке с отключенным кешем я вижу ожидаемые изменения, поэтому задача css/less работает частично, но я что-то упускаю при синхронизации браузера.

О, я использую операторы @import в основном файле .less, чтобы получить меньше файлов для каждого отдельного модуля. Спасибо за ваше время и помощь!

gulp.task('less', function(){
return gulp.src(basepath + 'styles/emma.less')
    .pipe(plumber())
    .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(minifyCSS())
    .pipe(sourcemaps.write('./'))
    .pipe(filesize())
    .pipe(gulp.dest( paths.dest + '/css' ))
    .pipe(reload({stream: true}));
});
gulp.task('browser-sync', function() {
    browserSync({
        proxy: 'localhost:8080'
    });
});    
//dev task to compile things on the fly
gulp.task('dev', ['browser-sync'], function(){
    gulp.watch(paths.scripts, ['scripts']);
    gulp.watch(paths.less, ['less']);
    gulp.watch(paths.templates, ['templates']);
});

gulp less browser-sync
person paniclater    schedule 27.04.2015    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Хороший способ заставить browserSync работать таким образом — добавить новый прослушиватель для сгенерированных файлов. Вы компилируете LESS в CSS,

gulp.task('less', function(){
return gulp.src(basepath + 'styles/emma.less')
    .pipe(plumber())
    .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(minifyCSS())
    .pipe(sourcemaps.write('./'))
    .pipe(filesize())
    .pipe(gulp.dest( paths.dest + '/css' ));
});

и поместите наблюдатель за файлами в результаты, вызывая перезагрузку:

gulp.task('dev', ['browser-sync'], function(){
    gulp.watch(paths.less, ['less']);
    gulp.watch(paths.dest + '/css/**/*.css', reload);
});

Одной из причин, по которой исходный код не будет работать, может быть потеря ссылки на исходные файлы после их компиляции (хотя это не более чем предположение).

person ddprrt    schedule 28.04.2015
comment
Спасибо за ваш вклад, я пошел дальше и изменил этот подход, и браузер перезагружается после меньшей задачи, поэтому он, похоже, обновляется после компиляции css. Однако даже при отключенном кэшировании требуется ручное обновление после автоматического обновления, чтобы изменения отображались в браузере. Это вывод, который я получаю от gulp: [13:34:35] Starting 'less'... [13:34:35] Size emma.css.map : 208,83 kB [13:34:35] Size emma.css : 204 B [13:34:35] Завершено 'меньше' через 396 мс [BS] Перезагрузка браузеров... - person paniclater; 28.04.2015
comment
Можете ли вы также дать мне вывод из консоли разработчика Chrome ... он тоже должен что-то сказать об этом :-) - person ddprrt; 28.04.2015
comment
или если не консоль, то вкладка сеть? Кстати: я немного обновил свой ответ, чтобы сделать его более понятным. Например, эта настройка: gist.github.com/ddprrt/391c3ba29bd0ec05261d отлично работает со мной. - person ddprrt; 28.04.2015
comment
Я на 99% уверен, что моя проблема связана с тем, что это проект Java Spring/Angular, запускаемый Intellij IDE, и что экземпляр Intellij Tomcat не перераспределяет ресурсы синхронно с завершением задачи gulp. Я убедился, что ваш ответ работает, поэтому я принимаю его, хотя у меня все еще есть некоторые проблемы в моей среде. - person paniclater; 11.05.2015