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/nodechmod +x fuel/packages/less/vendor/node/mac/nodechmod +x […]
View More
