Laravel 5.1でLaravel Mixを使ってみた
本投稿の目的は、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を利用します。
動作確認環境は以下となります。
また、もっと詳しく本でLaravelを学びたい場合、おすすめの本はAmazonにある 「Web職人好みの新世代PHPフレームワーク」という本です。
- 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フレームワーク」という本です。