iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 13
1
Modern Web

CSS 實戰心法系列 第 13

Gulp - 在本地端製作 Icon Fonts

網頁設計都會需要大量的小 icon,現在的 icon 都傾向使用 web fonts 來處理,因為 web font 所製作的 icon 有以下的好處:

  • 載入容易,HTML 只要載入一隻 CSS 就搞定
  • 套用容易,只要透過 Class 就能套用
  • 可自由調整大小、色彩

雖然只能使用單色,但在開發的便利性上還是有不少人選擇 icon font,目前大家所選擇主流 icon fonts 有以下:

除了以上幾種不同選擇外,大家應該也會想知道 "如果想自己做呢!?",這次就來介紹怎麼用 Gulp 來自定自己的 icon fonts。

gulp iconfont

這一個套件會將 .svg 的檔案轉換成字體,接下來在轉換成 CSS 供開發者使用。

範例程式碼:https://github.com/Wcc723/ironman-gulp-sass/tree/v0.4.icon-fonts

使用套件:https://www.npmjs.com/package/gulp-iconfont

經過這幾次的練習,相信大家應該了解 gulp 的開發順序,我們會先打開 package.json 將所需要的套件載入,這次新增的套件有 asyncgulp-consolidategulp-iconfont

"dependencies": {
    "async": "^2.1.4",
    "autoprefixer": "^6.5.3",
    "gulp": "^3.9.1",
    "gulp-consolidate": "^0.2.0",
    "gulp-iconfont": "^8.0.1",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^6.2.0",
    "gulp-sass": "^2.3.2"
}

接下來打開 gulpfile.js 加入以下的 Task。

// icon fonts
gulp.task('iconfonts', function(done){
  var iconStream = gulp.src([path.source + 'icons/*.svg'])    // 載入 svg
    .pipe(iconfont({ fontName: 'icon' }));                    // 定義 fontName

  async.parallel([
    function handleGlyphs (cb) {
      iconStream.on('glyphs', function(glyphs, options) {
        gulp.src(path.source + 'css_template/iconfonts.css')  // 取用要輸出的 CSS 樣板
          .pipe(consolidate('lodash', {
            glyphs: glyphs,
            fontName: 'icon',
            fontPath: '../fonts/',                            // CSS 對應的字體路徑
            className: 'all-my-class'                         // CSS Class 的前輟詞
          }))
          .pipe(gulp.dest(path.public + 'stylesheets'))       // CSS 輸出資料夾
          .on('finish', cb);
      });
    },
    function handleFonts (cb) {
      iconStream
        .pipe(gulp.dest(path.public + 'fonts/'))              // 字體輸出資料夾
        .on('finish', cb);
    }
  ], done);
});

除了 SVG 以外,在 gulpfile.js 還有列出一個 css template,這是用來產出 iconfont 所需的 CSS 檔案樣板,在我所提供的範例中已包含 template 的樣板,大家可以直接參考。

|- /source        # 專案資料夾 (sass 位置)
  |- css_template # webfont 需要的 css 樣板
  |- icons        # .svg 原始檔位置
|- /mode_modules  # node.js 套件資料夾
|- /public        # 專案匯出的資料夾
|- .gitignore
|- gulpfile.js    # gulp 腳本檔案
|- package.json   # 套件管理 json

接下來執行 gulp iconfonts public 就會產生一個字體檔以及 CSS 檔案,接下來我們在 HTML 中載入 CSS 檔案,就可以開始使用 icon font 囉~。

http://ithelp.ithome.com.tw/upload/images/20161213/20083608bQJEjLDcN5.png

結語

在使用這功能時,要思考團隊中是不是有專門的設計師能繪製 icon ,以及 icon 不足時能不能有專人提供,避免用了這個功能,卻無法做良好的維護。

文章同時發表於:https://wcc723.github.io/css/2016/12/13/gulp-dev-env/


上一篇
Gulp - 定義預設開發環境
下一篇
Gulp - Webserver
系列文
CSS 實戰心法30

尚未有邦友留言

立即登入留言