SassとGruntとVagrantで考えるWordPressテーマ設計術
WordPressのテーマを配布、プラグイン解説や日本語版の配布、テンプレートタグによるカスタマイズ方法を紹介、WordPressのリファレンスサイトを目指しています。 このリニューアルにあたって、 GruntとVagrantを導入し、開発環境を一新しました。 WordPress環境開発は、Varying Vagrant Vagrantsを使用しています。 子育てをしながらだと、 1日で作業する時間は限られてくるので、中々進みませんが…。 閃きだけは降り注ぐので、 それを後は空いた時間に実装するだけ(^^ゞ 今回もまたWordPressのテーマ設計を、 SassとGruntとVagrantを使って、 どこまで効率的に、表示速度も含めて開発できるかを念頭に設計しています。 まぁ、もうちょっとやりようはあると思うのですが、 圧倒的に育児で学習時間が足りてないので、 この内容で勘弁して下さいｗ
Gruntで画像最適化 - Qiita
背景 画像最適化の際にGUIを使うのは面倒 でもpngquantとかで都度コマンド実行するのも面倒 Gruntでcssとかscriptとまとめてやりたい 結論 grunt-imageを使うのが良さそう https://www.npmjs.org/package/grunt-image imageminと比較して最適化率にほぼ差がない これは私の環境だけかもしれないけど、imageminのpluginが動かないものがあったり、デフォルトでgif圧縮ができなかったり、バージョン落とすとgifは動くけどpngのpluginが〜とか、ちょっと不安定な感じがした 検証 1. grunt-pngmin 最適化に使ってるもの pngquant Gruntfile.jsへの記述 pngmin: { target1: { options: { // pngquant実行のオプションをここに speed: 1
Web制作自動化ツールGrunt入門 インストール＆カスタムタスク編 | SONICMOOV LAB
最近Javascriptメインになりつつあるフロントエンジニアのピーターです。 今回は社内でも標準化されてきたGruntについてまとめたいと思います。 目次 Gruntとは Gruntを使用するための環境構築 Gruntのインストール手順 カスタムタスクサンプル Gruntとは Javascriptで記述するタスクランナーのことです。 たとえば、大きめのWebサイトを作ってるとします。 CSSはSASSで記述してるのでコンパイルが必要です。修正毎にコンパイルするの結構手間ですが、エディターを使えばなんとかなります。 スタイルガイドも作ってほしいと言われたので、これも修正毎に出力しないといけません。 他にもCSSだけでなくPNG圧縮もしないと、、 となると本来のコーディング作業時間がどんどん削られてしまいます。 こういった 「SASSのコンパイル」「スタイルガイドの出力」「PNG圧縮」といっ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
