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

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

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

Буду рад любым рекомендациям, ссылкам, плагинам. Отдельное спасибо, если покажете свой сборщик, как вы обращаетесь с картинками.
  • Вопрос задан
  • 3372 просмотра
Решения вопроса 1
ivandata
@ivandata
Веб разработчик
Попробую ответить.
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

Еще один способ от Владимира Кузнецова. У него все проще, потому что задач таких, как у нас не стояло.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
mahnunchik
@mahnunchik
https://about.me/vlasenko
Для работы с растром, например с фотками 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, photo-cats@2x.jpg 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,
    "background-dogs@2x.jpg" 2x,
    "background-dogs@3x.jpg" 3x);
}
Ответ написан
artemmalko
@artemmalko
Frontend developer 2gis
Я ,конечно же, порекомендую изучить, как это реализовано в TARS. Сами таски находятся в отдельном репозитории
О том, как это все работает можно узнать из доклада (https://vimeo.com/123924728 20 минута) или из доков к TARS. ТАм все очень подробно описано.
Ответ написан
gatilin222
@gatilin222
Frontend-разработчик
Для работы с векторной графикой крайне удобно использовать иконочный шрифт, который gulp умеет генерить автоматически.Можешь посмотреть как это реализовано на моем шаблоне
Ответ написан
Ваш ответ на вопрос

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

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