FuelPHPでLESSを使えるようにする
CSSの記述が5倍速くなると言われているLESSをFuelPHPに入れてみようというお話です。
今回はこちらのFuelPHP用にパッケージ化されたfuel-lessを使用します。クローンしておきましょう。
⇒ https://github.com/kriansa/fuel-less
git clone –recursive git://github.com/kriansa/fuel-less.git
7ステップに分けて実装していきます。
1.assetsまでのパスをdefineしておく
まずはassetsまでのパスを次のようにASSETSPATHとして定義しておきます。
public/index.php
/**
* The path to the framework core.
*/
define(‘COREPATH’, realpath(__DIR__.’/../fuel/core/’).DIRECTORY_SEPARATOR);
/**
* The path to the assets.
*/
define(‘ASSETSPATH’, realpath(__DIR__.’/../public/assets/’).DIRECTORY_SEPARATOR);
2.assetsにlessとccssディレクトリを作成
lessはLESSファイルを置く場所で、
ccssはコンパイルされたCSSファイルが作成される場所となります。名前は任意で結構です。
3.クローンしたfuel-lessをpackagesディレクトリに追加
ディレクトリ名をfuel-lessからlessに変更したほうがなんかスッキリするのでしましょう。
4.LESSで使うディレクトリを指定する
先ほどassets内に用意したディレクトリを指定します。
fuel/packages/less/config/less.phpをfuel/app/config/less.phpにコピーし次のように書き換えてください。
fuel/app/config/less.php
return array(
‘asset’ => array(
‘less_source_dir’ => ASSETSPATH.’less/’,
‘less_output_dir’ => ASSETSPATH.’ccss/’,
‘less_compiler’ => ‘Less\\Compiler_Node’
)
);
5.LESSをAlways Loadに追加
appのconfigに次のように追記し、lessパッケージを読み込むようにします。
デフォルトだと配列が全体的にコメントアウトされているのでそれを解除してください。
fuel/app/config/config.php
/**************/
/* Always Load */
/**************/
‘always_load’ => array(
‘packages’ => array(
‘less’,
//’orm’,
),
6.assetの読み込みディレクトリに追加
ccssからもcssファイルを取得出来るようにします。
fuel/core/config/asset.phpをfuel/app/config/asset.phpにコピーし、foldersのcssの配列にassets/ccssを追加してください。
fuel/app/config/asset.php
‘folders’ => array(
‘css’ => array(‘assets/ccss’),
‘js’ => array(),
‘img’ => array(),
),
7.パーミッションの整理
実行ファイルとか書き込みディレクトリがあるのでそのパーミッションを変更します。
nodeに実行権を与える。（お使いのサーバーに合わせたものだけで大丈夫です。だいたいlinux。）
chmod +x fuel/packages/less/vendor/node/linux/node
chmod +x fuel/packages/less/vendor/node/mac/node
chmod +x fuel/packages/less/vendor/node/win32/node.exe
ccssを777に変更する。
chmod 777 public/assets/ccss/
※余談ですが、fuelPHPを初期インストールした場合fuel/app/cache、fuel/app/logs、fuel/app/tmpのパーミションも777に変更しましょう。
Node.jsが動かなければLessphpを
Node.jsが動かない時は、Lessphpをコンパイラーに指定してください。
fuel/app/config/less.php
return array(
‘asset’ => array(
‘less_source_dir’ => ASSETSPATH.’less/’,
‘less_output_dir’ => ASSETSPATH.’ccss/’,
‘less_compiler’ => ‘Less\\Compiler_Lessphp’
)
);
以上で準備完了です。
lessディレクトリ内にLESSファイルを作成し、viewファイルとかで
echo Asset::less(‘test.less’);
なんかを呼んでみましょう。
無事にコンパイルされたccss内のCSSファイルが呼ばれていればOKです♪
LESSはコーディング速度も速くなるし、
CSSの記述にミスがあればエラー通知してくれるし、
なんかカッコいいしの良いこと尽くめなので重宝しております。
fuelPHPでLESSを使ってみたい！
なんて方の参考になれば幸いです。
ではでは♪