CSS-инъекция не работает с Gulp + Browsersync

Question

Я новичок в gulp, я работал с хрюканьем, и теперь у меня проблемы с глотком.

Важнейшим из них является автоматическая инъекция CSS, то есть не вокалистка и после многих лет я не знаю почему. Может кто-нибудь мне помочь? А также дайте мне несколько советов о моем конфиге? Заранее спасибо!

'use strict'; 

var gulp = require('gulp'), 
    sass = require('gulp-sass'), 
    autoprefixer = require('gulp-autoprefixer'), 
    csso = require('gulp-csso'), 
    jshint = require('gulp-jshint'), 
    uglify = require('gulp-uglify'), 
    imagemin = require('gulp-imagemin'), 
    rename = require('gulp-rename'), 
    clean = require('gulp-clean'), 
    concat = require('gulp-concat'), 
    notify = require('gulp-notify'), 
    cache = require('gulp-cache'), 
    sourcemaps = require('gulp-sourcemaps'), 
    livereload = require('gulp-livereload'), 
    lr = require('tiny-lr'), 
    server = lr(); 


var browserSync = require('browser-sync').create(); 
var reload = browserSync.reload; 

gulp.task('vendors', function() { 
    return gulp.src('./assets/js/vendors/*.js') 
    .pipe(concat('vendors.js')) 
    .pipe(gulp.dest('./assets/js/')) 
    .pipe(rename({ suffix: '.min' })) 
    .pipe(uglify()) 
    .pipe(gulp.dest('./assets/js/')) 
    .pipe(browserSync.stream()) 
    .pipe(notify({ message: 'Vendors task complete' })); 
}); 

gulp.task('sass', function() { 
    return gulp.src('./assets/sass/*.scss') 
    .pipe(sourcemaps.init()) 
    .pipe(sass({ style: 'expanded', })) 
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 
    .pipe(gulp.dest('./assets/css/')) 
    .pipe(rename({ suffix: '.min' })) 
    .pipe(csso()) 
    .pipe(sourcemaps.write()) 
    .pipe(gulp.dest('./assets/css/')) 
    .pipe(browserSync.stream()) 
    .pipe(notify({ message: 'Sass task complete' })); 
}); 


gulp.task('serve', function() { 

    browserSync.init({ 
     proxy: "pageone.dev", 
     files: "./assets/css/*.css", 
     bsFiles: "./assets/css/*.css" 
    }); 

    gulp.watch('./assets/sass/**/*.scss', ['sass']); 
    gulp.watch('./assets/js/vendors/**.js', ['vendors']); 
    gulp.watch('*.php', './assets/css/*.cs', './assets/js/*.js;').on('change', browserSync.reload); 

}); 


gulp.task('default', ['serve', 'sass']); 

Answer 1

Я нашел browserSync.stream очень ненадежно. Я предпочел бы предложить перезагрузку через процесс часов:

Убейте строку с browserSync в вашем Gulpfile:

gulp.task('sass', function() { 
    return gulp.src('./assets/sass/*.scss') 
    .pipe(sourcemaps.init()) 
    .pipe(sass({ style: 'expanded', })) 
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 
    .pipe(gulp.dest('./assets/css/')) 
    .pipe(rename({ suffix: '.min' })) 
    .pipe(csso()) 
    .pipe(sourcemaps.write()) 
    .pipe(gulp.dest('./assets/css/')) 
    .pipe(notify({ message: 'Sass task complete' })); 
}); 

И добавить перезарядку во время просмотра:

gulp.task('serve', function() { 

    browserSync.init({ 
     proxy: "pageone.dev", 
     files: "./assets/css/*.css", 
     bsFiles: "./assets/css/*.css" 
    }); 

    gulp.watch('./assets/sass/**/*.scss', ['sass']); 
    gulp.watch('./assets/js/vendors/**.js', ['vendors']); 
    gulp.watch('*.php').on('change', browserSync.reload); 
    gulp.watch('./assets/js/*.js').on('change', browserSync.reload); 
    gulp.watch('./assets/css/*.css').on('change', browserSync.reload); 

}); 

