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.BrowserSync CSS-Injektion + runSequence
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?
Sie erwähnen "In meinem Fall mag ich die Neustart-Aktion verwenden ..." Ich nehme an, Sie meinen "browserSync.reload" Aktion? – martisj