laravelでのbootstrap + scss + gulp の利用

laravel5で顧客管理webアプリを作成したのでメモの続きです。

laravelで標準で利用出来るbootstrap、scss、gulpの設定方法です。

bootstrapの利用

laravelプロジェクトのresource > assets > sass > app.scss のファイルに下記が記述されているので//を外します。

app.scss

// @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
// ↓
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

これでbootstrap利用の準備が完了です。

gulpのインストール

laravelではLaravel ElixirというLaravel 用に作られたgulpタスクが使えます。
laravelのルートディレクトリで下記コマンドで必要なモジュールをインストールしましょう。

$ npm i

エラーがなければgulp、laravel Elixir、bootstrap-sassがインストールされたかと思います。

gulpでscssをコンパイル

gulpコマンドでElixirが作動し、自動的にapp.scssをコンパイルしてくれます。
app.cssには前述のbootstrapのインポートが記載されているのでこれで、
bootstrapのcssが
コンパイル先の、public > css > app.css に記載されます。

$ gulp


いちいちscssの編集でgulpを入力するのが面倒な場合は、

$ gulp watch

で変更を監視しましょう。こちらもgulpfile.jsになにも記入せずとも利用可能です。
本当にいたれりつくせりですね。