Задать вопрос
mQm
@mQm
https://medium.com/@gearmobile
css

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

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Senior Frontend (JavaScript) разработчик
Vital Partners LLC
от 350 000 до 420 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Написание отзывов
02 февр. 2025, в 11:35
3000 руб./за проект
Написание отзыва Цена:(подробнее в чате)
02 февр. 2025, в 11:29
1000 руб./за проект
Тайный покупатель
02 февр. 2025, в 10:45
1000 руб./за проект
Ещё заказы