[destus]

Всем привет!

1) Кто что использует на сайте для картинок < 10 kb. Таких картинок, скажем, 40 штук. Спрайт или base64 ?

2) Кто как ресолвит пути к картинкам в gulp(<4) для sass файлов? Понятно, что можно делать и вебпаком, но интересует именно такая ситуация. Пример, структура папок

/frontend
    /scss
        /header
            header.scss
            loader.gif

header.scss

.header {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    margin: 0 auto;
    background: url('loader.gif') left center no-repeat;
}

Если использовать типа такого

return combiner(
        gulp.src('frontend/scss/**/*.scss', {base: 'frontend/scss'}),
        $.sass({
            outputStyle: !isDevelopment ? 'compressed' : 'nested'
        }),
        $.concat('main.css'),
        gulp.dest('public')
    )

то в public будет такая картина

/public
    /header
        loader.gif
    main.css

И путь до картинки в main.css не изменится на header/loader.gif.

Написал небольшое решение. Оно работает. Но может как-то проще можно?

const through2 = require('through2').obj;
const rework = require('rework');
const reworkUrl = require('rework-plugin-url');

function prependUrls(css, prepend) {
    return rework(css)
        .use(reworkUrl(function(url) {
            if (url.indexOf('data:') === 0) {
                return url;
            } else {
                const newUrl = prepend + url;
                return newUrl.replace('//', '/');
            }
        }))
        .toString();
}

gulp.task('...', function(){
    return combiner(
        gulp.src('frontend/scss/**/*.scss', {base: 'frontend/scss'}),
        $.sass({
            outputStyle: !isDevelopment ? 'compressed' : 'nested'
        }),
        through2(
            function (file, enc, cb) {
                const prepend = path.dirname(file.relative) + '/';
                const css = prependUrls(file.contents.toString(), prepend);
                file.contents = Buffer.from(css);
                cb(null, file);
            }
        ),
        $.concat('main.css'),
        gulp.dest('public')
    )
})