Gulpでアイコンフォントを自動生成する方法 | hirakublog ヒラクブログ
アイコンフォントを作成するにはIcoMoonが有名ですが、外部サービスなのでgitでの管理が面倒だったりします。 gulpではほぼ同じ処理が実現できます。つまりローカルで完結するのでファイル管理が楽になります。 gulpでアイコンフォントを自動生成する方法 ディレクトリ構成 . ├── assets │ ├── css │ └── fonts ├── gulpfile.js └── src ├── iconfont │ ├── svg │ └── templates │ ├── myfont.css │ ├── myfont.html │ └── myfont.scss └── sass ├── foundation │ └── base └── style.scss 必要ライブラリをインストール npm i gulp-iconfont gulp-conso
gulpでsvgからアイコンフォントを作成する ｜ Tips Note by TAM
オリジナルのアイコンをアイコンフォント化して使用する機会があったので、gulpでアイコンフォントを作成してみました。 フォルダ構成 / ├ package.json ├ gulpfile.js ├ node_modules/ └ dev/ ├ icons/ ←アイコンフォント用svgファイルを格納【A】 ├ *.svg └ templates/ └ iconfont.css ←テンプレートcssファイル【B】 ├ fonts/ ←gulpで生成したアイコンフォントの格納場所【C】 ├ iconfont.eot ├ iconfont.svg ├ iconfont.ttf └ iconfont.woff └ css/ ←gulpで生成したcssファイル【D】 svgファイルの作成【A】 gulp-iconfont というプラグインを使ってアイコンフォントを作成するので、注意点を確認してからsv
svgを圧縮するgulpプラグイン「gulp-svgmin」
2016年 2月3日 23時30分 7年前 gulpやgrunt等のタスクランナーは 今やWeb開発にとって 切っても切れない重要なツールの1つとなりました。 babel, type-script, coffee-scriptのコンパイル、cssやjavascriptの圧縮。 上記のassetファイル以外にも jpegやpng,SVGファイルのロスレス圧縮もよく耳にするようになりましたね。 特にSVGはファイルサイズがとても小さいので重宝しています。 ( * 画像と言っても、実態はxmlファイルです ) その上、画像編集ソフトを使って編集する時も レイヤー毎にパーツがちゃんと分けられている状態なので凄く使いやすいです。 今回は そのSVGに集点を置いてgulpでSVGファイルの圧縮を出来るプラグイン 「gulp-svgmin」の紹介をしていきます。 gulp-svgminのインストールはコ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
