Синхронизация браузера для Angular SPA

Question

Я использую браузерную синхронизацию с Angular SPA. Обслуживание сайта выглядит так:

gulp.task('serve', function() { 
    browserSync.init(null, { 
    server: { 
     baseDir: './', 
     middleware: [historyApiFallback()] 
    } 
    }); 
}); 

Это прекрасно работает. Использование historyApiFallback (модуль npm) означает, что синхронизация браузера не волнуется при переходе на новый URL-адрес, когда все, что ему нужно сделать, - это продолжать обслуживать index.html.

Проблема у меня есть с просмотром файлов. Я попытался это:

gulp.task('watch', function() { 
    watch('./src/scss/**/*.scss', function() { 
    runSequence('build-css', browserSync.reload); 
    }); 
}); 

Задача часы делает работу, потому что build-css задача вызывает штраф. Затем консоль регистрирует Reloading Browsers... и просто зависает. Браузер никогда не получает инъекцию или перезагрузку CSS. Что я здесь делаю неправильно?

Обратите внимание, что я использую gulp-watch, а не традиционные часы с глотком.

Answer 1

Я рекомендую вам использовать lite-server. Это простая настраиваемая оболочка вокруг BrowserSync, которая упрощает обслуживание SPA (вам даже не нужно настраивать историю api).

Вы можете использовать его, просто добавив запись в объект scripts в свой package.json и нажав следующую команду: npm run dev.

"scripts": { "dev": "lite-server" },

модуль будет автоматически следить за изменениями файлов и сохранить затем синхронизировать. Таким образом, он будет работать с вашим глотком, потому что он обновит ваш браузер после выполнения задачи build-css (потому что выходные файлы будут меняться).

В настоящее время я использую его с угловыми 1, угловыми 2 и vue.js и отлично работал со всеми.