人生初のLTハシゴ – WordBench 東京編

ゆるりとした三鷹編から電車移動で東京編@渋谷 GMO へ。(GMO の名前から連想して、電車の中で前の会社での大顧客だった某企業名を思い出せなくて唸ってたのは内緒。)

WordBench東京 6月勉強会 LT 大会 @ 渋谷 GMO Yours – WordBench東京 | Doorkeeper

に参加してきました。

ドーンと大きなビル。入館パス。警備員さん。まじか。同じWordBenchの会場とは思えないぜ…。

“人生初のLTハシゴ – WordBench 東京編” の続きを読む

【postcss-inline-svg】Sassを使いつつPostCSSでSVGをCSSでもインライン化してみた

GWに私は何をしているのでしょうか。

前回に引き続き、SVGについて。

前回のやり方ではCSSに読み込むスプライト画像が出来ないのでどうしようかなあと調べていたら、またまた良いものを発見しました。

TrySound/postcss-inline-svg: PostCSS plugin to reference an SVG file and control its attributes with CSS syntax

postcss-inline-svg というライブラリです。

CSSそのものにSVGをインライン化するのを自動化してくれるライブラリ。神発見したと思った。って言っても、css inline svg npm で検索すれば直ぐ出てくるんだけども。

問題はPostCSSで作られているということです。Sassに慣れきってるのでPostCSS環境に合わせるの面倒・・・と思ったけれど、そこはnpm-scriptsの良いところ。これまでも、node-sassでcssに変換した後にautoprefixerを通していたので、さらにpostcss-inline-svg すれば良いだけでは・・・!?

と思って、package.jsonに

"svginline": "npx postcss *.css --use postcss-inline-svg -d ../ --no-map",

としたら出来ちゃった。IE11でも動作しちゃった、のでご報告したいと思います。npm-scriptsを使ってる前提です。

“【postcss-inline-svg】Sassを使いつつPostCSSでSVGをCSSでもインライン化してみた” の続きを読む

SVGスプライトをnpm-scriptsで作ってみる

GWの中日、如何お過ごしでしょうか。仕事をしなきゃなんだけど、これっぽっちも気力が沸いてこない私はお勉強タイムに充てることにしました。

ターゲットはSVG。

ココの処ずっと、あーSVGに移行しなきゃなーと思いつつ、gulpか・・・という気持ちになって中々腰が上がらなかったのですが、gulpに出来ることがnpm-scriptsに出来ないはずが無いと思って調べてみました。

結果、凄い分かりやすいページを発見!これをいわゆるSVGスプライトと言っていいかは謎ですが。

Workflow for creating SVG sprites with NPM scripts – Oleg Varaksin – Medium

で、ほぼまるっとコレを参照しつつ、パスとか書き出し方をコソコソ自分好みに変えただけなのですが色々学べたのでメモしておきます。 “SVGスプライトをnpm-scriptsで作ってみる” の続きを読む

【WordPressのスリム化計画その2】CSSとJSファイルの管理にnpm-scriptsを使おう

こんにちは、mimiです。

WordPressのスリム化計画その2、CSSとJSファイルの管理の続きです。(その1はこちらから

もうすっかりSASSとjshintが無いと生きていけない体になってしまったので、Wordpressでも使えるようにしてみました。(SASSもStylusに移行するべきかなあ・・・とも思い始めています。)
browserifyしたりminifyしたりしてファイルサイズを減らすスリム化です。

gulpを使った方法は結構出回っていると思うし、npm-scriptsを使ったやり方を書いてみます。

npm-scriptsってなあに?という話は

Grunt/Gulpで憔悴したおっさんの話 – MOL
とか
npm-scripts で Web フロントエンド開発を管理する – アカベコマイリ
なんかをご参照ください。

もちろん既に、

NPM Run WordPress – The Codestead

とか、npm-scriptsでWordpressを扱っているものはあるのですが、私的には単純にSASSファイルとJSファイルの監視と構文チェック、結合、minifyが出来れば良いので自作してみました。

“【WordPressのスリム化計画その2】CSSとJSファイルの管理にnpm-scriptsを使おう” の続きを読む