Laravel ElixirをインストールしてBootstrapをインストールしてLaravelで実行した

PHPのフレームワークLaravelを使っていると、よく知らない単語のオンパレードになります。

一つ一つ調べてインストールしています。

以下のまとめと合わせてご覧ください。
https://urashita.com/archives/7249

今回は、Elixir、bowerのインストールです。

スポンサーリンク
スポンサーリンク

LaravelのElixirとは

image

Laravel 用に作られたgulpタスク群で、Laravelのタスク自動化ツールです。

フロントエンド(CSS/JS) と バックエンド(Laravel) をうまいこと繋いでくれます。

Elixirは、以下の様なタスクを自動で実行できます。

  • CSSの拡張言語であるLessやSassをCSSに変換する
  • CaffeScriptをJavaScriptに変換する
  • 複数のファイルを1ファイルに結合する
  • ファイルをミニファイする(余計な空白や改行を削る等してサイズを圧縮する)
  • ファイルの変更を監視してタスクを実行する
  • CSSやJavaScriptのファイル名にバージョンを付与する

Elixirのインストール

Elixirはnode.js上で動作する gulpというタスク管理ツールをベースとしています。

gulpをLaravelで使いやすくするためにラッピングしたツールがElixirです。

その為、node.jsgulpをインストールした上で、Elixirをインストールする必要があります。

まず、nodeのインストールは以下の公式サイトから、64-bit Windows Installer(.msi)をダウンロードしてインストールします。

https://nodejs.org/en/download/

私の場合、あらかじめインストールしてあったnode.jsを使ってみることにします。

次に、gulpのインストールです。

gulpコマンドのパスが通っていないようです。

環境変数PATHに、C:\Users\(ユーザー名)\AppData\Roaming\npm を追加しておきます。

gulpを実行してみます。

package.jsonの中身を確認します。

この設定で、gulp, laravel-elixir, bootstrap-sassがインストールされます。

うーん。。

どうやら、node.jsのバージョンが低すぎることが原因の模様です。

古いnode.jsをアンインストールして最新のnode.jsをインストールします。

これで、再度実行してみます。

今回はエラーなく、無事にインストールが完了しました。

image

インストールされたファイル群は、node_modules以下に配備されます。

image

BowerのインストールとBootstrapのインストール

BowerはTwitterが提供するCSSやJavaScriptのパッケージ管理システムです。

パッケージ管理システムについては以下にまとめました。
https://urashita.com/archives/7781

bowerをインストールして、初期化します。

bower.jasonというファイルが作成されます。

Bowerを使ってBootstrapをインストールします。
ここでは、Sass版のBootstrapをインストールします。

bower_componentsフォルダに必要なファイルがコピーされます。

image

gulpfile.jsを次のように編集します。

gulpを実行します。

publicフォルダ以下にcss、fonts、jsというフォルダが作成されて、以下のファイルが作成されました。

ちなみに、minifyされたファイルを生成するには、以下を実行します。

LaravelでCDNのBootstrapではなくてローカルのBootstrapを使う

LaravelのUIにおいて、CDNのBootstrapを使うと、お手軽にBootstrapを使うことができます。

コンテンツデリバリネットワーク(Contents Delivery Network, CDN)とは、Webコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。

CDNのBootstrapを使うには以下のように記述します。

このようにしておくと、確かにお手軽にBootstrapを使うことが出来ますが、インターネット経由でしか使うことが出来ません。

また、CDNのコンテンツに依存してしまうので、安定したシステムを構築するには危険です。

今回、public/css/app.css にBootstrapがインストールされたので、これを使うことにします。

以下のように記述を書き換えます。

このまま、NetBeans 8.1に付属のローカルWebサーバーで実行すると以下のエラーが出ます。

Failed to load resource, the server responded with a status of 404(Not Found) http://localhost:8000/css/app.css"

うーん。。。。何が間違っているんだろう?

試しに以下のように設定を変えてみました。

これで実行したところ、

Resource interpreted as Stylesheet but transferred with MIME type text/html

となってしまいました。

いろいろ調べる限り、最初の設定の方が正しいようです。

この設定で、Netbeans 8.1付属のWEBサーバーではなくて、Xampp付属のApacheで実行すると。。。。無事に動きました!

でも、NetBeans 8.1のWebサーバーだとPHPをステップ実行できて、いろいろ便利だったので、Apacheでしか動かないと少し(かなり?)不便になりそうです。どうしたものか。

本件は以下にまとめました。

Laravel (PHP)をNetBeans 8.1でステップ実行する
Laravelを使っていて統合開発環境(IDE)として何を使おうかと悩んでいました。 候補としては、NetBe...

まとめ

ここまでツール群が山ほどあって分かりにくいです。使い方は次の通りです。

1. HTML、CSS、JavaScriptで使いたいコンポーネントがある場合、

# bower install xxxx

で、bower_components以下にインストールする。

2. 次に、gulpfiles.jsを修正して、bower_components以下のファイルがマージされるようにする。

# gulp --production

で、以下のフォルダに配備される。

public\css\app.css
public\fonts\xxxx
public\js\app.js

3. アプリケーションから、作成されたapp.cssやapp.jsなどを使用する。

Laravel関連の日本語の書籍も出てくるようになりました。

最後まで読んでいただきありがとうござました。
この記事が気に入っていただけたらシェアしてくれると嬉しいです。