HatenaPocketLINELINE今回やりたいことLaravelを使ったプロジェクトをNetBeansで開発する際、app.scssを編集して保存する度に、自動コンパイルされて、ドキュメントルート(public)下のcssフォルダ内にapp.cssファイルが作成されるようにする。Laravelなので、Elixirによる自動コンパイルを試してみたいが、現状そちらに関してあまり詳しくないので、今回は簡単にできそうな方法(Ruby+Sass+Compass)でwindows環境に上記機能を導入する。8.1Rubyを入れよう!今回の方法では、Rubyが必要となります。Rubyが導入されている方はこちらは読み飛ばしていただいて結構です。Rubyの導入方法も色々とあるかと思いますが、今回は最も簡単であろうと思われる、「RubyInstaller」を利用した方法で導入します。RubyInstallerのページに行きます。各人の環境に応じて、最新版のファイルをダウンロードします。(x64)」をダウンロードします。ダウンロードしたファイルを実行します。今回ダウンロードしたファイル名は「rubyinstaller-2.3.1-x64.exe」となります。実行すると、同意画面になりますので、「同意する」にチェックをし、「次へ」進みます。インストール先は、デフォルトのままで良いかと思います。複数バージョンのRubyが入っている場合は競合する可能性がありますが、特にそういった心配がなければ「Rubyの実行ファイルへの環境変数PATHを設定する」にチェックをつけておきましょう。他のチェックボックスは、Rubyで開発するわけではないので、今回はチェック不要です。これで、WindowsへのRuby導入は完了です!SassとCompassを導入しようSassってなに?読み方は「サース」と読み、メタ言語の一種です。メタ言語というのは、ある言語を生成するための言語で、SassはCSSを生成するためのメタ言語です。どんなメリットがあるかというと、CSSを書くのに、変数や関数、演算、セレクタの入れ子等が使用できます。Sassの記法をCSSとの互換性を持たせた形で作られたのが、SCSSです。Rubyで動くため、上記のRubyのインストールが必要だったわけです。Compassってなに?読み方は、「コンパス」です。Sassのフレームワークだそうです。Sassとセットで導入されることが多いようで、使いこなせれば、色々と簡略化できそうなので、今回こちらも入れておきます。いざ、導入まず、コマンドプロンプトを開きます。キーボードの「Windowsキー+R」を押して出現する、「ファイル名を指定して実行」ダイアログのテキストボックスに「cmd」と入れてエンターが最速じゃないかと思います。sassと入力し、エンターを押します。Rubyのインストール時に環境変数PATHも設定してあるので、gemコマンドも問題なく実行できるかと思います。下図のようになり、Sassのインストールが完了します。次は、Compassです。compassを実行します。下図のようになれば、Compassもインストール完了です。NetBeansの設定をしよう最後に、NetBeansの設定です。全般の設定NetBeansを立ち上げ、ツール→オプションを開きます。「HTML/JS」アイコンの、「CSSプリプロセッサ」タブを開きます。「Sassパス」に、「sass.bat」のフルパスを入力します。自動で「sass」のフルパスが入力されているかもしれませんが、「sass.bat」と、拡張子まで入っているか確認しましょう。windows環境だからかわかりませんが、私の環境では「sass」では動作しませんでした。プロジェクト毎の設定プロジェクト名のところで右クリックをし、構成を設定→カスタマイズを開きます。「CSSプリプロセッサ」項目の「Sass」タブ、「保存時にSassファイルをコンパイル」にチェックをつけます。ウォッチの「入力」に、Sassファイル、「出力」にCSSファイルのパスを、ドキュメントルート(Laravel標準であれば「public」)からの相対パスで、それぞれ入力します。「コンパイラ・オプション」に「–compass」と入れておくと、今回Compassも導入しているので、そちらの機能も使用することが可能です。以上で設定は完了です。この状態で、Laravelのassets内にある「app.scss」を編集して保存すると、public内の「css」フォルダに、app.scssがコンパイルされて出力される「app.css」が作成されるようになります。コメントをキャンセルメールアドレスが公開されることはありません。