Как работать с картинками на gulp.js?

Question

[Николай Марченко]

Пилю свою версию стартового темплейта на Gulp/Jade/PostCSS — Gagarin.

Не знаю как лучше организовать работу с изображениями, удобное хранение и использование. Кейсы такие:
1. Макет с графикой в растре. Генерить спрайты? Генерить 2@-спрайты?
2. Макет с графикой в векторе. Сохраняю всё отдельными файлами в SVG через Иллюстратор. Нужно ли собирать их в SVG-спрайты? Как? Как использовать SVG(-спрайты) и при этом управлять цветом, например (изменить цвет иконки по ховеру)?
3. Макет с графикой частично в векторе, частично в растре.
4. Слышал рекомендацию сохранять всю графику (ну кроме фоток) как base64 в отдельной CSS. Нужно ли? Как потом с ней обращаться?

Буду рад любым рекомендациям, ссылкам, плагинам. Отдельное спасибо, если покажете свой сборщик, как вы обращаетесь с картинками.

Comments

[nonlux]

Обратил внимание на PostCSS. Какой профит по сравнению с sass less ?

[Николай Марченко]

nonlux: никакого сверхъстественного профита нет, просто другой подход.

Answer 1

[Ivan Data]

Попробую ответить.
1. Растр в спрайты. Под ретину можно 2@
2. Есть несколько способов хранить и использовать svg спрайты. SVG спрайт — это всего лишь файл где поиск по svg элементам происходит по id.

<symbol viewBox="0 0 21 21" id="add_icon">
    <title>add</title>
    <path d="M10.5 1C5.3 1 1 5.2 1 10.5S5.3 20 10.5 20s9.5-4.3 9.5-9.5S15.7 1 10.5 1zm0 1c4.7 0 8.5 3.8 8.5 8.5S15.2 19 10.5 19 2 15.2 2 10.5 5.8 2 10.5 2zM10 6v4H6v1h4v4h1v-4h4v-1h-4V6h-1z"/>
</symbol>

На странице используем тег 'use', где атрибут xlink:href — это ссылка на svg, у с указанием идентификатора, например:

<svg class="ico-svg">
  <use xlink:href="/ico/ico-set.svg#add_icon"></use>
</svg>

Для поддержки отсталых браузеров используем полифил https://github.com/jonathantneal/svg4everybody. Управляем цветом через свойство fill
3. Элементы интерфейса, такие, как иконки, лучше конечно в векторе хранить. Растр — сжимать.
4. Мелкие элементы в base64. habrahabr.ru/post/116538
Все это собирается, пакуется и т.д. сборщиками, все верно.
Для SVG у нас используется очень замороченая система, которая: собирает svg-файлы от дизайнеров, клеит из них спрайт, генерирует png спрайты в разных цветах и генерирует стили для них. А еще парсит превью всего этого на отдельной странице, для теста.
Мы используем gulp и плагины для этого:
https://www.npmjs.com/package/gulp-optipng
https://www.npmjs.com/package/gulp-raster
https://www.npmjs.com/package/gulp.spritesmith
https://www.npmjs.com/package/gulp-svg-sprite-plus
https://www.npmjs.com/package/gulp-imagemin

Еще один способ от Владимира Кузнецова. У него все проще, потому что задач таких, как у нас не стояло.

Comments

[Николай Марченко]

Большое спасибо за ответ, но хочется прояснить несколько непонятных моментов.
2. На странице для каждой иконки используете такое объявление?

Как потом стили для ховера выглядят? Так?
.ico-svg:hover {
fill: #000;
}

4. А для чего png-спрайты в разных цветах? Можете показать эту крутую задачу? Очень любопытно :)

[Дмитрий Сергеевич]

Мощно, конечно.

[Ivan Data]

Николай Марченко: в нашем случае :hover на обертке svg, а у svg fill: inherit;. Это универсальнее и удобнее. Вы можете прописать модификаторы для класса-обертки и использовать их для разных кейсов: в кнопке, ссылке и т.д.
png спрайты для старых браузеров. Вам это может не понадобиться, если разработка ведется, например под >ie9

