【Middleman】の便利な機能をご紹介。 | DevelopersIO
前回まで、構築の流れをご紹介しましたが、 今回は、出力する際に便利な機能をいくつかピックアップしてご紹介していきます。 アジェンダ 設定ファイルについて ファイルサイズの最適化 HTMLの圧縮 CSS・JavaScriptの圧縮 画像圧縮 GZIPで圧縮 ローカルデータ LiveReload 設定ファイルについて プロジェクファイルを作成するとルート階層に、以下の２つのファイルがあります。 各ファイルに、プロジェクトの各設定していきます。 Gemfile config.rb Gemfile # If you have OpenSSL installed, we recommend updating # the following line to use "https" source 'http://rubygems.org' gem "middleman", "~>3.0.12" conf
[Middleman 3][SCSS]初めてのMiddleman：SCSSのコンパイルとテンプレートの基礎
前回の記事初めてのMiddleman：パーシャルを使ったコンテンツのモジュール化でパーシャル機能を使って再利用可能なモジュールを作ることができました。今回はSCSSをコンパイルしてテンプレートフォーマットについて勉強してみます。 とりあえずコンパイルしてみる 何か設定が必要なのか迷ってしまいますが、何もいりません。config.rbをいじる必要もありません。 SCSSファイルを作る sourceディレクトリにstyle.css.scssを作って簡単なSCSSを書いてみます。 $color: #000; body { background: $color; } ビルド $ middleman buildを実行してみます。buildフォルダにstyle.cssができていれば成功です。 /* line 3, /Users/nukos/Projects/example.com/source/sty
![[Middleman 3][SCSS]初めてのMiddleman：SCSSのコンパイルとテンプレートの基礎](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
[ Middleman で超速プロトタイピング ] #01 Middleman の基礎を一気に学ぶ | DevelopersIO
前回は Middleman を習得する前準備として Haml という HTML の拡張メタ言語について学びました。 #00 Haml 再入門 Haml は Middleman においてレイアウトファイルやテンプレートファイルを作成するのに使用します。デフォルトでは Haml ではなく ERb という Ruby 標準のテンプレートファイル形式が使われており、こちらは PHP や JSP と非常によく似た書式となっています（※拡張子はerb）。 身も蓋もないことを言ってしまうと、Haml を知らなくても ERb 形式で書くことで Middleman を使うことは可能です。ソースコード自体も標準の HTML 内に Ruby のコードが埋め込まれたような見た目なので、学習コスト自体は ERｂ のほうが低いかもしれません。しかしそれを考慮したとしても、コーディング自体の効率性やコードの見通しの良さか
[ Middleman で超速プロトタイピング ] #00 Haml 再入門 | DevelopersIO
Web アプリケーション開発の初期段階においては、そのアプリのモックアップをよく作ったりします。いわゆるプロトタイピングというヤツですね。本実装となるともちろんサーバーサイドは Java や PHP などで実装し、それに伴ってフロントエンドもそれらのプログラミング言語によるテンプレートエンジンをベースに HTML で作り上げる訳です。しかしプロトタイピングの段階ではそういったプログラミング言語に頼ることなく、HTML だけで一通りの静的な Web ページを作ることになります。 実はこのモックアップ作成という名のプロトタイピング、HTML だけで作るという理由からかなりの重労働だったりします。画面数の少ない小規模な Web アプリケーションであればどうってことないですが、業務系の Web アプリケーションとなると10画面、20画面は当たり前。時には40画面以上にも及ぶことも少なくありません。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://github.com/smt/middleman-kss/blob/master/config.rb
Get Current Path of Page in Middleman Layout File
Middleman: ファイルサイズ最適化
Loading...
http://localhost:4567/__middleman/sitemap/