[gulp] favicon編

2016-08-11

gulpを使ったfavicon生成

gulpの記事第三弾は、簡単なところでfaviconの生成について説明する。gulp自体の設定については下記の記事参照。

gulpの初期設定

フォルダの構成

project_folder
├── 📁app
├── 📁gulp
│   ├── config.coffee
│   └── 📁tasks
│       ├── favicons.coffee
│            :
├── gulpfile.coffee
├── 📁node_modules
├── package.json
└── 📁src
    └── 📁images
        └── favicon.png       <-元ファイル

src/images/favicon.png

ここに変換元となるfavicon.pngを置いておく。元ファイルは1024 x 1024で作成している。

app

変換後のファイルは、document rootに置く必要があるので、app直下に出力する。

変換スクリプト

インストールするnpmモジュール

スクリプトの実行に必要なnpmモジュールをインストールしておく。

npm i gulp-favicons -D`

favicons.coffee

gulp/taks/favicons.coffee

 1gulp = require('gulp')
 2favicons = require('gulp-favicons')
 3config = require('../config')
 4
 5gulp.task 'favicons', ->
 6  gulp.src(config.src + '/images/favicon.png')
 7  .pipe(favicons({
 8    appName: "Site name",
 9    appDescription: "Site description",
10    developerName: "developer name",
11    developerURL: "http://developerurl/",
12    background: "#ffffff",
13    path: "/",
14    url: "http://siteurl/",
15    display: "standalone",
16    orientation: "portrait",
17    version: 1.0,
18    logging: false,
19    online: false,
20    html: "favicons.html",
21    pipeHTML: true,
22    replace: true    
23  }))
24  .pipe(gulp.dest(config.dest))

faviconsの設定は上記の様に設定すれば十分と思う。
htmlを設定することで、<head>タグに書く要素を出力してくれる。
- ただし、Open graphなど画像のmeta要素しか出力してなかったりするので、注意が必要。

favicons実行

1$ gulp favicons
2
3[hh:mm:ss] Requiring external module coffee-script/register
4(node:46893) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
5[hh:mm:ss] Using gulpfile project_folder/gulpfile.coffee
6[hh:mm:ss] Starting 'favicons'...
7[hh:mm:ss] Finished 'favicons' after ### ms

手元のmac book airで14秒ほどかかった。結構時間がかかるので、favicon変更時のみ手動で行うなどした方がいいかもしれない。