雪碧圖sprity 合并多圖使用心得

vboy1010 發布于2019-08-28 18:29 / 1978人閱讀

摘要：介紹是一個模塊化的雪碧圖生成工具會根據目錄中的圖片生成相應的雪碧圖和樣式文件，支持圖，可以內嵌編碼格式的圖，支持不同的圖片格式和有不同的圖片引擎可以選擇。

介紹

sprity 是一個模塊化的雪碧圖生成工具
會根據目錄中的圖片生成相應的雪碧圖和樣式文件，支持retina圖，可以內嵌base64 編碼格式的圖，支持不同的圖片格式和有不同的圖片引擎可以選擇。
sprity 的前身是css-sprite,sprity的 git地址

sprity的功能

生成雪碧圖和對應的css文件(也可以是less，sass等）

可以配置多個雪碧圖圖片

可以配置多個分辨率的雪碧圖（也就是可以按照比例生成雪碧圖)

可以講圖片搞成base64編碼

如何使用 安裝

npm install sprity --save

使用

sprity可以和gulp，grunt配合使用，這里使用的是gulp，先上代碼

gulp.task("sprites", function () {
    return sprity.src({
        name: "icon",//這里配置name，生成的圖片就是icon-xx.png了
        src: config.src.img + "/icons/**/*.png",//這里配置生成多個雪碧圖，對應目錄都在icons/**下面
        split: true,//一定要設置為true，不然多圖就有問題了
        style: "./icon.scss",//生成的sass文件路徑
        format: "png",//
        processor: "sass",//指定sass的處理器，[點擊查看更多](https://github.com/sprity/sprity#style-processors)
        cssPath: "#{$icon-sprite-path}",//這里制定生成的css 的路徑，模版里面也有對應的
        dimension: [{
            ratio: 1, dpi: 36
        },
        {
            ratio: 0.5
        }],
        template: "./sprite-tpl.hbs",
        orientation: "binary-tree"http://指定圖片算法，具體的可以參考git

    })
    .pipe(gulpif("*.png", gulp.dest(config.dest.img), gulp.dest(config.src.sass)))
});

hbs模版,sprity采用的是handlebars模版，具體的語法參考handlebars，
自定義模版所有的字段參考wiki
注意$icon-sprite-path，在sprity的配置文件中用到過，這里在sass里面定義了一個變量
我的原圖都是2倍，合圖后需要縮放2倍，因此在配置文件中定義了一個0.5的倍率作為參考倍率

$icon-sprite-path: "/static/images";
{{#each layouts}}
    {{#each sprites}}
        .{{cssesc ../classname}} {
            {{#if dpi}}
                background-image: url("{{escimage url}}");
                background-size: {{baseWidth}}px {{baseHeight}}px;
                display:inline-block;
            {{/if}}
        }

    {{/each}}

    {{#each layout.items}}
        .{{../classname}}-{{meta.name}} {
        background-position: -{{baseDim x}}px -{{baseDim y}}px;
        width: {{baseDim width}}px;
        height: {{baseDim height}}px;
        }
    {{/each}}
{{/each}}

sprity生成的sass文件,東西太多了，選了幾個列出來，這下知道$icon-sprite-path是干什么的了吧

$icon-sprite-path: "/static/images";
.icon-apps {
}

.icon-apps {
   background-image: url("#{$icon-sprite-path}/icon-apps.png");
   background-size: 108px 108px;
   display:inline-block;
}
.icon-apps-huiyishi {
    background-position: -0px -0px;
    width: 54px;
    height: 54px;
}

注意，前綴如果想不是icon，可以通過prefix來控制

結語

sprity 能做到自動化生成雪碧圖，但是可配置型不是特別高，控制粒度很大，后續考慮使用postcss，postcss的合圖插件力度可以控制在單個css規則上面，這樣就可以指定那些需要base64，那些需要合圖，那些可以搞到cdn上了

GPU云服務器云服務器 html使用雪碧圖雪碧圖使用心得使用心得與技巧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111265.html

postcss-lazysprite: 一種生成CSS 雪碧圖的懶惰姿勢

摘要：無論是早期工具，還是現在流行的配合這類構建工具而產生的雪碧圖插件。本文原文鏈接：https://devework.com/postcss-...，轉載請注明原始來源，謝謝！ showImg(https://segmentfault.com/img/bVPmaC?w=1692&h=754); postcss-lazysprite 是一個基于PostCSS 開發的用于生成雪碧圖圖片及其C...

BearyChat 2019-08-29 12:48 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

CHENGKANG 2019-08-29 14:11 評論0 收藏0
使用compass自動合并css雪碧圖(css sprite)

摘要：使用雪碧圖，能夠減少頁面的請求數降低圖片占用的字節，以此來達到提升頁面訪問速度的目的。也正是因為這一點，導致很多開發者懶于使用雪碧圖。本文就介紹下怎樣使用來自動合并雪碧圖。生成的每個雪碧圖默認的規則是目錄名圖片名。 css雪碧圖又叫css精靈或css sprite，是一種背景圖片的拼合技術。使用css雪碧圖，能夠減少頁面的請求數、降低圖片占用的字節，以此來達到提升頁面訪問速度的目的。但...

劉永祥 2019-08-28 18:06 評論0 收藏0
CSS > 關于雪碧圖預處理和后處理方案的討論

摘要：預處理方案代表和預處理方案是預先指定需要生成的雪碧圖切片元素，由工具合成后，得到相應的雪碧圖和數據文件，開發中將二者投入使用。預處理方案一般以頁面為單元組織雪碧圖。結語關于雪碧圖的處理方案的討論就到此結束了。廣告：SF 里弄了個 CSS 小圈子，歡迎一起來討論問題前端小圖標處理方案眾多，本文主要介紹基于雪碧圖的處理方案，分析雪碧圖的預處理和后處理模式的得與失，以及在項目中通常會遇到...

hyuan 2019-08-30 15:53 評論0 收藏0