【Gulp・Emmet】gulp-sugar-srcsetでimg要素のsrcset属性を楽に書く。さらにEmmetで楽に書く。

HTMLコーディングをしていて、常々面倒だなと思っているのが、画像のRetina対応です。 画像の書き出しについては、Photoshopのアセット機能とOVENという便利なプラグインを使用すれば楽に書き出し作業ができるようになりましたが、 コーディングでimgタグを書く時のsrcsetの記述が非常に面倒に感じていました。 何とか楽に書く方法は無いものかと思い、まずEmmetで探してみた所、img:s と書いて展開すれば、さくっと<img srcset="" src="" alt=""> という状態になるという事はわかりました。 ただ、面倒くさいのはその先の作業で、src属性とsrcset属性にそれぞれパスを書かなければならないのを何とかしたいわけです。 こういうのはGulpのようなタスクランナーが得意だろうと思い探してみた所、良さそうなものを発見しました。 gulp-sugar-srcsetという何とも甘い香りのするプラグインで、srcsetの苦みを軽減できればと思います。

Fatal error: Uncaught Error: Call to a member function id() on array in /home/web-rice/www/noze.space/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php:36 Stack trace: #0 /home/web-rice/www/noze.space/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(538): CrayonFormatter::format_code('', Array, Object(CrayonHighlighter)) #1 [internal function]: CrayonFormatter::delim_to_internal(Array) #2 /home/web-rice/www/noze.space/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(516): preg_replace_callback('#()#msi', 'CrayonFormatter...', '<img src="image...') #3 /home/web-rice/www/noze.space/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php(166): CrayonFormatter::format_mixed_code('<img src="image...', Object(CrayonLang), Object(CrayonHighlighter)) #4 /home/web-rice/www/noze.space/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php(186): CrayonHighlighter->process() #5 /home/web-rice/www/noze.space/wp/wp-co in /home/web-rice/www/noze.space/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 36