Sass не компилируется с css gulp4, в чем проблема?

Question

[VVS10]

Всем привет друзья!
Я установил Gulp 4 подключил sass и все работает, но только когда я перезапускаю gulp через терминал, до этого момента не браузер не файл css не обновляется, сижу целый день, не могу понять в чем проблема.

Не судите строго я новичок в этом)

вот мой gulpfile.js

var gulpversion    = '4'; // Gulp version: 3 or 4

// Подключаем Gulp и все необходимые библиотеки
var gulp           = require('gulp'),
		gutil          = require('gulp-util' ),
		sass           = require('gulp-sass'),
		browserSync    = require('browser-sync'),
		cleanCSS       = require('gulp-clean-css'),
		autoprefixer   = require('gulp-autoprefixer'),
		bourbon        = require('node-bourbon'),
		ftp            = require('vinyl-ftp');

// Обновление страниц сайта на локальном сервере
gulp.task('browser-sync', function() {
	browserSync.init({
		proxy: "http://localhost:8888/opencart3/",
		notify: false
	});
});

var gulp = require('gulp');
var sass = require('gulp-sass');
 
gulp.task('sass', function () {
return gulp.src('./sass/**/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
 
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});




// Компиляция stylesheet.css
gulp.task('sass', function() {
	return gulp.src('catalog/view/theme/apple/stylesheet/stylesheet.sass')
		.pipe(sass({
			includePaths: bourbon.includePaths
		}).on('error', sass.logError))
		.pipe(autoprefixer(['last 15 versions']))
		.pipe(cleanCSS())
		.pipe(gulp.dest('catalog/view/theme/apple/stylesheet/'))
		.pipe(browserSync.reload({stream: true}))
});

gulp.task('code', function() {
	return gulp.src(['catalog/view/theme/apple/template/**/*.twig', 'catalog/view/theme/apple/libs/**/*'])
	.pipe(browserSync.reload({ stream: true }))
});

// Выгрузка изменений на хостинг
gulp.task('deploy', function() {
	var conn = ftp.create({
		host:      'hostname.com',
		user:      'username',
		password:  'userpassword',
		parallel:  10,
		log: gutil.log
	});
	var globs = [
	'catalog/view/theme/apple/**'
	];
	return gulp.src(globs, {buffer: false})
	.pipe(conn.dest('/path/to/folder/on/server'));
});


if (gulpversion == 4) {
	gulp.task('watch', function() {
		gulp.watch('catalog/view/theme/apple/stylesheet/stylesheet.sass', gulp.parallel('sass'));
		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);
	});
	gulp.task('default', gulp.parallel('sass', 'browser-sync', 'watch'));
}

Comments

[Сергей delphinpro]

gulp.watch('./sass/**/*.scss', ['sass']);

Так это не работает в четверке.

[Сергей delphinpro]

gulp.watch('catalog/view/theme/apple/stylesheet/stylesheet.sass', gulp.parallel('sass'));

Здесь уже правильно, но следить нужно за всеми файлами.

[VVS10]

Сергей delphinpro, Следить за всеми файлами? можете подсказать какими?

[Сергей delphinpro]

**/*.scss

[Сергей delphinpro]

Смотрите внимательнее.
В первом случае вы следите за всеми файлами, но вызов таска неправильный.
Во втором случае вызов таска верный, но слежение только за одним файлом.

Вообще, почитали бы вы документацию. Она краткая, но по делу, и все написано, что требуется для использования галпа.
https://gulpjs.com/docs/en/api/watch

[VVS10]

Сергей delphinpro, Все равно не отражаются изменения в файле css.

Может тут ошибка?

Answer 1

[Владимир Солнцев]

Мне тоже не совсем понятно, что вы делаете, что должно происходить и как это работать должно?

Я установил 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);
};

В итоге получается так, что если какая-то задача не работает, проблема всегда в этой задаче и по другому быть не может.

Comments

[VVS10]

1. Я хочу скомпилировать файлы sass и css так что бы при изменении в файле sass они отражались в css, сейчас это происходит только когда я перезапускаю gulp sass в терминале.

2. Путь к файлам **/*.sass указал, но проблемы это не решило.

