前言

在開始本文之前，我們先做一個選擇題：前端開發(fā)使用構(gòu)建工具的目的是什么？

      A、因?yàn)楝F(xiàn)在流行node.js，都在使用構(gòu)建工具

      B、讓前端開發(fā)變得高大上，和后端一樣編譯才能運(yùn)行

      C、讓自動化工具替代重復(fù)的手工操作，比如合并代碼，刷新瀏覽器預(yù)覽效果等。

選擇A、B請直接關(guān)閉此文，選擇C請繼續(xù)閱讀。

其實(shí)使用工具的目的就一個： 自動化一些重復(fù)操作，提升工作效率。ok，明確了這一點(diǎn)之后再來探究有哪些方式，可以把一堆小圖標(biāo)合并成一個圖片文件并生成相應(yīng)的樣式。

按照生成文件和使用方式來看，可以大致分成3類處理方式：

png sprite
 

合成雪碧圖是歷史最悠久最成熟的解決方案，把不同的png小圖標(biāo)拼接成一張png圖片。

手動操作

有的公司甚至讓UI設(shè)計師來合并小圖標(biāo)（UI設(shè)計師成了自動化工具，囧~），這樣做減少前端工作量的同時也帶來一些問題。

• 溝通問題。如果只想簡單地修改某個圖標(biāo)顏色，大小，都要與設(shè)計師溝通，一來一回增加時間成本。
• 樣式問題。設(shè)計師提供的小圖標(biāo)不能直接用，要配合特定的樣式（偏移值，大小）才行。
• 命名問題。即使有犀利的設(shè)計師提供了css文件，樣式類的命名也難以符合前端開發(fā)規(guī)范和需求（真有這樣的設(shè)計師歡迎私信推薦給我(●^◡^●)）
   

所以這種處理方式不推薦也不在我們的討論范圍之列。

自動化工具
 

當(dāng)我們擁有了自動化工具的時候，部分問題就可以對整個流程進(jìn)行優(yōu)化了。

1. 根據(jù)psd切出小圖標(biāo)（前端必備，自己動手，豐衣足食），并把小圖標(biāo)放入源文件夾。
2. 構(gòu)建工具自動生成圖片和css文件，并根據(jù)小圖標(biāo)名生成對應(yīng)的樣式名。
3. 代碼中引入樣式和圖片。

配置文件

以 npm 的 gulp.spritesmith 模塊為例實(shí)現(xiàn)整個流程。

這是 gulpfile.js 中配置的任務(wù)：

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

gulp.task('png', function () {
  gulp.src('./src/*.png')
    .pipe($.spritesmith({
      imgName: 'icon.png',  //參數(shù)，生成圖片文件名
      cssName: 'icon.css',  //參數(shù)，生成的樣式文件名
      cssTemplate: './src/png_template.hbs'  //參數(shù)，樣式文件模板的路徑，默認(rèn)使用的是handlerbars模板
    }))
    .pipe(gulp.dest('dist/png'));
});

功能比較強(qiáng)大，除了css文件外還可以生成scss和less文件，同時也可以用模板文件對其進(jìn)行格式化。這里我自定義了一個 png_template.hbs 文件，內(nèi)容如下：

