*

Laravel 5.1でLaravel Mixを使ってみた

公開日: : 最終更新日:2018/09/23 Laravel5, PHP

本投稿の目的は、Laravel 5.1でLaravel Mixを利用してSassをCSSへコンパイルすることです。

Laravel MixはLaravel 5.4提供されているCSSとJavaScriptのPre-Processorsであり、webpackで利用できるAPIを提供しています。Laravel 5.1ではLaravel Mixの代わりにLaravel Elixirが搭載されており、webpackではなくGulpを利用します。

動作確認環境は以下となります。

  • Windows 10 Pro
  • Xampp 7.1.1
  • Laravel 5.1
  • npm 3.10.10
  • node 6.10.2

Laravel Mixインストールの準備

Laravel 5.4の「《rootフォルダー》\package.json」を参考してLarvel 5.1のpackage.jsonにLaravel 5.1以後追加された内容を追加します。scriptとdependenciesの一部です。

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.0.0",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "dotenv": "^2.0.0",
    "express": "^4.14.0",
    "laravel-elixir": "^4.0.0",
    "laravel-mix": "^0.12.1",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }
}

 

GithubなのでLaravel 5.4をダウンロードし、Laravel 5.4の「《rootフォルダー》\webpack.mix.js」をLarvel 5.1にコピーペーストします。

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

 

Laravel 5.4の「《rootフォルダー》\resources\assets\js」配下のすべてのファイルをLarvel 5.1にコピーペーストします。

Laravel 5.4の「《rootフォルダー》\resources\assets\sass\app.scss」の内容をLarvel 5.1のapp.scssに追加あします。

Laravel 5.4の「《rootフォルダー》\resources\assets\sass\_variables.scss」をLarvel 5.1にコピーペーストします。

 

expressパッケージとexpressパッケージのインストールします。

《ルートフォルダー》>npm install -g express
C:\Users\《ユーザーフォルダー》\AppData\Roaming\npm
`-- express@4.15.3
  +-- accepts@1.3.3
  ~
《ルートフォルダー》>npm install -g npm install -g cross-env
~
`-- cross-env@5.0.1
  +-- cross-spawn@5.1.0
  | +-- lru-cache@4.1.1
  | | +-- pseudomap@1.0.2
  | | `-- yallist@2.1.2
  | +-- shebang-command@1.2.0
  | | `-- shebang-regex@1.0.0
  | `-- which@1.2.14
  |   `-- isexe@2.0.0
  `-- is-windows@1.0.1

 

Laravel Mixのインストール

Laravel Mixをインストールします。

《ルートフォルダー》>npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

《ルートフォルダー》\node_modules配下にモジュールがインストールされていることを確認します。

 

Laravel Mixを実行

Laravel Mixを実行します。

《ルートフォルダー》>npm run dev

> @ dev 《ルートフォルダー》
> npm run development


> @ development 《ルートフォルダー》
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting

 DONE  Compiled successfully in 4184ms                                                                                                                                                                                      13:52:05


                                                                                                    Asset      Size  Chunks                    Chunk Names
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1   20.1 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760    109 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512   45.4 kB          [emitted]
 fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158   23.4 kB          [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb     18 kB          [emitted]
                                                                                               /js/app.js   1.19 MB       0  [emitted]  [big]  /js/app
                                                                                             /css/app.css    681 kB       0  [emitted]  [big]  /js/app
                                                                                        mix-manifest.json  90 bytes          [emitted]

いかがでしたでしょうか?ぜひお試しください。

また、もっと詳しく本でLaravelを学びたい場合、おすすめの本はAmazonにある
「Web職人好みの新世代PHPフレームワーク」という本です。

お問い合わせはこちら!

関連記事

codeigniterで共通のヘッダーフッターの読み出しはCI_LoaderをextendsしたMY_Loaderで実装する

codeigniterで共通のヘッダー、フッターを読み込むときは、CI_Loaderクラスを

記事を読む

phpでexif_read_dataを使ってexif情報から撮影日を取得する

写真には画像データ以外に撮影日が取得できます!それがexifデータで、phpではexif_r

記事を読む

複数のXAMPPインストール

Windows環境でPHP開発をする際にXAMPPをインストールすることになります。ただし、複数の開

記事を読む

Laravel 5.1 プロジェクト作成(インストール)

本記事ではLaravel 5.1 LTSを利用して開発するためにLaravelをインストールする手順

記事を読む

codeigniterで複数データベース切替方法について

codeigniterでデータベース切替を行うためにはどうしたらよいかを試行錯誤してみました

記事を読む

codeigniterで、PC版とスマフォ版のテンプレートを自動で振分ける方法

  スマフォ版とPC版のテンプレートを切り替えるために、毎回コントローラでユ

記事を読む

PHPカンファレンス2015参加後記(PHP7は何が変わったか?)

PHPカンファレンス2015に行ってきましたので、後記を作成してみました。発表内容についての説明より

記事を読む

codeigniterでselect文にunionを使いたい

select文でunionを使いたいが、調べてみてると普通にできなさそうなので、librar

記事を読む

自動改札機のようにfuelphpでormのModelを自動作成する方法

  自動改札機をみたときに、fuelphpのORMのモデルを自動化させたい!

記事を読む

Laravelで住所からGoogle Map APIを用いて地図表示

Gmaps.jsを利用して、指定住所の場所をGoogle Map上に表示してみました。 Gma

記事を読む

お問い合わせはこちら!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

お問い合わせはこちら!

Laravel 5.X Queryログ出力例

Laravel 5.1でQueryログを出力する際のメモです。

no image
Laravelで複数実行したいとき

マルチプロセスで複数に実行してほしい場合は、JOBクラスを利用します。

Laravel5.1 ModelのCollectionからデーターを取得

ModelのCollectionからidのみを取得 <?p

Laravel 5.1でLaravel Mixを使ってみた

本投稿の目的は、Laravel 5.1でLaravel Mixを利用し

Laravel 5.1の自動ログインのお試し!

セッションの保持時間を1分にする 単位:分 デフォルト

→もっと見る

PAGE TOP ↑