1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Laravel Mix(Webpack)+globを導入しsassやJavaScriptをコンパイル

Posted at

#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を使うための設定

webpack.mix.js
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ファイルを設定ファイルのサンプル

webpack.mix.js
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に書いてあるスクリプトが実行され、
設定ファイルに記述したコンパイルやバンドルが実行される。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?