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模块或做一些主题技巧。

进行此更改后，注射对我有效。