FuelPHPでLESSを使えるようにする

公開: 2013-12-19 11:05
更新: 2016-04-29 06:03
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ファイルが作成される場所となります。名前は任意で結構です。
FuelPHPでLESS


3.クローンしたfuel-lessをpackagesディレクトリに追加

ディレクトリ名をfuel-lessからlessに変更したほうがなんかスッキリするのでしましょう。
FuelPHPで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を使ってみたい!
なんて方の参考になれば幸いです。

ではでは♪


この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。