WOAH ... Я видел, что вы уже это сделали. Но есть тип ваших CSS файлов, один «s» отсутствует:

gulp.watch('*.php', './assets/css/*.cs', './assets/js/*.js;').on('change', browserSync.reload); 

Там также точка с запятой в вашем JS файлы Glob, и я не уверен, если вы можете пройти несколько Globs здесь. Попробуйте воспользоваться следующими линиями:

gulp.watch('*.php').on('change', browserSync.reload); 
    gulp.watch('./assets/js/*.js').on('change', browserSync.reload); 
    gulp.watch('./assets/css/*.css').on('change', browserSync.reload); 

Answer 2

Sourcemaps!

Одна из неприятных вещей, которые я потратил слишком много времени на отладку, - это то, почему браузер-sync перезагружает всю страницу, вместо того, чтобы вводить изменения CSS.

После погружения в файлы браузера синхронизации я узнал, что список существует по умолчанию для инъекционного файлов устанавливается в:

injectFileTypes: ["css", "png", "jpg", "jpeg", "svg", "gif", "webp"], 

Дело в том, что может быть не очень очевидным является то, что если любой другой файл, который не включен injectFileTypes получает изменения, которые браузер перезагрузит. В моем случае дополнительных файлов, которые были изменены, были файлы исходной карты *.css.map.

Если вы явно не укажете браузеру игнорировать файлы исходных файлов при изменении или в исходной конфигурации, браузер всегда будет перезагружен. Там два пути я считаю, чтобы сделать это, один через browsersync.stream метод, как следующие:

// Only stream the matching files. Ignore the rest. 
    .pipe(browsersync.stream({match: '**/*.css'})); 

Или по инициализации browsersync как следующий через files вариант с исключением рисунка на sourcemaps files: ['!**/*.maps.css'].

Мне нравится первый, так как я использую browsersync с nodemon в качестве прокси-сервера, поэтому я не использую аргумент файлов и не настраиваю свои собственные инструкции gulp watch.

Еще один способ сделать это, чтобы обновить параметр injectFileTypes при инициализации browsersync, однако, я не уверен, если CSS sourcemaps является инъекционным.

Я надеюсь, что это поможет кому-то, имеющему ту же проблему!

Answer 3

Для меня это было неправильно rel значение в ссылке css.Я обновил HREF, чтобы указать на CSS, но rel был еще stylesheet/less

Ниже на самом деле работает, если у вас есть ссылка на less.js и browserSync будет обновлять страницу, но CSS не будет обновляться:

<link rel="stylesheet/less" type="text/css" href="css/styles.css" /> 

Изменения отно исправить stylesheet исправляет проблему

<link rel="stylesheet" type="text/css" href="css/styles.css" /> 

Answer 4

Я был взволнован, когда я нашел этот вопрос, но потом разочарование после всех Previou Ответы не были тем, что мой вопрос был.

Я наконец-то отследил его до объекта параметров, который я передавал в браузер-синхронизацию при запуске. Этот объект получал путь для файла .less, который я установил gulp.watch, который перестроил файл .css для сайта.

Отслеживается, что путь к файлу без него начинался с «./src/client ...», но синхронизация браузера получала файл как «src/client ...», и хотя пути различны и они указывают на тот же файл.

Browser-sync видел файл без изменений как измененный и, следовательно, освежающий, поскольку он не находится в списке файлов для инъекций.

• Убедитесь, что ваши пути соответствуют чистым STRINGS, а не просто указывают на один и тот же файл.

Надеюсь, это может помочь другим лицам, проблемы которых не устранены вышеуказанными другими вариантами проверки.

Answer 5

Остерегайтесь @import для загрузки css-файлов в заголовке страницы. Drupal делает это по умолчанию, чтобы избежать ограничения файла css в IE (среди прочих причин). Для Drupal вы можете использовать Link CSS module или сделать несколько трюков.

Injection работал для меня после внесения этого изменения.