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 была успешно запущена?

0 ответов

Другие вопросы по тегам