CSS注入不兼容Gulp + Browsersync

Question

我是一个新人,我曾经和咕噜咕噜一起工作,现在我有一些麻烦.

其中最重要的是自动CSS注入,这不是woking,经过很长一段时间后我不知道为什么.谁能帮我？并且还给我一些关于我的配置的建议？提前致谢!

'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

Sourcemaps!

我花了太多时间调试的令人讨厌的事情之一是浏览器同步重新加载整个页面而不是注入CSS更改.

潜入浏览器同步文件后,我发现注入文件的默认列表设置为:

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

可能不太明显的是,如果任何其他未启用的文件injectFileTypes发生更改,浏览器将重新加载.在我的例子中,更改的额外文件是源图文件*.css.map.

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

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

或者通过将files模式排除到源地图的选项初始化浏览器同步,如下所示files: ['!**/*.maps.css'].

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

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

我希望这可以帮助有同样问题的人!