BrowserSync неправильно вводит стили
У меня есть глоток, который я написал, который работал отлично. Однажды я вошел, и он перестал работать, хотя я не изменил gulpfile.
У меня есть задача BrowserSync, которая внедряет стили в браузер, задача sass, которая компилирует все файлы sass, и задача наблюдения, которая запускает задачу sass всякий раз, когда какие-либо файлы sass модифицируются.
Проблема, которая сейчас возникает, заключается в том, что когда я сохраняю любой из моих файлов sass, они компилируются и внедряются в браузер, но кажется, что что-то вызывает проблемы со временем внедрения, потому что страница будет загружаться полностью без стиля, наполовину -стиль с не полностью загруженным CSS или полностью нормальным, когда все работает, все с произвольными интервалами. Я могу сэкономить 10 раз за 5 секунд и получать один и тот же результат каждый раз или совершенно разные результаты наугад, что заставляет меня поверить, что что-то не так с выбором времени инъекции.
Если я осматриваю страницу, я вижу ссылку на файл CSS в заголовке и могу открыть эту ссылку в новой вкладке и увидеть весь файл CSS полностью без каких-либо проблем с этим файлом CSS или его содержимым.
Задача BrowserSync:
gulp.task('sync', function() {
browserSync.init({
open: true,
proxy: {
target: 'pariveda.local/'
}
});
});
Sass задача:
gulp.task('sass', function () {
return gulp.src('./assets/sass/main.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError)) // .on('error', sass.logError) prevents gulp from crashing when saving a typo or syntax error
.pipe(sourcemaps.write())
.pipe(gulp.dest('./assets/sass'))
.pipe(gulp.dest(localSettings.publishFolder + '/assets/sass/'))
.pipe(browserSync.stream()); // causes injection of styles on save
});
Смотреть задание:
gulp.task('watch', function() {
gulp.watch('./assets/sass/**/*.scss', ['sass']);
gulp.watch(['./static/src/**/*.html', '!partials', '!components'], ['compileHTML']);
gulp.watch('./assets/js/**/*.js', ['javascript']);
gulp.watch(['./assets/vendors/js/*.js', '!./assets/vendors/js/vendors.min.js'], ['vendors']);
gulp.watch('./Views/Renderings/**/*.cshtml', ['publishCshtml']);
});
Задание по умолчанию:
gulp.task('default', ['sync', 'publishCshtml', 'vendors', 'javascript', 'sass', 'watch']);
И вот вывод из моей задачи по умолчанию:
$ gulp
[17:39:44] Using gulpfile ~\Documents\Sites\PVD\Pariveda.Web\gulpfile.js
[17:39:45] Starting 'sync'...
[17:39:45] Finished 'sync' after 17 ms
[17:39:45] Starting 'publishCshtml'...
[17:39:45] Starting 'vendors'...
[17:39:45] Starting 'javascript'...
[17:39:45] Starting 'sass'...
[17:39:45] Starting 'watch'...
[17:39:45] Finished 'watch' after 78 ms
[Browsersync] 1 file changed (main.css)
[17:39:49] Finished 'sass' after 4.87 s
[17:39:49] Finished 'vendors' after 4.89 s
[Browsersync] Proxying: http://pariveda.local
[Browsersync] Access URLs:
---------------------------------------
Local: http://localhost:3000
External: http://192.168.14.137:3000
---------------------------------------
UI: http://localhost:3001
UI External: http://192.168.14.137:3001
---------------------------------------
[Browsersync] Reloading Browsers...
[Browsersync] 1 file changed (bundle.js)
[17:39:51] Finished 'javascript' after 6.49 s
Что-то не так с моими задачами, заставляющими страницу перезагрузиться до того, как задача sass была успешно запущена?