0

何かが欠けているようです-このプロジェクトでcssインジェクションを機能させようとしています。

サーバープロキシは機能します ファイルウォッチャーも インジェクションは機能しますが、ページは常に0.5秒後にリロードされます...

Mac osx 10.11.6 (15G1108) ノード v4.1.1 の Im

ここに私のgulpfileがあります：

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var sass = require('gulp-sass');

var plumber = require('gulp-plumber');
var notify = require("gulp-notify");

var src = {
scss: 'assets/scss/**',
css: 'assets/css/',
html: 'app/*.html'
};

gulp.task('serve', ['sass'], function() {

browserSync.init({
    proxy: "intouch.local",
    open: false,
    reloadOnRestart: false,
    injectChanges: true,
});

gulp.watch(src.scss, ['sass']);
});

gulp.task('sass', function() {

var onError = function(err) {
        notify.onError({
                    title:    "Gulp",
                    subtitle: "Failure!",
                    message:  "Error: <%= error.message %>",
                    sound:    "Beep"
                })(err);

        this.emit('end');
    };


return gulp.src(src.scss)
    .pipe(plumber({errorHandler: onError}))
    .pipe(sass())
    .pipe(gulp.dest(src.css))
    // NOTE: i've tried with all of these lines, all do the same...
    // .pipe(reload({stream: true}))
    // .pipe(browserSync.stream())
    .pipe(browserSync.reload({
          stream: true
        }))
    .pipe(notify({
       title: 'Gulp',
       subtitle: 'success',
       message: 'Sass task',
       sound: "Pop"
    }));
});

gulp.task('default', ['serve']);
4

1 に答える 1

2

コンパイルする sass ファイルの glob を調整して、一致する.scss(または.sass) ファイルのみにします。

たとえば、コード例では に変更assets/scss/**しassets/scss/**/*.scssます。

広範なグロブは予期しないファイル (通常はソース マップ) がパイプラインに渡される可能性があり、ストリーミングできない変更されたファイルに遭遇したときの Browsersync のデフォルトの動作はページの再読み込みであるため、CSS のインジェクションが成功し、次におそらく予期していなかった/気にしないいくつかのファイルのハードリロード。

于 2016-12-14T11:33:27.027 に答える