// 主要增加了一個通用樣式，給圖標(biāo)賦予內(nèi)聯(lián)塊級樣式
.icon {
  display: inline-block;
}
{{#sprites}}
.icon-{{name}} {
  background-image: url({{{escaped_image}}});
  background-position: {{px.offset_x}} {{px.offset_y}};
  width: {{px.width}};
  height: {{px.height}};
}
{{/sprites}}

開發(fā)流程

配置完成之后，在源文件夾中放入兩個 question.png、hook.png 兩個小圖標(biāo)進(jìn)行調(diào)試。

gulp 處理后生成了兩個文件：icon.css、icon.png。 打開 icon.css，可以看到根據(jù)圖標(biāo)名生成了兩個樣式類：

.icon {
  display: inline-block;
}
.icon-hook {
  background-image: url(icon.png);
  background-position: -40px 0px;
  width: 16px;
  height: 16px;
}
.icon-question {
  background-image: url(icon.png);
  background-position: 0px 0px;
  width: 40px;
  height: 40px;
}

在代碼中使用起來很簡單

// 引用生成的css文件
<link rel="stylesheet" href="./png/icon.css" charset="utf-8">
...
//直接給標(biāo)簽添加樣式類
<i class="icon icon-hook"></i>
<i class="icon icon-question"></i>

預(yù)覽效果見文末截圖

問題

感謝技術(shù)的進(jìn)步和人民生活水平的提高，這種高效的方式馬上碰到一個“天敵”：高dpr的視網(wǎng)膜屏幕。

用響應(yīng)式判斷dpr的話，前面所有的工作量都要倍增，同時還要加載多余的樣式。而且隨著屏幕更新?lián)Q代，dpr增多就要多做一張圖片和樣式，想想都太磨人 -_-||

那么是否有圖片可以自適應(yīng)不同dpr的屏幕？css3的曙光給我們指引了新的方向。

font-face
 

也稱作字體圖標(biāo)，這種技術(shù)簡單來說就是把矢量圖合并生成字體文件，然后在css中引用對應(yīng)的字體編碼即可渲染成圖片。因?yàn)樽煮w是適應(yīng)各種屏幕的，所以字體圖標(biāo)也繼承了這個優(yōu)點(diǎn)。

手動操作
 

目前有不少制作字體圖標(biāo)的網(wǎng)站，比較火的有icomoon、阿里巴巴圖標(biāo)庫等。

基本操作都是在線上編輯圖標(biāo)，然后下載一個壓縮包，包含字體文件和樣式。首先的問題是不同圖標(biāo)大小需要手動調(diào)整 font-size 屬性；其次就是手工操作太頻繁：上傳 - 編輯 - 下載；最后就是依賴網(wǎng)絡(luò)環(huán)境，沒網(wǎng)絡(luò)就沒法編輯圖標(biāo)。既然如此，我們嘗試使用自動化工具離線生成文件。

自動化工具
 

依然使用的是github上star數(shù)比較多的模塊 gulp-iconfont ，但是要同時生成css還需另一個模塊 gulp-iconfont-css。

配置文件

配置 gulpfile.js

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

gulp.task('iconfont', function () {
  // 先配置樣式，再配置字體文件
  return gulp.src(['src/*.svg'])
    .pipe($.iconfontCss({
      fontName: 'iconfont', //字體名
      path: './src/font_template.css',  //模板文件路徑
      cssClass: 'iconfont'  //樣式類名
    }))
    .pipe($.iconfont({
      fontName: 'iconfont', //字體名
      formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'] //輸出的字體文件格式
    }))
    .pipe(gulp.dest('dist/font'));
});

此處省略模板文件~

開發(fā)流程

配置完成之后，在源文件夾中放入兩個 question.svg、hook.svg 兩個小圖標(biāo)進(jìn)行調(diào)試。

gulp 處理后生成了6個文件： _icon.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff、iconfont.woff2。 打開 _icon.css，可以看到根據(jù)圖標(biāo)名生成了兩個樣式類：

@font-face {
 font-family: "iconfont";
 src: url('./iconfont.eot');
 src: url('./iconfont.eot?#iefix') format('eot'),
  url('./iconfont.woff2') format('woff2'),
  url('./iconfont.woff') format('woff'),
  url('./iconfont.ttf') format('truetype'),
  url('./iconfont.svg#iconfont') format('svg');
}

.iconfont:before {
 font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 font-style: normal;
 font-variant: normal;
 font-weight: normal;
 /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */
 text-decoration: none;
 text-transform: none;
}


.iconfont-hook:before {
 content: "\E001";
}

