Мне тоже не совсем понятно, что вы делаете, что должно происходить и как это работать должно?
Я установил Gulp 4 подключил sass и все работает, но только когда я перезапускаю gulp через терминал, до этого момента не браузер не файл css не обновляется, сижу целый день, не могу понять в чем проблема.
В общем не могу я понять вашу проблему. Вот в тексте сказано, что при каких-то условиях сборка работает, а при других нет. Какие условия не ясно. Быстрее всего искать проблемы, сравнивая отличия. Почему работает в одних условия, что изменяется в других условиях запуска, что перестает работать.
По самому файлу, ну слежение у вас настроено странновато
gulp.task('watch', function() {
gulp.watch('catalog/view/theme/apple/stylesheet/stylesheet.sass', gulp.parallel('sass'));
Тут вроде норм, отслеживаете изменения в файле, запускаете задачу на сборку. Только вот вы отслеживаете только основной файл. Это значит, что блоки, которые вы подключаете в него, наблюдатель просмотрит только один раз, сразу после подключения директивой import, после этого все изменения в подключаемых в файле импортах наблюдатель не заменит и основной файл не пересоберет. Нужно указать путь к файлам, которые нужно отслеживать: 'catalog/view/theme/apple/stylesheet/**/*.sass', например. Хотя если у вас весь код в одном файле, без использования import, то и так норм.
Далее по сборщику
gulp.task('watch', function() {
gulp.watch('catalog/view/theme/apple/template/**/*.twig', browserSync.reload);
gulp.watch('catalog/view/theme/apple/js/**/*.js', browserSync.reload);
gulp.watch('catalog/view/theme/apple/libs/**/*', browserSync.reload);
Этими правилами вы говорите Галпу: «Смотри за всеми этими файлами, а если они изменятся, перезагрузи страницу и все». То есть, никакой сборки не происходит, просто перезагрузка. Хотя если так и надо или где-то в другом месте что-то делается, то значит так и надо, наверное.
Еще заметил что у вас две задачи с одинаковым именем 'sass'. Стало интересно, что делает Галп в таких случаях: ругается или переопределяет задачу?
Больше каких либо проблем беглым взглядом не вижу, непривычно такую сборку смотреть, очень хаотично на мой взгляд. Например, browserSync я организую в одной задаче и не приходится добавлять reload в другие задачи:
const watcher = () => {
watch(options.scripts.src, scripts);
watch(options.html.watch, html);
watch(options.styles.watch, styles);
watch(options.copy.src, copy);
};
const server = () => {
browserSync.init({
server: {
baseDir: output,
},
});
browserSync.watch(`${output}/**/*.*`).on('change', browserSync.reload);
};
В итоге получается так, что если какая-то задача не работает, проблема всегда в этой задаче и по другому быть не может.