генерация карты спрайтов webpack

Оригинальная статья Tencent DeepOcean:сделать pro.IO/Webpack-SPR…

предисловие

Сейчас, когда HTTP/2.0 не популярен, css-спрайт (карта спрайтов) по-прежнему является важной частью интерфейсной разработки С учетом популярности веб-приложений, что делать со спрайт-изображениями после переключения инструмента построения на веб-пакет?

Цель

Давайте поговорим о том, чего мы хотим достичь в первую очередь.

1. Иконки спрайтов, которые нужно синтезировать, единообразно помещаются в папку src/assets/sprite

2. В src/img будет сгенерировано изображение спрайта, названное именем каталога верхнего уровня, например, значки, используемые в папке значков, объединены в icon.png

3. Изображения спрайтов расположены сверху вниз, а каждый значок расположен на расстоянии 20 пикселей друг от друга, как показано на рисунке.

4. Пишите в sass и сливайте по мере необходимости.

5. Стиль, полученный после компиляции, выглядит следующим образом, в том числе ширина и высота также выводятся вместе

 

Общие решения

На данный момент есть два основных решения

Один из них представляет собой плагин, представленный webpack-spritesmith и postcss-sprites.Основной режим работы webpack-spritesmith заключается в предварительной сборке иконок в каталоге спрайтов, а страница в основном зависит от сгенерированного изображения Sprite. Postcss-sprites анализирует сгенерированный файл CSS, собирает фон или фоновое изображение в качестве зависимости, объединяет его в изображение спрайта, а затем заменяет соответствующие параметры.

Второй - метод обработки загрузчиком, но хорошего решения в интернете в принципе нет, например вот этого

Этот способ идентификации по аннотации не очень хорош.

В настоящее время ни одно из представленных на рынке решений не может удовлетворить наши индивидуальные требования.По сравнению с методом обработки определенной папки/файла мы предпочитаем использовать для этого метод обработки цепочки загрузчика.

решение

Если используется загрузчик, его можно только проинформировать о том, что его необходимо синтезировать, добавив отметку, например, добавив «?_sprite» к фоновому URL-адресу, а затем используя обычный метод для получения пути изображения и предоставления его соответствующему библиотека для синтеза.

Для разработки здесь в основном используется проект с открытым исходным кодом spritesmith.Spritesmith очень мощный.Он может гибко синтезировать изображения спрайтов и получать актуальную информацию об иконке через соответствующий API.

Где sprites — это путь к изображению, которое необходимо синтезировать, который содержит абсолютный путь к значку.

1. Spritesmith.run({src: sprites,algorithm:'top-down',padding: 20}, function handleResult (err, result) {
2.    if(err) {
3.        throw err;
4.    }
5. });            

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

1. Spritesmith.run({src: sprites,algorithm:'top-down',padding: 20}, function handleResult (err, result) {
2.    if(err) {
3.        throw err;
4.    }
5. });  

При печати результата вы можете видеть, что возвращаемые данные в основном включают абсолютный путь к изображению, координаты, ширину и высоту, а также буфер изображения спрайта.

Используя эту информацию, мы можем повторно обработать возвращенный стиль, чтобы он соответствовал требованиям к стилю, указанным в пункте 5 выше.

1. let imageW = image.width;
2. let imageH = image.height;
3. if(mobile){
4.    imageW = imageW/2;
5.    imageH = imageH/2;
6. }
7.  
8. let imgWidth = 'width:' + imageW + 'px;';
9. let imgHeight = 'height:' + imageH + 'px;';
10.  
11. if(i < afterContent.length) {
12.  
13.    if(afterContent[i] == ';') {
14.        end = i + 1;
15.        afterContent = afterContent.substring(0, end) + backgroundSize+ imgWidth+ '\n' + imgHeight + afterContent.substring(end);
16.    } else {
17.        end = i;
18.        afterContent = afterContent.substring(0, end) + ';\n' +  backgroundSize +imgWidth+ '\n' + imgHeight+ afterContent.substring(end);
19.    }
20.  
21. }
22. let imagePosX = image.x;
23. let imagePosY = image.y;
24. if(mobile){
25.    imagePosX = imagePosX/2;
26.    imagePosY = imagePosY/2;
27. }
28. let imageX = image.x == 0 ? ' 0' : ' -' + imagePosX + 'px';
29. let imageY = image.y == 0 ? ' 0' : ' -' + imagePosY + 'px';
30. let imagePosition = '';
31. if(image.x || image.y){
32.    imagePosition = imageX + imageY;
33. }
34.  
35. let cssVal = 'url("' + spriteRelativePath + '")' + imagePosition;

В общем, h5 в проекте использует двойные изображения.Здесь можно добавить суждение.Если используется h5, ширина, высота и размер фона уменьшаются вдвое.

1. module:{
2.      rules:[
3.          {
4.              test:/\.(scss|css)$/,
5.              use: ExtractTextPlugin.extract({
6.                fallback: "style-loader",
7.                publicPath: '../../',
8.                use: [{
9.                  loader:'css-loader'
10.                },{
11.                  loader:'isprite-loader',
12.                  options:{
13.                    outputPath:'./src/assets/img/',
14.                    mobile:true
15.                  }
16.                },{
17.                  loader:'sass-loader'
18.                }],
19.              })
20.          },
21.      ]
22. }

 

наконец

Ожидаемый эффект здесь в основном достигнут, но есть еще некоторые проблемы, которые не были решены, например, изображение Sprite будет генерироваться каждый раз, что будет иметь определенное влияние на скорость компиляции. можно использовать хэш-значение для сравнения.Если в файле нет изменений, он не будет обработан.

У каждого бизнеса разные сценарии спроса, этот метод не обязательно применим к другим проектам, надеюсь, он будет полезен всем.

Прикрепить демо

GitHub.com/KL производство-что/есть…

Добро пожаловать в публичный аккаунт Tencent DeepOcean в WeChat, и мы будем еженедельно публиковать оригинальные высококачественные технические статьи, связанные с интерфейсом, искусственным интеллектом, SEO/ASO и другими областями:

Видя, как тяжело редактору двигаться, обратите внимание на один :)