CSS注入不适用于Gulp + Browsersync [英] CSS inject not working with Gulp + Browsersync

问题描述

我是新来的人，我曾经和咕unt打交道，现在我在用gulp时遇到了一些麻烦.

I'm new in gulp, I used to work with grunt, and I'm having some troubles with gulp now.

其中最重要的是自动CSS注入，它不能正常工作，经过很多时间，我不知道为什么.谁能帮我?还给我一些关于我的配置的建议吗?预先感谢！

The most important of them is the auto CSS inject, that isn't woking and after a lot of time I don't know why. Can anyone help me? And also give me some suggestions about my config? Thanks in advance!

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

推荐答案

源地图！

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

One of the annoying things that I spent too much time debugging is why browser-sync reloads the whole page instead of injecting CSS changes.

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

After diving into browser-sync files I found out that there default list for injecting files is set to:

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

可能不是很明显的事情是，如果未在injectFileTypes上的任何其他文件得到更改，浏览器将重新加载.在我的情况下，已更改的 extra 文件是源地图文件*.css.map.

The thing that might not be very apparent is that if any other file that is not on injectFileTypes gets changes the browser will reload. In my case the extra files that was changed were the sourcemap files *.css.map.

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

If you don't explicitly tell browsersync to ignore sourcemap files when changing or in the initial config the browser will always reload. There's two ways I believe to do this, one through the browsersync.stream method like the following:

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

或者通过files选项初始化浏览器同步，如下所示，但不包括源映射files: ['!**/*.maps.css']的模式.

Or on initializing browsersync like the following through the files option with excluding pattern to the sourcemaps files: ['!**/*.maps.css'].

我喜欢第一个，因为我使用的是nodenode作为代理的browsersync，所以我实际上并没有使用files参数并设置自己的gulp watch语句.

I like the first one since I am using browsersync with nodemon as a proxy so I don't really use the files argument and setup my own gulp watch statements.

另一种方法是初始化浏览器同步时更新injectFileTypes选项，但是，我不确定CSS源映射是否为 injectable .

One other way to do this is to update the injectFileTypes option when initializing browsersync, however, I am not sure if the CSS sourcemaps are injectable.

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

I hope this help someone having the same issue!

这篇关于CSS注入不适用于Gulp + Browsersync的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！