Gulp v.4 CSS Inject с использованием BrowserSync не работает

У меня есть настройки локального сервера с использованием Valet +. У меня есть gulp v.4 setup с gulpfile.js (см. Ниже), и я пытаюсь выполнить функцию наблюдения, которая создает инъекцию css в качестве задачи по умолчанию. Задача sass compiling работает, когда задача watch вызывает изменение в файлах scss, но браузер не вводит css, пока я не перезагружу браузер вручную. Я не уверен, что это проблема с valet +, моей настройкой gulpfile или браузером. Пожалуйста помоги.

Я пробовал несколько разных форматов gulpfile для gulp v.4. Я пробовал другой браузер. Я попробовал функцию инициализации browsersync глобально и локально внутри задачи наблюдения, и ничего не работает.

"use strict";

// ------------------------------------------------- load plugins
const gulp         = require('gulp'),
// svgSprite     = require('gulp-svg-sprite'),
// imagemin      = require('gulp-imagemin'),
rename       = require('gulp-rename'),
uglify       = require('gulp-uglify'),
autoprefixer = require('autoprefixer'),
browserSync  = require('browser-sync').create(),
sourcemaps   = require('gulp-sourcemaps'),
cssnano      = require('cssnano'),
del          = require('del'),
plumber      = require('gulp-plumber'),
postcss      = require('gulp-postcss'),
sass         = require('gulp-sass');

// ------------------------------------------------- vars for site and browserSync
const siteName = 'gatesinsurance-wp',
userName = 'evanmarshall';

// ------------------------------------------------- configs
const paths = {
svg: {
src: './src/images/icons/',
dest: './build/assets/images/sprites/',
glob: '**/*.svg',
config: {
"log": "debug",
"shape": {
"dimensions": {
"maxWidth": 200,
"maxHeight": 200
},
},
"mode": {
"css": {
render: {
scss: {
dest: "/src/styles/modules/_sprite.scss",
template: "./gulpfile.js/templates/sprite.scss"}
}
},
},
"variables": {}
}
},
styles: {
src: './src/styles/**/*.scss',
dest: './build/themes/gatesinsurance/assets/styles',
opts: {

}
},
images: {
src: './src/images/**/*',
dest: './build/themes/gatesinsurance/assets/images',
opts: {

}
},
scripts: {
src: './src/scripts/**/*.js',
dest: './build/themes/gatesinsurance/assets/scripts',
opts: {

}
},
assets: './build/themes/gatesinsurance/assets',
php: './build/themes/gatesinsurance/**/*.php'
};

// ------------------------------------------------- clean fxn
function clean() {
return del(paths.assets)
}

// ------------------------------------------------- scripts fxn
function scripts() {
// body omitted
}

// ------------------------------------------------- styles fxn
function styles() {
return gulp
.src(paths.styles.src)
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded'
}))
.on("error", sass.logError)
.pipe(gulp.dest(paths.styles.dest))
.pipe(rename({
suffix: '.min'
}))
.pipe(postcss([
autoprefixer(), cssnano()
]))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.styles.dest))
// .pipe(browserSync.stream());
}

// ------------------------------------------------- browserSync reload fxn
function reload(done) {
browserSync.reload();
done();
}

// ------------------------------------------------- browserSync fxn
function serve(done) {
browserSync.init({
proxy: 'http://' + siteName + '.test',
host: siteName + '.test',
open: 'external',
port: 8000,
http: {
key:
'/Users/' +
userName +
'/.valet/Certificates/' +
siteName +
'.test.key',
cert:
'/Users/' +
userName +
'/.valet/Certificates/' +
siteName +
'.test.crt'
}
});
done();
}

// ------------------------------------------------- watch fxn
function watchFiles() {
gulp.watch(paths.styles.src, {events: 'change'}, styles);
gulp.watch(paths.php, {events: 'change'}, reload);
// gulp.watch(paths.scripts.src, {events: 'change'}, gulp.series(scripts, reload));
}

// ------------------------------------------------- define complex fxn
const build = gulp.series(clean, styles),
watch = gulp.parallel(watchFiles, serve);

// ------------------------------------------------- export fxn
exports.styles  = styles;
exports.scripts = scripts;
exports.clean   = clean;
exports.build   = build;
exports.watch   = watch;
exports.default = build;

1

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]