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

Question

[Moe Green]

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

Есть маленький вопрос, которому я не могу "дать ума". Организовал задачу преобразования 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-файлы из указанной директории?

Answer 1

[Александр Зачиналов]

Не городите слишком сложных задач, это системе выполнять не легче. чем вам потом поддерживать. Советую пойти путем, многими уже принятым: 1) создаете задачу по перегону styl в css с выходом одного файла в каталог build 2) создаете задачу с конкатинацией всех сторонних css тоже в каталог build 3) на третью задачу вешаете конкатинацию всех css из каталога build и делаете с ними уже все операции, минификация, автопрефиксы и тд. Для того чтобы первые две задачи выполнялись до выполнения третьей, третью задачу можно описать как

gulp.task('task3', ['task1', 'task2'], function() {
  // Код третьей задачи
});

Comments

[Сергей Протько]

плохой вариант, теряются преимущества gulp. Если вам нужен один файл на выходе - то скорее всего вам нужен один таск. merge-stream и т.д. решают все проблемы.

[Moe Green]

Сергей Протько: мне тоже так кажется. ведь главная фича Gulp'а - в его pipe'ах.

[Александр Зачиналов]

и то и то правильно, никаких преимуществ Gulp не теряется, не драматизируйте)) Во-первых это нативный способ, во-вторых вы делите задачи по типам исходников и можете использовать в связках типа: task1+task2=task3, task2+task4=task5, что особо актуально, если собираются несколько разных версий приложения, отсутствует необходимость в добавлении новых зависимых плагинов. Тем мне runner'ы и нравятся, что гнутся как хочешь, и одну задачу можно несколькими способами решить, кому как потребно.

[Александр Зачиналов]

Тут уже скорее вопрос вкуса, нежели правильности. Мне никогда не хотелось добавлять что-то еще в систему, если она может справиться и сама, к тому же Gulp обновляют, внедряя функционал, который раньше можно было получить только с доп.плагинами, например, плагин gulp-duration для показа время выполнения задач был включен в дистрибутив 2.4 еще, но до сих пор встречаю его у некоторых в конфигах и на последних версиях.

[sim3x]

Александр Зачиналов: а как поступить с map-файлами

[Александр Зачиналов]

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

[Александр Зачиналов]

кстати, у вас весьма насыщенный блог, кланяюсь за труды)

[Moe Green]

Александр Зачиналов: спасибо )

[Moe Green]

Александр Зачиналов: если бы эти труды оценила хорошая фирма и предложила работу у себя - было бы вообще замечательно! )

[Senseich]

Александр Зачиналов, привет, подниму старую тему ... почитал переписку, вижу ты хорошо разбираешься, а я только вникаю в Gulp ) Вот мне как новичку, не понятно, что значит

конкатинацию всех css

? Я так понял, за это отвечает gulp-concat ... разве можно все файлы стилей смешивать в один? а как быть с последовательностью, каскадностью ... не получиться так что все стили поломаются? Или это очень умный плагин ) Что то у меня это в голове не укладывается, как он так работает.

[sim3x]

Senseich, когда у вас все стили по БЕМ, то не поломаются

Плагин не умный

[Senseich]

sim3x, я думаю не все по БЭМ делают ... а в этом плагине можно задавать последовательность файлов, такую же как в индекс файле? не совсем понимаю, как он это делает, рандомно выбирает или по алфавиту в каталоге? )

[sim3x]

Senseich,
Тем кто делает сайт на выброс не нужен гульп и оптимизации и правда не нужен БЕМ

Еще раз - вам нужно писать стили так, что они будут перетасованы потом оптимизатором

Answer 2

[Сергей Протько]

Я использую less и потому просто импортирую css в main.less, sass/stylus такого не умеет, потому там норм вариант делать сначала сборку sass/stylus -> css а потом при помощи merge-stream добавлять туда стрим с css внешними (я забираю через main-bower-files) и прогнать все через конкат. Никаких временных файлов, все в памяти и удобно поддерживать. Собственно на проектах с ionic я так обычно и делаю.

Comments

[Moe Green]

