CSS 注入不适用于 Gulp + Browsersync

Question

我是 gulp 的新手，我以前和 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 上的任何其他文件发生更改，浏览器将重新加载。在我的例子中，被更改的 extra 文件是源映射文件 *.css.map。

如果您没有明确告诉 browsersync 在更改或初始配置时忽略源映射文件，浏览器将始终重新加载。我相信有两种方法可以做到这一点，一种是通过browsersync.stream 方法，如下所示：

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

或通过files 选项初始化browsersync，如下所示，将模式排除到源映射files: ['!**/*.maps.css']。

我喜欢第一个，因为我使用 browsersync 和 nodemon 作为代理，所以我并没有真正使用 files 参数并设置自己的 gulp watch 语句。

另一种方法是在初始化 browsersync 时更新 injectFileTypes 选项，但是，我不确定 CSS 源映射是否可注入。

希望对遇到同样问题的人有所帮助！

Answer 2

我发现browserSync.stream 非常不可靠。我宁愿建议通过监视过程重新加载：

在你的 Gulpfile 中使用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 中还有一个分号，我不确定您是否可以在此处传递多个 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...”获取，尽管路径不同且它们指向同一个文件。

Browser-sync 看到 .less 文件已更改，因此刷新，因为它不在可注入文件列表中。

• 确保您的路径与纯字符串匹配，而不仅仅是指向同一个文件。

希望这可能有助于其他问题未通过上述其他检查选项解决的人。

Answer 5

注意 @import 在页眉中加载 css 文件。 Drupal 默认这样做是为了避免 IE 中的 css 文件限制（以及其他原因）。对于 Drupal，您可以使用 Link CSS module 或做一些主题技巧。

进行此更改后，注入对我有用。