PHPのフレームワークLaravelを使っていると、よく知らない単語のオンパレードになります。
一つ一つ調べてインストールしています。
以下のまとめと合わせてご覧ください。
http://urashita.com/archives/7249
今回は、Elixir、bowerのインストールです。
目次
LaravelのElixirとは
Laravel 用に作られたgulpタスク群で、Laravelのタスク自動化ツールです。
フロントエンド(CSS/JS) と バックエンド(Laravel) をうまいこと繋いでくれます。
Elixirは、以下の様なタスクを自動で実行できます。
- CSSの拡張言語であるLessやSassをCSSに変換する
- CaffeScriptをJavaScriptに変換する
- 複数のファイルを１ファイルに結合する
- ファイルをミニファイする（余計な空白や改行を削る等してサイズを圧縮する）
- ファイルの変更を監視してタスクを実行する
- CSSやJavaScriptのファイル名にバージョンを付与する
Elixirのインストール
Elixirはnode.js上で動作する gulpというタスク管理ツールをベースとしています。
gulpをLaravelで使いやすくするためにラッピングしたツールがElixirです。
その為、node.jsとgulpをインストールした上で、Elixirをインストールする必要があります。
まず、nodeのインストールは以下の公式サイトから、64-bit Windows Installer(.msi)をダウンロードしてインストールします。
私の場合、あらかじめインストールしてあったnode.jsを使ってみることにします。
|
1 2 3 4 5 |
# node -v v0.10.30 # npm -v 1.4.21 |
次に、gulpのインストールです。
|
1 2 3 |
# npm install gulp # gulp -v sh: gulp: command not found |
gulpコマンドのパスが通っていないようです。
環境変数PATHに、C:\Users\(ユーザー名)\AppData\Roaming\npm を追加しておきます。
gulpを実行してみます。
|
1 2 3 |
# gulp -v [09:27:26] CLI version 3.9.0 [09:27:26] Local version 3.9.0 |
package.jsonの中身を確認します。
|
1 2 3 4 5 6 7 8 9 10 11 |
$ cat package.json { "private": true, "devDependencies": { "gulp": "^3.8.8" }, "dependencies": { "laravel-elixir": "^3.0.0", "bootstrap-sass": "^3.0.0" } } |
この設定で、gulp, laravel-elixir, bootstrap-sassがインストールされます。
|
1 2 3 4 5 6 7 8 9 |
# npm install npm ERR! fstream_type File npm ERR! fstream_class FileWriter npm ERR! code ENOENT npm ERR! errno 34 npm ERR! fstream_stack C:\Program Files\nodejs\node_modules\npm\node_modules\fstream\lib\writer.js:284:26 npm ERR! fstream_stack Object.oncomplete (evalmachine.<anonymous>:107:15) など、エラーが出まくり！ |
うーん。。
どうやら、node.jsのバージョンが低すぎることが原因の模様です。
古いnode.jsをアンインストールして最新のnode.jsをインストールします。
|
1 2 3 4 5 |
# node -v v4.2.4 # npm -v 2.14.12 |
これで、再度実行してみます。
|
1 |
# npm install |
今回はエラーなく、無事にインストールが完了しました。
インストールされたファイル群は、node_modules以下に配備されます。
BowerのインストールとBootstrapのインストール
BowerはTwitterが提供するCSSやJavaScriptのパッケージ管理システムです。
パッケージ管理システムについては以下にまとめました。
http://urashita.com/archives/7781
bowerをインストールして、初期化します。
|
1 2 3 4 5 6 |
# npm install -g bower # bower -v 1.7.2 # bower init |
bower.jasonというファイルが作成されます。
Bowerを使ってBootstrapをインストールします。
ここでは、Sass版のBootstrapをインストールします。
|
1 |
# bower install bootstrap-sass-official --save |
bower_componentsフォルダに必要なファイルがコピーされます。
gulpfile.jsを次のように編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
var elixir = require('laravel-elixir'); /* |-------------------------------------------------------------------------- | Elixir Asset Management |-------------------------------------------------------------------------- | | Elixir provides a clean, fluent API for defining some basic Gulp tasks | for your Laravel application. By default, we are compiling the Sass | file for our application, as well as publishing vendor resources. | */ var elixir = require('laravel-elixir'); var paths = { 'jquery': 'bower_components/jquery/', 'bootstrap': 'bower_components/bootstrap-sass/assets/' }; elixir(function(mix) { mix.sass('app.scss') // app.scssをコンパイルして、public/css/app.css に出力 // Bootstrapのフォントを public/fonts/bootstrapディレクトリにコピー .copy(paths.bootstrap + 'fonts/bootstrap/**', 'public/fonts/bootstrap') // jquery.jsと bootstrap.jsを結合して、public/js/app.jsに出力 .scripts([ paths.jquery + "dist/jquery.js", paths.bootstrap + "javascripts/bootstrap.js" ], 'public/js/app.js', './'); }); |
gulpを実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
# gulp [17:53:28] Using gulpfile c:\xampp\htdocs\blog\gulpfile.js [17:53:28] Starting 'default'... [17:53:28] Starting 'sass'... Fetching Sass Source Files... - resources\assets\sass\app.scss Saving To... - public\css\app.css [17:53:28] Finished 'default' after 550 ms [17:53:29] gulp-notify: [Laravel Elixir] Sass Compiled! [17:53:29] Finished 'sass' after 1.33 s [17:53:29] Starting 'copy'... Fetching Copy Source Files... - bower_components/bootstrap-sass/assets/fonts/bootstrap/**/**/* Saving To... - public/fonts/bootstrap [17:53:29] Finished 'copy' after 60 ms [17:53:29] Starting 'scripts'... Fetching Scripts Source Files... - bower_components\jquery\dist\jquery.js - bower_components\bootstrap-sass\assets\javascripts\bootstrap.js Saving To... - public/js/app.js [17:53:30] gulp-notify: [Laravel Elixir] Scripts Merged! [17:53:30] Finished 'scripts' after 895 ms |
publicフォルダ以下にcss、fonts、jsというフォルダが作成されて、以下のファイルが作成されました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
public/css public/css/app.css public/fonts public/fonts/bootstrap public/fonts/bootstrap/glyphicons-halflings-regular.eot public/fonts/bootstrap/glyphicons-halflings-regular.svg public/fonts/bootstrap/glyphicons-halflings-regular.ttf public/fonts/bootstrap/glyphicons-halflings-regular.woff public/fonts/bootstrap/glyphicons-halflings-regular.woff2 public/js public/js/app.js public/js/app.js.map |
ちなみに、minifyされたファイルを生成するには、以下を実行します。
|
1 |
# gulp --production |
LaravelでCDNのBootstrapではなくてローカルのBootstrapを使う
LaravelのUIにおいて、CDNのBootstrapを使うと、お手軽にBootstrapを使うことができます。
コンテンツデリバリネットワーク(Contents Delivery Network, CDN)とは、Webコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。
CDNのBootstrapを使うには以下のように記述します。
|
1 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> |
このようにしておくと、確かにお手軽にBootstrapを使うことが出来ますが、インターネット経由でしか使うことが出来ません。
また、CDNのコンテンツに依存してしまうので、安定したシステムを構築するには危険です。
今回、public/css/app.css にBootstrapがインストールされたので、これを使うことにします。
以下のように記述を書き換えます。
|
1 |
<link rel="stylesheet" href="{{ URL::asset('css/app.css') }}" type="text/css"> |
このまま、NetBeans 8.1に付属のローカルWebサーバーで実行すると以下のエラーが出ます。
Failed to load resource, the server responded with a status of 404(Not Found) http://localhost:8000/css/app.css”
うーん。。。。何が間違っているんだろう？
試しに以下のように設定を変えてみました。
|
1 |
<link rel="stylesheet" href="{{ URL::asset('public/css/app.css') }}" type="text/css"> |
これで実行したところ、
Resource interpreted as Stylesheet but transferred with MIME type text/html
となってしまいました。
いろいろ調べる限り、最初の設定の方が正しいようです。
|
1 |
<link rel="stylesheet" href="{{ URL::asset('css/app.css') }}" type="text/css"> |
この設定で、Netbeans 8.1付属のWEBサーバーではなくて、Xampp付属のApacheで実行すると。。。。無事に動きました！
でも、NetBeans 8.1のWebサーバーだとPHPをステップ実行できて、いろいろ便利だったので、Apacheでしか動かないと少し(かなり？)不便になりそうです。どうしたものか。
本件は以下にまとめました。
まとめ
ここまでツール群が山ほどあって分かりにくいです。使い方は次の通りです。
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関連の日本語の書籍も出てくるようになりました。
最後まで読んでいただきありがとうござました。
この記事が気に入っていただけたらシェアしてくれると嬉しいです。
コメント