сколько интересных вещей вы тут написали, однако )) merge-stream, main-bower-files, ionic. прикольно ))

[Сергей Протько]

Valery Semenencko: ionic не так прикольно, а вот merge-streap и lazy-pipe еще на заметку возьмите, неплохо позволяют почистить gulpfile. Еще хорошая практика - разделить gulpfile на несколько файлов и держать все в одной папочке.

[Moe Green]

Сергей Протько: а можно хотя бы в двух словах поподробнее, как это - "... разделить gulpfile на несколько файлов и держать все в одной папочке. "? я что-то не представляю себе, как это?

[Moe Green]

Сергей Протько: merge-streap - такого нет модуля (take.ms/8J5g4); может быть - merge-stream? и lazy-pipe - точнее будет lazypipe? )

[Сергей Протько]

Valery Semenencko: ну да, опечатался, торопился.

Что до разделения - ну как бы... commonjs и все такое, выносите таски в модули, подключаете все вместе в gulpfile. В модули выносите по назначению. Так проще поддерживать все это дело.

[Александр Зачиналов]

Stylus не умеет импортировать css? я дальше даже не стал читать

[Александр Зачиналов]

Valery Semenencko: разделением задач в подкаталоги и разные фалы помогают gulp-hub, require-dir и load-plugins. Gulp-hub или аналогичный функционал внедрят в сборку Gulp в 4.0 версии

[Сергей Протько]

Александр Зачиналов: ну на счет стайлуса хз, не использовал его толком. А вот sass не умеет, вот такая забавная штука. Ему почему-то хочется видеть все подключаемое только с расширением scss/sass. А вот если захочется подключить css то оно не будет его инлайнить и все такое.

[Moe Green]

Александр Зачиналов: и то верно - к стыду свему могу сказать, что еще плохо stylus знаю, оказывается.

[Moe Green]

Александр Зачиналов: а когда планируется выход v4.0?

[Moe Green]

Сергей Протько: умеет, только через небольшой костыль - zencoder.ru/css/sass-css-importer

[Александр Зачиналов]

Сергей Протько: да )) с scss тоже накололся уже разок. Valery Semenencko: по их динамике, то не очень скоро, возможно месяца через три. Пока информации о дате не проскакивала нигде. Судя по задачам Гита, работа идет больше по проектированию, реализация пока только начальная. Подробнее об основных правках в 4 версии тут https://github.com/gulpjs/gulp/blob/4.0/CHANGELOG.... а я как-то через Twitter слежу))

[Сергей Протько]

Valery Semenencko: можно еще через postcss инлайнить внешние стили в теории.

[Moe Green]

Сергей Протько: вот! снова postcss ... если честно, я пока не могу въехать в него. читал одну статью, но ужаснул только синтаксис postcss. других преимуществ не увидел. смотрел презентацию Ситника - тоже ничего. Я неправ?

[Сергей Протько]

Valery Semenencko: профит в модульности. это пост процессор, который из коробки ничего не умеет. Он дает вам возможность делать свои преобразования над AST и все такое прочее, все плюшки уже идут в отдельных модулях. Ну и как побочный эффект - работает он быстрее libsass написанного на плюсах, а возможности его не сказать что бы сильно ограничены.

Вообще вполне возможно реализовать все что дает sass или stylus только на postcss и все еще иметь возможность расширять своими плюшками. Вы же используете autoprefixer?

https://www.youtube.com/watch?v=73dl5dk9z4Q - тут более подробно рассказывается обо всем этом.

[Moe Green]

Сергей Протько: красиво звучит. надо еще раз "проехаться" по postcss, чуть погодя ))

Answer 3

[Константин Величко]

Просто укажите опцию для stylus
'include css': true
И подключайте свои css в stylus файлах с помощью import

Comments

[katerina321]

объясните подробнее, в файл стилус нужно прописать файл css, в который будет код компилироваться?

[Moe Green]

katerina321: да, в файле stylus нужно подключить файл css так - import 'my-awesome-css-file.css'

[Сергей Громов]

.pipe(stylus({
'include css': true
}))