CSS注入不適用於Gulp + Browsersync

Question

我是新手，我曾經和grunt一起工作，現在在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

源圖！

我花了太多時間進行調試的煩人的事情之一就是為什么瀏覽器同步會重新加載整個頁面而不是注入CSS更改。

深入瀏覽器同步文件后，我發現默認的注入文件列表設置為：

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

可能不太明顯的是，如果injectFileTypes上沒有的其他任何文件得到更改，瀏覽器將重新加載。 在我的情況下被更改多余的文件是在sourcemap文件*.css.map 。

如果您沒有在更改時或在初始配置中明確告訴browsersync忽略源地圖文件，則瀏覽器將始終重新加載。 我相信有兩種方法可以做到這一點，一種是通過browsersync.stream方法，如下所示：

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

或通過以下方式通過files選項初始化browsersync，如下所示files: ['!**/*.maps.css']排除源映射files: ['!**/*.maps.css']模式files: ['!**/*.maps.css'] 。

我喜歡第一個，因為我使用的是nodenode作為代理的browsersync，所以我並沒有真正使用files參數並設置自己的gulp watch語句。

實現此目的的另一種方法是在初始化browsersync時更新injectFileTypes選項，但是，我不確定CSS sourcemap是否可注入 。

希望這對遇到同樣問題的人有所幫助！

Answer 2

我發現browserSync.stream非常不可靠。 我寧願建議通過監視過程重新加載：

用browserSync中的browserSync終止該行：

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);

});

哇，我知道您已經做到了。 但是CSS文件上有一種類型，缺少一個“ s”：

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

JS文件的全局名稱也用分號表示，我不確定您是否可以在此處傳遞多個Glob。 嘗試使用以下行：

  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 3

對我來說，它在CSS鏈接中留下了錯誤的rel值。 我更新了href以指向CSS，但是rel仍然是stylesheet/less

如果您引用了less.js，並且以下內容實際上可以工作，並且browserSync將更新頁面，但是CSS 將不會更新：

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

更改rel以更正stylesheet可解決此問題

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

Answer 4

當我找到這個問題時，我感到很興奮，但是在所有先前的答案都不是我的問題之后，我感到非常失望。

我最終將其追蹤到啟動時傳遞給瀏覽器同步的選項對象。 該對象正在獲取.less文件的路徑，我在該文件上設置了gulp.watch，從而為站點重建了.css文件。

跟蹤到.less文件的路徑以“ ./src/client ...”開頭，但瀏覽器同步將文件獲取為“ src / client ...”，盡管路徑不同並且它們指向同一文件。

瀏覽器同步發現.less文件已更改，因此刷新，因為它不在可注入文件列表中。

• 確保您的路徑匹配為純STRINGS，而不僅僅是指向同一文件。

希望這可以幫助其他無法通過上述其他選項解決的問題。

Answer 5

注意@import以將CSS文件加載到頁面標題中。 Drupal默認情況下這樣做是為了避免IE中的css文件限制（還有其他原因）。 對於Drupal，您可以使用Link CSS模塊或做一些主題技巧。

進行此更改后，注射對我有效。