#Laravel Mixインストール
npm install laravel-mix cross-env node-sass --save-dev
(npmが使える環境である前提)
##Webpackにglobを導入してみよう!
npm install glob
globをインストールしたら、webpack.mix.js上でglobをインポートします。
const glob = require('glob');
##Laravel MixでビルドしたVue.jsがIE11で動かない時の対処法
laravel-mix-polyfillのインストール
npm install laravel-mix-polyfill --save-dev
###laravel-mix-polyfillを使うための設定
const mix = require('laravel-mix');
require('laravel-mix-polyfill');
mix.js('resources/js/app.js', 'public/js')
.polyfill({
enabled: true,
useBuiltIns: "usage",
targets: {"firefox": "50", "ie": 11}
})
.version();
version
メソッドは自動的に全コンパイルファイルのファイル名へ一意のハッシュを追加し、キャッシュを更新できるようにします。
ビュー中でLaravelのグローバルmix
関数を使う必要があります。
mix関数はハッシュ付きファイルの最新の名前を自動的に判定します。
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
##js,sassファイルを設定ファイルのサンプル
const mix = require('laravel-mix');
const glob = require('glob');
require('laravel-mix-polyfill');
/*
|--------------------------------------------------------------------------
| 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.
|
*/
/**
* Sassのコンパイル
* @type {string}
*/
const sassBaseDir = 'resources/sass';
const sassPublicDir = 'public/css';
const sassCompileDirs = ['pc', 'sp'];
const sassSyncDirs = [
`${sassBaseDir}/+(${sassCompileDirs.join('|')})/pages/`,
`${sassBaseDir}/+(${sassCompileDirs.join('|')})/`,
];
sassSyncDirs.forEach(function (dir) {
glob.sync(dir + '*.scss', {
ignore: dir + '_*.scss',
}).map(function (file) {
mix.sass(file, file.replace(sassBaseDir, sassPublicDir).replace('.scss', '.css')).version();
});
});
/**
* js ES5/ES6
* @type {string}
*/
const jsBaseDir = 'resources/js';
const jsPublicDir = 'public/js';
const jsCompileDirs = ['pc', 'sp', 'common'];
const jsSyncDirs = [
`${jsBaseDir}/+(${jsCompileDirs.join('|')})/*.js`,
];
jsSyncDirs.forEach(function (dir) {
glob.sync(dir).map(function (file) {
mix.js(file, file.replace(jsBaseDir, jsPublicDir))
.polyfill({
enabled: true,
useBuiltIns: "usage",
targets: {"firefox": "50", "ie": 11}
})
.version();
});
});
##Laravel Mixの実行
npm run dev
を実行すると、
package.jsonに書いてあるスクリプトが実行され、
設定ファイルに記述したコンパイルやバンドルが実行される。