gulp.task('watch', function() {
		gulp.watch('catalog/view/theme/apple/stylesheet/**/*.sass', gulp.series('sass'));
		gulp.watch('catalog/view/theme/apple/template/**/*.twig', gulp.series('code'));
		gulp.watch('catalog/view/theme/apple/js/**/*.js', browserSync.reload);
		gulp.watch('catalog/view/theme/apple/libs/**/*', browserSync.reload);
	});
	gulp.task('default', gulp.parallel('sass', 'browser-sync', 'watch'));

3. import подключен к файлу stylesheet.sass


4. Первую задачу с sass я удалил, с ней тоже все работало, но только когда я презапускаю gulp, тогда он прописывает все в css, если вы про эту:

gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});

Мне нужно что бы у меня работало автообновление в файлах css и браузер обновлялся автоматически, сейчас это происходит только после перезапуска gulp.
Искал решение на разных форумах, и читал документацию, но пока еще не понимаю как ее решить.
Только начал изучать gulp) а по Galp 4 не так много инфы.

[Владимир Солнцев]

VVS10, Я тоже не вижу ошибки.
Хотя, может в самом запуске?

gulp.task('default', gulp.parallel('sass', 'browser-sync', 'watch'));

Не пробовали задачу sass вынести из параллельного запуска, а запускать перед bS и watch?
gulp.task('default', gulp.series('sass', gulp.parallel(''browser-sync', 'watch')));
Но в этом варианте Галп нас обругает за то, что browser-sync еще не запущен, ведь в задаче sass указана команда перезагрузить сервер.

Это все гадание пальцем в небо, а давайте вместе попробуем нужную задачу изменить так, чтобы заработало. Я начну, а вы протестируете, если будет работать, сможете адаптировать решение под свою сборку.

// ! Добавляем необходимые require

gulp.task('sass', function() {
  return gulp.src('catalog/view/theme/apple/stylesheet/stylesheet.sass')
    // Все то же, что и в вашем примере
    .pipe(gulp.dest('catalog/view/theme/apple/stylesheet/')); // Конец задачи
    // Релоад перенесем к серверу
});

// watch - следит за изменениями в sass файлах, когда что-то меняется компилирует в css
gulp.task('watch', function() {
    gulp.watch('catalog/view/theme/apple/stylesheet/**/*.sass', 'sass');  
       // Поскольку запускаем единственную задачу, параллельный запуск ничего не принесет.
  });

// browser-sync имеет собственный вотчер, чем мы и воспользуемся
// будем следить за изменением самого файла css
gulp.task('browser-sync', function() {
  browserSync.init({
    proxy: "http://localhost:8888/opencart3/",
    notify: false
  });
  browser-sync.watch(`catalog/view/theme/apple/stylesheet/stylesheet.css'`).on('change', browser-sync.reload);
});

// Сборка
gulp.task('default', gulp.series('sass',  gulp.parallel(''browser-sync', 'watch')));

Так цикл работы прозрачней:
gulp default -> Компилируются стили -> Инициируется локальный сервер и наблюдатель. Наблюдатель следит за sass файлами, его задача чтобы файл stylesheet.css всегда был свежим, запуская задачу sass по необходимости. Сервер следит за файлом stylesheet.css и перезагружает страницу, когда он изменяется. -> Пишите код, Вотчер замечает изменения и компилирует стили, Сервер перезагружается -> и так по кругу.

Попробуйте запустить в разных контекстах: с другими задачами и без них. Если будет работать, сможете поковырять это все, сравнить с прошлой реализаций и понять, почему раньше не работало, если будет желание