azovl
@azovl

Как скомпилировать множество файлов *.scss в GULP?

Подскажите как скомпилировать множество файлов scss в свои поддиректории в Gulp?
Есть вот такой конфигурационный файл:
'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('first-scss-custom', function () {
	return gulp.src('./styles/a/first/*.scss')
		// .pipe(sass.sync().on('error', sass.logError))
		.pipe(sass())
		.pipe(gulp.dest('./styles/a/first/'));
});

gulp.task('second-scss-custom', function () {
	return gulp.src('./styles/a/second/*.scss')
		// .pipe(sass.sync().on('error', sass.logError))
		.pipe(sass())
		.pipe(gulp.dest('./styles/a/second/'));
});

gulp.task('third-scss-custom', function () {
	return gulp.src('./styles/a/third/*.scss')
		// .pipe(sass.sync().on('error', sass.logError))
		.pipe(sass())
		.pipe(gulp.dest('./styles/a/third/'));
});

gulp.task('watch', function() {
	gulp.watch('./styles/a/first/custom.scss',
				'./styles/a/second/custom.scss',
				'./styles/a/third/custom.scss',gulp.parallel('first-scss-custom', 'second-scss-custom', 'third-scss-custom'));
});


Выходит множество ошибок, в том числе:
TypeError: undefined is not a function at Gulp. (C:\...\gulpfile.js:30:41)
30 строка - "'./styles/a/third/custom.scss',gulp.parallel('first-scss-custom', 'second-scss-custom', 'third-scss-custom'));"
  • Вопрос задан
  • 366 просмотров
Пригласить эксперта
Ответы на вопрос 1
@abberati
frontend-разработчик
в ошибке сказано, что функция gulp.parallel() не определена. проверь, какую версию gulp ты используешь, эта штука есть только в gulp@4, который пока на стадии alpha.

а вообще - очень странное решение, следить за _всеми_ папками и при каждом изменении запускать параллельную сборку _всех_ папок. создай по watch'у на каждую папку, каждый из которых будет следить за папкой и компилить её.

UPD: watch должен следить не за отдельным файлом custom.scss, а за всеми файлами в папке

gulp.task('watch', function() {
  gulp.watch('./styles/a/first/**/*.scss', ['first-scss-custom']);
  gulp.watch('./styles/a/second/**/*scss', ['second-scss-custom']);
  gulp.watch('./styles/a/third/**/*.scss', ['third-scss-custom']);
});
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы