Laravelでbootstrapとlessを使う

2014年 5月14日 PHP Laravel

Tweet

海外では人気急上昇中らしいPHPフレームワークLaravelを試しています。
IoCコンテナ(DIコンテナ)が装備されているようです。
scaffoldingは標準でサポートされていません。

最近のPHPフレームワークの動向としては、Rails的なアプローチを目指したけど、やっぱりモンキーパッチによる解決ができないし、うまくいかねーなってかんじで、Java的なアプローチを取り入れるものの人気が出てきてるかんじでしょうか。

さて、本題のLaravelでbootstrapとLessを使う方法です。
LessのコンパイルはGruntではなくPHPで行います。（ラクなので）
LaravelではBassetというcssやJavaScriptなどのアセット管理ツールがメジャーなようですが、http://raffworks.com/laravel-4-assets-basset-less-part-1/ を読むと、結構設定を書かないといけなかったり、Lessを変更したらコマンドラインでコンパイルする必要があったりして、面倒なので、Bassetが最終的にlessのコンパイルで使用しているlessphpのみを使用します。

インストールからscaffoldingまでは、↓のまま行います。
http://qiita.com/razokulover/items/9cfe62223e0a0bc5444f

ちなみに、scaffoldingしても生成されるViewファイルにはパスが書かれているだけです。
https://github.com/JeffreyWay/Laravel-4-Generators/issues/314

ライブラリの追加

composer.jsonに以下を追加します。

"oyejorge/less.php": "~1.5"

本家？の”leafo/lessphp”だとbootstrapでコンパイルエラーとなったので”oyejorge/less.php”を使います。

$ composer update

bootstrapの追加

publicディレクトリにjs、fonts、lessのディレクトリを作り、ダウンロードしてきたbootstrapをコピーします。
また、lessをコンパイルした際の出力用にcssディレクトリも作ります。次の構成になります。

public
├── css
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ └── glyphicons-halflings-regular.woff
├── js
│ └── bootstrap.min.js
└── less
└── bootstrap
├── alerts.less
├── badges.less
│ ..
└── wells.less

application.lessの作成

public/lessにapplication.lessを作り、とりあえずbody-bgを変えてみます。

@import "bootstrap/bootstrap.less";
 
@body-bg: #ccc;

lessコンパイラの設定

app/start/global.phpに次を追記します。

$less = new lessc;
$less->checkedCompile(public_path() . '/assets/less/application.less', public_path() . '/assets/css/application.css');

レイアウトファイルの作成

app/views/layouts/default.blade.phpを作成し、生成されたcssとJavaScriptを設定します。

{{ HTML::style('css/application.css') }}
{{ HTML::script('js/bootstrap.min.js') }}

ブラウザでページを開くと変更したapplication.lessがコンパイルされて、application.cssが生成されます。

※ githubにソースコードを置きました。

前へ 次へ