javascript - CSS 注入(inject)不适用于 Gulp + Browsersync

Question

我是 gulp 的新手，我以前用 grunt 工作，现在我在 gulp 上遇到了一些麻烦。

其中最重要的是自动 CSS 注入(inject)，它没有起作用，经过很多时间后我不知道为什么。谁能帮我？并给我一些关于我的配置的建议？提前致谢!

'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

资源 map !

我花了太多时间调试的烦人事情之一是为什么浏览器同步会重新加载整个页面而不是注入(inject) CSS 更改。

深入研究浏览器同步文件后，我发现用于注入(inject)文件的默认列表设置为:

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

可能不是很明显的是，如果任何其他不在 injectFileTypes 上的文件发生更改，浏览器将重新加载。在我的例子中，被更改的额外 文件是源映射文件*.css.map。

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

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

或者像下面这样通过 files 选项初始化 browsersync，并排除 sourcemaps files 的模式:['!**/*.maps.css']。

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

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

我希望这对遇到同样问题的人有所帮助!