Laravel ElixirでMaterial KitのSassをCSSにコンパイルする

with コメントはまだありません
Material Kitはマテリアルデザインを基調としたBootstrapのフレームワークです。Laravelでこれをコンパイルする方法をご紹介します。

 

1.インストールするもの

Laravel上でMaterial KitのSassをCSSにコンパイルするのにLaravel Elixirを使用します。

 

Larval Elixirとは?

こちらのドキュメントでは以下のようにLaravel Elixirについて紹介されています。
Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks for your Laravel application. Elixir supports several common CSS and JavaScript pre-processors, and even testing tools.
Larval Elixerとはgulpタスクをまとめてくれている堪能なAPIで、CSSやJSのプリプロセッサー、さらにはテストツールにまで対応しているとのことです。
Laravel上でのSassのコンパイル過程をシンプル化してくれています。
このLaravel Elixirを作動するのに必要なのがNode.jsです。

 

Node.jsのインストール

nodeがインストールされているか以下のコマンドで確認します。
上記のコマンド実行後、以下にv6.11.2などのように、バージョンが表示されていたらnodeがインストールされている証拠です。
インストールされていなければ、こちらのページでNode.jsをインストールしましょう。

 

Elixirのインストール

このコマンドでインストールを完了します。

 

2. Laravel ElixirでMaterial KitのSassをCSSにコンパイルする

今回CSSに変換するMaterial kitのSassファイルは以下のpublic/assets/sass/material-kit.scssです。
そして、上のSassファイルのコンパイル結果であるcssファイルは以下のpublic/assets/css/material-kit.cssになります。
gulpfile.js内で、sassをcssに変換するための記述をします。
sassメソッド内にelixirまわりの処理を記述します。

 

elixir(function(mix) {
    mix.sass([
        ‘コンパイルするsassファイル’,
    ], ‘コンパイル結果が出力されるcssファイル’);
});

 

/gulpfile.js
 

 上記のように、cssにコンパイルするsassファイルと、変換された後のcssファイルを設定できたら以下のコマンドを実行してコンパイル完了です。