*

Laravel 5.1でLaravel Mixを使ってみた

公開日: : 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パッケージのインストールします。

《ルートフォルダー》>npm install -g express
C:\Users\《ユーザーフォルダー》\AppData\Roaming\npm
`-- express@4.15.3
  +-- accepts@1.3.3
  ~

 

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]

以下かでしょうか?ぜひお試しください。

お問い合わせはこちら!

関連記事

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

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

記事を読む

codeigniterでselect文にunionを使いたい

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

記事を読む

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

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

記事を読む

PHP初心者の私がCodeIgniterを勉強して感じた4つのメリット、2つのデメリット

photo credit: Tc Morgan via photopin cc PHPを本

記事を読む

Windows10にLaravel開発環境を構築

本記事は筆者のノートパソコンにLaravelプロジェクトの開発環境を構築した時のメモです。 構

記事を読む

codeigniterでIE8において別Windowで開くとセッションが切れてログアウトしてしまう

codeigniterで作成したWebサービスをアクセスしているときに、別Windowで開く

記事を読む

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

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

記事を読む

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

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

記事を読む

複数のXAMPPインストール

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

記事を読む

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

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

記事を読む

お問い合わせはこちら!

Message

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

お問い合わせはこちら!

Laravel 5.1でLaravel Mixを使ってみた

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

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

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

SourceTreeで差分ファイルを抽出

GitのクライアントでSourceTreeを利用する時、コミットの差分

第104回 PHP勉強会に参加しました!

昨日「第104回 PHP勉強会@東京」に参加し、メイン発表をしました。

Windows10にLaravel開発環境を構築

本記事は筆者のノートパソコンにLaravelプロジェクトの開発環境を構

→もっと見る

  • AWS構築 - クラウドアドバイザー
PAGE TOP ↑