Задать вопрос
neonick
@neonick
javascript

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

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

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

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

Еще один способ от Владимира Кузнецова. У него все проще, потому что задач таких, как у нас не стояло.
Ответ написан
14 комментариев
14 комментариев
Пригласить эксперта
Ответы на вопрос 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. ТАм все очень подробно описано.
Ответ написан
1 комментарий
1 комментарий
gatilin222
@gatilin222
Frontend-разработчик
Для работы с векторной графикой крайне удобно использовать иконочный шрифт, который gulp умеет генерить автоматически.Можешь посмотреть как это реализовано на моем шаблоне
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать модуль next js
22 нояб. 2024, в 12:20
10000 руб./за проект
Смонтировать видео с выставки
22 нояб. 2024, в 11:53
3000 руб./за проект
Настроить и запустить сервер World of Warcraft 3.3.5a
22 нояб. 2024, в 11:51
20000 руб./за проект
Ещё заказы