[Николай Марченко]

Ivan Data: понял. А задачу свою можете показать?

[Ivan Data]

Николай Марченко: Прошу прощения, не понял, что за задача? Gulp task?

[Николай Марченко]

Ivan Data: да, хочется посмотреть как реализован такой сложный развёрнутый таск

[Ivan Data]

Нет, он очень большой — 350 строк)
Что котнкретно интересует? Тут же достаточно все просто:
0 Пишем алгоритм сетки для спрайтов
1 Берем SVG иконки, клеим из них спрайт
2 Чистим его от ненужных символов
3 Разбиваем SVG на разные размеры (опционально, у вас может быть один размер) и красим их, что бы сделать из них цветные спрайты
4 Растеризуем раскрашенное SVG
5 Клеим PNG спрайты. На этом этапе генерируем CSS правила
6 Сжимаем полученные спрайты
6 Конкатенируем CSS
7 Чистим все временные папки из пунктов 3, 4, 5
8 парсим на страницу (Опционально)

Нужно просто время и необходимость, что бы написать это. Как впрочем и во всем)

[Николай Марченко]

Ivan Data: 350 строк только сборка картинок? О_о

[Николай Марченко]

Ivan Data: попробую сам тогда воспроизвести подобное. Спасибо.

[Ivan Data]

Николай Марченко: 350 да. Таск свой функционал выполнят стабильно, но рефакторить надо, конечно. Можно сократить на 100 точно. И еще 50 занимает парсинг — там разметка.

Удачи!

[Ivan Data]

П@neonick: Посмотри обязательно доклад от Владимира Кузнецова.

[Николай Марченко]

Ivan Data: какой именно доклад?

[Ivan Data]

Я добавил в основной ответ на вопрос. Видимо не приходит отбивка.
https://events.yandex.ru/lib/talks/2234/

[Николай Марченко]

Ivan Data: ага, увидел. Спасибо!

Answer 2

[Евгений Власенко]

Для работы с растром, например с фотками https://www.npmjs.com/package/gulp-responsive

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

gulp.task('default', function() {
  return gulp.src('src/*.jpg')
    .pipe(responsive({
      'photo-*.jpg': [{
        width: 400
      },{
        width: 800,
        rename: {suffix: '@2x'}
      }],
      'background-*': [{
        height: 600
      },{
        // iPhone 4s, 5, 5s
        height: 600 * 2,
        rename: {suffix: '@2x'}
      },{
        // iPhone 6, 6+
        height: 600 * 3,
        rename: {suffix: '@3x'}
      }]
    }))
    .pipe(gulp.dest('dist'));
});

Использование в HTML

<img src="photo-cats.jpg" 
  srcset="photo-cats.jpg 1x, [e-mail] 2x"
  alt="My cats">

Использование в CSS

.banner {
  background-repeat: no-repeat;
  background-size: contain;
  //fallback
  background-image: url("background-dogs.jpg");
  background-image: image-set(
    "background-dogs.jpg" 1x,
    "[e-mail]" 2x,
    "[e-mail]" 3x);
}

Answer 3

[Artem Malko]

Я ,конечно же, порекомендую изучить, как это реализовано в TARS. Сами таски находятся в отдельном репозитории
О том, как это все работает можно узнать из доклада (https://vimeo.com/123924728 20 минута) или из доков к TARS. ТАм все очень подробно описано.

Comments

[Николай Марченко]

спасибо, посмотрю доклад вечерком.

Answer 4

[Максим Гатилин]

Для работы с векторной графикой крайне удобно использовать иконочный шрифт, который gulp умеет генерить автоматически.Можешь посмотреть как это реализовано на моем шаблоне

Comments

[Станислав Еременко]

Стандартный коммент, что иконочные шрифты уже не нужны.

[Максим Гатилин]

Станислав Еременко: Почему?

[Станислав Еременко]

Максим Гатилин: разный рендинг в браузерах, пляски с заданием размеров, etc.