Плагин на Gulp который склеивает все svg файлы в css спрайт

[ТОТ_САМЫЙ]

https://www.npmjs.com/package/gulp-svg-to-css

Оцените, скажите что думаете) попробуйте лайврелоад.

[Lemme]

ТОТ_САМЫЙ, не пробовал, но почему ты не сделаешь генерацию файла для препроцессоров?

svg/
- file.svg
- file1.svg

генерировалось бы в файл с миксинами и файл с переменными.

А потом бы использовалось так:

на примере stylus
file - имя переменной, которая соответствует имени файла.

.myclass
     svgtocss(file)

из этого выходил бы такой css

.myclass {
     width: /* image width */
     height: /* image height */
     background-image: /* image data */
}

[ТОТ_САМЫЙ]

но почему ты не сделаешь генерацию файла для препроцессоров

Для этого придумано свойство template) но раз не очевидно добавил в ридми, глядь еще раз.

.pipe(cssToSvg({
    name: 'svg-vars.styl',
    template: 'svg-{{filename}} = "{{daraurl}}"'
}))

К тому же, то что svg будет дублироваться несколько раз это конечно не страшно, так как оно сожмется gzip на отлично, но хз хз, мне почему-то кажется это плохой практикой, ну незнаю, щас попробую. А еще неплохо бы придумать способ как то ВЛИЯТЬ на svg используя препроцессоры, то есть раскрашивать там или что-то в этом роде.

[ТОТ_САМЫЙ]

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

Короче прблема в том что если в стайлесе мы потом напишем

.ololo
	background-image url(svg-remove)
	background-color blue

.trololo
	background-image url(svg-remove)

.fdd
	background-image url(svg-remove)

.jfg
	background-image url(svg-remove)

то он 4 раза дублирует svg код а нам этого не хочется. такой css файл конечно хорошо сожмется гзипом, но все ровно будет тратиться больше времени на парсинг, а это не приятино), по этому файл который выплевывает stylus можно програть через плагин gulp-cssmin который сгруппирует данную конструкцию в

.fdd, .gfdgdf, .gfdgdff, .jfg, .ololo, .oooo, .trololo {
	background-image: url(data...)
}

.ololo {
	background-color: blue
}

красота ^__^
то есть теперь мы используем совершенно прозрачно данные спрайты будто бы это ссылки на svg картинки, красава)

вообще эту тему можно развить, он будет брать все картинки и смотреть, если меньше 5 килобайт то инлайнить её, если больше то не инлайнить а файлом сохранять, будет смотреть svg меньше в png весит или в svg, а тебе выдавать просто переменные в стайлус. а что в них будет желать, ссылка на реальный файл или dataurl тебя волновать не будет совершенно, плагин все возьмет на себя)))))))))))

щас запилю, отличная идея!!!!!

То есть мы будем писать типа

.ololo 
  background-image url(filename-png)

.trololo
  background-image url(filename2-svg)

а он уже сам будет туда либо ссылку вставлять либо инлайн версию)) а cssmin все потом сожмет чтобы не дублировалось )!!! гениально!!

[ТОТ_САМЫЙ]

назову новый плагин gulp-image-master вот так короче он будет использоваться:




И будет короче свойство template которое по умолчанию настроено на переменные стайлеса, но можно будет перенастроить для чего угодно, ну или будет свойство preprocessor: '' и тут 3-4 варианта со своими темплейтами)

Пикчи будут некоторые отправляться в аутпат сжиматься при этом как надо, а некоторые инлайнится и добавляться в качестве переменных в препроцессор ^__^

[nerv_]

Как можно всерьез разговаривать с этим человеком, когда он на кофе-скрипте пишет?

[ТОТ_САМЫЙ]

nerv_, в действительности же ты не критически мыслишь а шаблонно, es6 во всем хуже кофескрипта, подобно тому как css новый во всем хуже стайлуса. из за обратной совместимости эти языки безнадежно отстают. хочтся тебе того или нет. более того я думаю форкнуть кофе и запилить поддержку фитч es6 и 7 если этого еще до сих пор не сделали. Иными словами чтобы кофи не был ограничен es5. И давай не оффтопить тут, тут обсуждаем мой плагин, а скоро я выгружу новый плагин) завтра скорее всего) котоырй автоматически решает заинлайнить картинку или нет а заодно оптимизирует её сжимает и все дела, а ты в препроцессоре только перременные использушь в которых окажутся либо ссылки либо dataurl на усмотрение плагина $)

[ТОТ_САМЫЙ]

Вот, если что https://github.com/Maxmaxmaximus/gulp-image-master

[Lemme]

ТОТ_САМЫЙ, так приятно смотреть и понимать, что wepack умеет и инлайнить (размер, который ему укажешь), если не проходит, то подключать файл =).

Черпани идей от https://github.com/webpack/url-loader

[FINoM]

ТОТ_САМЫЙ, ты доку сначала напиши, а потом хвастайся.