Способы генерации нескольких спрайтов?

Question

[massef]

Есть огромный спрайт, нужно разбить его на части, какие есть инструменты для этого?
Уверен должно быть какое-то решение, ведь в больших проектах как то дробят спрайты.
Само собой вручную делать не вариант, даже с использованием онлайн генераторов. Желательно чтобы это происходило в момент сборки проекта.

Answer 1

[Андрей Хохлов]

Соответствующий плагин под Gulp / Grunt и немного заморочиться с конфигами.
Мой сборщик смотрит на папку sprites. Каждая папка внутри неё - отдельный спрайт, название папки - название спрайта и префикс для его переменной в scss.

Речь разумеется о сборке спрайтов из отдельных картинок.

Comments

[massef]

Андрей Хохлов как я понимаю, структура у вас типо такой?
src/
---img/
------folder_sprite_1/
---------name_sprite_1.png
------folder_sprite_2/
---------name_sprite_2.png
------folder_sprite_3/
---------name_sprite_3.png
...

И складывается все в аналогичную структуру на продакшене?

Если да, то покажите пожалуйста свой конфиг, если у вас Gulp.
Я пробовал сделать такую структуру, но у меня в конечном итоге все генерилось в один спрайт и на продакшене ложилось в папку img/sprites.

Хочу спрайт разбить по компонентам, т.е. чтобы в билде в img лежали папки с названием компонента и в них спрайт для данного компонента.

В идеале конечно хотелось бы следующую работу сборщика.
В исходниках в папке img я создаю папки с названием компонентов, в них складываю нужные иконки конкретного компонента. Затем в стилях пишу путь до иконки, а сборщик уже сам проходит по стилям, генерит спрайты, раскидывает их по своим папкам и в стилях заменяет урлы отдельных картинок на спрайт.
Реально ли такое? Есть похожий функционал у плагина SmartSprites, но он только для галпа и на сколько я понял, он не умеет раскидывать по папкам, а тупо забирает все иконки из папок и генерит в один спрайт.
Буду рад любой помощи.

[massef]

Опечатка, smartsprites только для grunt

[Андрей Хохлов]

massef: https://github.com/andrey-hohlov/protoss/blob/mast...

Сборщик делает картинки-спрайты, scss с переменными и миксином. В стилях вызывается миксин, в качестве параметра передается переменная, содержащая информацию об иконке.

Спрайты все собираются в папку %build%/images/sprites/

[faragly]

Использую такой же метод, все что внутри определенной папки в /sprites/ генерится в спрайт название папки + "-sprite".
Так получаем список папок

var foldersStream = function(){ 
    return Q.fcall(function () {
        return globby.sync(path.join(config.imgs.src, 'sprites', '*')).filter(function(src) {
            return fs.lstatSync(src).isDirectory();
        });
    });
});

затем обработка

foldersStream().then(function(folders) {
            return Q.all(folders.map(function(folder) {
                var q = Q.defer();
                var spriteFile = path.basename(folder) + '-sprite.png';
                var spriteData = gulp.src(path.join(folder, '*.*')).pipe($.spritesmith({
                    imgName: spriteFile,
                    cssName: path.basename(folder) + '.scss',
                    padding: 5,
                    cssFormat: 'scss',
                    imgPath: '/source/i/' + spriteFile,
                    cssTemplate: './source/scss.template.handlebars',
                    cssVarMap: function(sprite) {
                        if (sprite.name.substr(-6) === '-hover') {
                            sprite.name = sprite.name.substr(0, sprite.name.length - 6) + ':hover';
                        }
                    }
                }));

                var imgStream = spriteData.img
                    .pipe(buffer())
                    .pipe($.imagemin({
                        progressive: true,
                        svgoPlugins: [{removeViewBox: false}],
                        use: [pngquant()]
                    }))
                    .pipe(gulp.dest(config.imgs.src));

                var cssStream = spriteData.css
                    .pipe(gulp.dest(path.join(config.sass.base, 'sprites')));

                es.merge(imgStream, cssStream)
                    .on('end', function() {
                        $.gutil.log(
                            $.gutil.colors.bold('Sprite'),
                            $.gutil.colors.yellow(path.join(config.imgs.src, spriteFile)),
                            $.gutil.colors.bold('generated')
                            );
                        q.resolve();
                    });

                return q.promise;
            }));

Answer 2

[LittleFatNinja]

тю, на пыхе нарежь, imagemagick, или какие там, нагугли короч либы

Comments

[massef]

нет, пыха не вариант

[massef]

Neoline Да, я в курсе про сборщики, но у меня не получилось допиться нужной работы.

В идеале конечно хотелось бы следующую работу сборщика.
В исходниках в папке img я создаю папки с названием компонентов, в них складываю нужные иконки конкретного компонента. Затем в стилях пишу путь до иконки, а сборщик уже сам проходит по стилям, генерит спрайты, раскидывает их по своим папкам и в стилях заменяет урлы отдельных картинок на спрайт.
Реально ли такое? Есть похожий функционал у плагина SmartSprites, но он только для галпа и на сколько я понял, он не умеет раскидывать по папкам, а тупо забирает все иконки из папок и генерит в один спрайт.
Буду рад любой помощи. Использую Gulp.

Answer 3

[Александр Логинов-Солоницын]

https://habrahabr.ru/post/227945/ - тут все написано очень доходчиво.