@VVS10

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

Всем привет друзья!
Я установил 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'));
}
  • Вопрос задан
  • 766 просмотров
Пригласить эксперта
Ответы на вопрос 1
@vladdimir
Верстальщик
Мне тоже не совсем понятно, что вы делаете, что должно происходить и как это работать должно?
Я установил 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);
};

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы