BootstrapはやっぱりHTMLの記述量が多いので今話題のLess化してしまおうという試み。
開発環境でのみコンパイルを行い、公開時にはコンパイル済みファイルを参照するようにもしてみる。
Packageをインストール
git clone --recursive git://github.com/kriansa/fuel-less.git fuel/packages/less
fuel/app/config/development/config.php
'auto_load' => array(
'packages' => array(
'less',
)
)
コンパイル環境を確認
CentOS6ならこのあたり入れておく必要があるかも
sudo yum install gcc gcc-c++ ld-linux.so.2 libstdc++.so.6
設定を変更
cp fuel/packages/less/config/less.php fuel/app/config/
cp fuel/packages/less/config/less.php fuel/app/config/development/
fuel/app/config/less.php
<?php
return array(
/* 'less_source_dir' => APPPATH.'assets/less/', //元ファイル格納用
'less_output_dir' => DOCROOT.'assets/css/', //公開用コンパイル済みファイル格納用
'less_compiler' => 'Less\\Compiler_Node',
//'less_compiler' => 'Less\\Compiler_Lessphp',*/
);
fuel/app/config/development/less.php
<?php
return array(
'less_source_dir' => APPPATH.'assets/less/', //元ファイル格納用
'less_output_dir' => DOCROOT.'assets/css/', //公開用コンパイル済みファイル格納用
'less_compiler' => 'Less\\Compiler_Node',
//'less_compiler' => 'Less\\Compiler_Lessphp',
);
Bootstrapを用意
Githubからプロジェクトをダウンロードし、lessフォルダのみリネームして格納
- https://github.com/twbs/bootstrap
- ダウンロードしたlessフォルダをbootstrapにリネームし保存
pushd ~/
git clone https://github.com/twbs/bootstrap.git
mkdir fuel/app/assets/less -p
cp bootstrap/less fuel/app/assets/less/bootstrap -r
popd
開発環境のみコンパイルを実行するように設定
touch fuel/app/config/event.php
fuel/app/config/event.php
return array(
'fuelphp' => array(
'controller_started' => function()
{
if( Fuel::$env == Fuel::DEVELOPMENT ){
//compile less
$css = Asset::less('style.less');
}
},
),
);
テスト
ソース
fuel/app/assets/less/style.less
@import "bootstrap/bootstrap.less";
h1{
.text-success;
}
h1{
.glyphicon;
.glyphicon-ok;
}
h1:before{
margin-right:5px;
}
p{
.text-warning;
}
fuel/app/views/template.php
<html>
<head>
<?php echo Asset::css('style.css'); ?>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<h1>success</h1>
<p>warning</p>
<?php /*echo $content;*/ ?>
</div>
</div>
</div>
</body>
</html>
結果
いい感じ！