.iconfont-question:before {
 content: "\E002";
}

在代碼中使用起來也很簡單

// 引用生成的css文件
<link rel="stylesheet" href="./font/_icons.css" charset="utf-8">

...

//直接給標(biāo)簽添加樣式類
<i class="iconfont iconfont-hook"></i>
<i class="iconfont iconfont-question"></i>

預(yù)覽效果見文末截圖

使用問題

和之前的介紹的工具一樣，可以使用模板，也可以生成scss、less、css多種格式文件。蛋疼的問題是：生成的所有的字體圖標(biāo)都會取最高的那個圖標(biāo)的高度。也就是說一些圖標(biāo)需要重新設(shè)置高度！ 自動化操作瞬間降級為半自動化~而且生成的圖片還帶鋸齒（不知道是不是配置問題），所以只能算是失敗的方案。

svg sprite
 

正當(dāng)愁眉不展之時，看到張鑫旭一篇文章《未來必?zé)幔篠VG Sprite技術(shù)介紹》
 

（末尾的結(jié)束語將字體圖標(biāo)和svg sprite做了對比，有興趣的朋友可以看一下）才讓我感覺柳暗花明：原來還有更強(qiáng)大的svg sprite。將svg矢量圖標(biāo)整合成一個svg文件，使用的時候以 symbol 或 use 等標(biāo)簽的形式展現(xiàn)。

手動操作
 

考慮這個方案之時就沒打算用手動化，因?yàn)槿绻枰謩硬僮鬟€不如使用字體圖標(biāo)，所以直接考慮自動化工具。

自動化工具
 

使用的是github上star數(shù)僅次于gulp-svgstrore的模塊 gulp-svg-sprite 。支持scss、less、css文件格式輸出。

配置文件

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

gulp.task('svg', function () {
  return gulp.src('./src/*.svg')
  .pipe($.svgSprite({
    mode: {
      symbol: {
        prefix: `.svg-`,
        dimensions: '%s',
        sprite: '../icon.svg',
        symbol: true,
        render: {
          css: {
            dest: '../icon.css'
          }
        }
      }
    }
  }))
  .pipe(gulp.dest('dist/svg'));
});

開發(fā)流程

整個流程同上，配置完成之后，在源文件夾中放入兩個 question.svg、hook.svg 兩個小圖標(biāo)進(jìn)行調(diào)試。

gulp 處理后生成了2個文件： icon.svg、icon.css。 打開 icon.css，可以看到根據(jù)圖標(biāo)名生成了兩個樣式類：

.svg-hook {
 width: 16px;
 height: 16px;
}

.svg-question {
 width: 40px;
 height: 40px;
}

非常簡潔有么有?。。?/p>

使用起來稍稍復(fù)雜一點(diǎn)：

//引用樣式文件
<link rel="stylesheet" href="./svg/icon.css" charset="utf-8">

...

<svg class="svg-hook">
  <use xlink:href="./svg/icon.svg#hook"></use>
</svg>
<svg class="svg-question">
  <use xlink:href="./svg/icon.svg#question"></use>
</svg>

預(yù)覽效果見文末截圖

相比字體圖標(biāo)：

1. 據(jù)說SVG圖標(biāo)跟字體圖標(biāo)相比，還支持漸變，甚至彩色圖標(biāo)。
2. 改變大小直接調(diào)整width和height屬性即可，而不是調(diào)整font-size那種“曲線救國”的方式。
3. 填充顏色也很簡單，設(shè)置fill屬性的值即可（前提是svg中不能使用fill，如果svg自帶fill屬性，設(shè)置失效）。

使用問題

所有的IE瀏覽器(包括IE11)還不支持獲得外鏈SVG文件某個元件。但是也很好解決，使用第三方j(luò)s即可——svg4everybody。

總結(jié)
 

文中所示代碼地址：https://github.com/yalishizhude/sprite-demo  或者可以本地下載

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論