mQm
@mQm
https://medium.com/@gearmobile

Gulp — gulp-stylus + gulp-concat = любовь?

Доброго времени суток всем!

Есть маленький вопрос, которому я не могу "дать ума". Организовал задачу преобразования stylus -> css:

// STYLUS TASK
gulp.task('stylustask', function() {
	return gulp.src('app/stylus/*.styl')
		.pipe(plumber())
		.pipe(stylus({use:[nib(),jeet(),rupture()]}))
		.pipe(prefixer({
			browsers: ['last 2 versions']
		}))
		.pipe(csscomb())
		.pipe(notify("Stylus ready!"))
		.pipe(gulp.dest('build/css/'));
});


Все работает. Но хочется еще больше "украсить" процесс маленькой подзадачей.

Часто при подключении всяких слайдеров\каруселей (slick, owl caroussel) идут сопутствующие им CSS-таблицы, необходимые для корректной работы этих слайдеров\каруселей.

CSS-таблицы уже готовые - только подключить их остается. Сейчас мой процесс в этом плане выглялит неряшливо. В head отдельными файлами подлючаются CSS-таблицы для fontawesome, owl caroussel; в конце подключается скомпилированная основная CSS-таблица:

...
  link(rel="stylesheet" href="css/font-awesome.css")
  link(rel="stylesheet", href="css/owl.carousel.css")
  link(rel="stylesheet", href="css/slick.css")
  link(rel="stylesheet", href="css/slick-theme.css")
  link(rel="stylesheet" href="css/style.css")
  link(rel="shortcut icon", type="image/x-icon", href="favicon.ico")


Я бы хотел "вклинить" в показанную выше gulp-stylus задачу еще одну - gulp-concat. Таким образом - gulp-concat "подхватывает" скомпилированный задачей gulp-stylus (после .pipe(stylus({use:[nib(),jeet(),rupture()]}))) основной CSS-файл. Затем "подбирает" из сторонней директории (скажем - resources) готовые CSS-таблицы для fontawesome, owl caroussel, slick и так далее. Все это дело объединяет в один общий CSS-файл. Далее - prefixer, csscomb и другие прелести.

В итоге - один CSS-файл в head вместо теперешней "вязанки". Как "сказать" gulp-concat, чтобы он "по пути" подбирал еще CSS-файлы из указанной директории?
  • Вопрос задан
  • 1633 просмотра
Решения вопроса 1
Не городите слишком сложных задач, это системе выполнять не легче. чем вам потом поддерживать. Советую пойти путем, многими уже принятым: 1) создаете задачу по перегону styl в css с выходом одного файла в каталог build 2) создаете задачу с конкатинацией всех сторонних css тоже в каталог build 3) на третью задачу вешаете конкатинацию всех css из каталога build и делаете с ними уже все операции, минификация, автопрефиксы и тд. Для того чтобы первые две задачи выполнялись до выполнения третьей, третью задачу можно описать как
gulp.task('task3', ['task1', 'task2'], function() {
  // Код третьей задачи
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
Я использую less и потому просто импортирую css в main.less, sass/stylus такого не умеет, потому там норм вариант делать сначала сборку sass/stylus -> css а потом при помощи merge-stream добавлять туда стрим с css внешними (я забираю через main-bower-files) и прогнать все через конкат. Никаких временных файлов, все в памяти и удобно поддерживать. Собственно на проектах с ionic я так обычно и делаю.
Ответ написан
Zoxon
@Zoxon
Веб-разработчик
Просто укажите опцию для stylus
'include css': true
И подключайте свои css в stylus файлах с помощью import
Ответ написан
Ваш ответ на вопрос

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

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