How to work with images in gulp.js?

Question

css

I'm working on my version of the starting template on Gulp/Jade/PostCSS - Gagarin .
I do not know how best to organize work with images, convenient storage and use. Cases are as follows:
1. Layout with graphics in a raster. Generate sprites? Generate [email protected]?
2. Layout with graphics in vector. I save everything as separate files in SVG through Illustrator. Do I need to collect them into SVG sprites? How? How to use SVG(-sprites) and still manage color, for example (change icon color on hover)?
3. Layout with graphics partly in vector, partly in raster.
4. I heard a recommendation to save all graphics (well, except for photos) as base64 in a separate CSS. If necessary? How then to deal with it?
I will be glad to any recommendations, links, plug-ins. Special thanks if you show your picker how you handle pictures.

Answer 1

I'll try to answer.
1. Raster to sprites. You can [email protected]
2 under the retina. There are several ways to store and use svg sprites. SVG sprite is just a file where svg elements are searched by 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>

We use the 'use' tag on the page, where the xlink:href attribute is a link to the svg, y with an identifier, for example:

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

To support backward browsers, we use the https://github.com/jonathantneal/svg4everybody polyfill. We control the color through the fill property
3. Interface elements, such as icons, are best stored in a vector, of course. Raster - compress.
4. Small elements in base64. habrahabr.ru/post/116538
All this is collected, packed, etc. assemblers, that's right.
For SVG, we use a very confusing system that: collects svg files from designers, glues them into a sprite, generates png sprites in different colors and generates styles for them. It also parses a preview of all this on a separate page, for testing purposes.
We use gulp and plugins for this:
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
Another way from Vladimir Kuznetsov. Everything is easier with him, because there were no tasks like ours.

Answer 2

To work with a raster, for example with photos 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'));
});

Usage in HTML

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

Usage in CSS

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

Answer 3

I would certainly recommend looking into how this is implemented in TARS . The tasks themselves are in a separate repository
. You can learn how it all works from the report ( https://vimeo.com/123924728 20 minutes) or from the docks to TARS . Everything is described in great detail.

Answer 4

To work with vector graphics, it is extremely convenient to use an icon font, which gulp can generate automatically. You can see how it is implemented on my template