BrowserSync CSS-Injektion + runSequence

Question

Ich habe ein Schluck-Projekt, das bestimmte Aufgaben in einer bestimmten Reihenfolge ausführt. Ich versuche, browserSync zu verwenden, um CSS-Stile zu injizieren, wenn die Quellen geändert und dann kompiliert werden, genau wie meine HTML-Dateien. Ich habe verschiedene Methoden ausprobiert, um browserSync zu veranlassen, meine Änderungen zu aktualisieren, wie browserSync.reload in meinen Aufgaben anzuhängen, und .on('change', reload) dem Ende der Akten hinzuzufügen, die ich in meiner watch Aufgabe sehen möchte.

Meine Uhr Aufgabe:

import gulp  from 'gulp'; 
import config  from '../config'; 
import browserSync from 'browser-sync'; 

gulp.task('watch',() => { 

    const reload = browserSync.reload; 

    gulp.watch(config.src.styles, ['styles']).on('change', reload); 
    gulp.watch(config.src.js, ['browserify']).on('change', reload); 
    gulp.watch(config.src.views, ['pug']).on('change', reload); 

}); 

Styles Aufgabe:

import gulp   from 'gulp'; 
import sass   from 'gulp-sass'; 
import gulpif  from 'gulp-if'; 
import sourcemaps from 'gulp-sourcemaps'; 
import browserSync from 'browser-sync'; 
import autoprefixer from 'gulp-autoprefixer'; 
import handleErrors from '../util/handle-errors'; 
import config  from '../config'; 

// SASS -> CSS 

gulp.task('styles',() => { 

    //const reload = browserSync.reload; 

    return gulp.src(config.src.styles) 
    .pipe(gulpif(!global.isProd, sourcemaps.init())) 
    .pipe(sass({ 
     sourceComments: global.isProd ? false : 'map', 
     outputStyle: global.isProd ? 'compressed' : 'nested' 
    })) 
    .on('error', handleErrors) 
    .pipe(autoprefixer('last 2 versions', '> 1%', 'ie 8')) 
    .pipe(gulpif(!global.isProd, sourcemaps.write('.'))) 
    .pipe(gulp.dest(config.dest.styles)) 
    .pipe(browserSync.stream()); // stream 
    //.pipe(gulpif(browserSync.active, browserSync.reload({ stream: true }))); 

}); 

Gibt es etwas, das ich weiter überprüfen oder das geändert werden muss?

Answer 1

Nicht sicher, ob Sie noch auf eine Antwort zu suchen, aber als Referenz:

Wenn Sie das browserSync.stream() Rohr und die on('change', reload) Uhr Funktion ausführen, könnte das sein, was das Problem verursacht. Wenn Sie Browsersync verwenden, möchten Sie das eine oder das andere für jede Aufgabe verwenden, da sie dasselbe tun; Einer ist in der Task inline, während der andere mit der Watch aufgerufen wird. In meinem Fall verwende ich gerne die Neustart Aktion auf der Uhr in der Array-Funktion wie unten gezeigt.

gulp.task('styles',() => { 
    return gulp.src(config.src.styles) 
    .pipe(gulpif(!global.isProd, sourcemaps.init())) 
    .pipe(sass({ 
    sourceComments: global.isProd ? false : 'map', 
    outputStyle: global.isProd ? 'compressed' : 'nested' 
    })) 
    .on('error', handleErrors) 
    .pipe(autoprefixer('last 2 versions', '> 1%', 'ie 8')) 
    .pipe(gulpif(!global.isProd, sourcemaps.write('.'))) 
    .pipe(gulp.dest(config.dest.styles)) 

});

gulp.task('watch',() => { 
    gulp.watch(config.src.styles, ['styles',browserSync.reload]); 
    gulp.watch(config.src.js, ['browserify', browserSync.reload]); 
    gulp.watch(config.src.views, ['pug', browserSync.reload]); 
});