CodeCode

なんか色々おぼえ書き。だいたいweb制作関連。

Laravel Mixではじめるwebpack

メインで使うPHPフレームワークをFuelPHPからLaravelに移したので、それに伴ってgulp + webpackをやめ、webpackのラッパーであるLaravel Mixを使うことにしました。

Laravel Mix provides a fluent API for defining Webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors.

https://laravel.com/docs/5.6/mix#introduction

Laravel Mixのドキュメントにあるように、Laravel MixはCSSやJavaScriptのプリプロセッサのビルドをwebpackで簡潔にかけるようにしてくれます。

通常はLaravelにパッケージされていますが、npmでインストールすることも可能で、Laravel以外のプロジェクトでも使用できます。

セットアップ

プロジェクトの初期設定を行います。

npm init -y

インストール

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

npm install -D laravel-mix

続いて、Laravel Mixで使うモジュールのインストールを行います。

npm install -D cross-env

-D オプションをつけていれば、package.jsonにインストールしたモジュールが登録されるので、package.jsonを別のプロジェクトに流用が可能です。

流用先のディレクトリで npm install と打てば、同じLaravel Mixの環境が再現されます。

設定

まずは、npm scriptsを作ります。 作りますといっても、公式にあるnpm scripts を使います。

npm init で生成された、 package.json の scriptsに以下をコピペします。

"dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

dev は記述した全タスクを実行します。
watch は変更の監視します。
production は全タスクを実行し、出力を圧縮します。

Sassのコンパイル

続いて、プリプロセッサのビルドの設定を webpack.mix.js に記述します。

//laravel-mixを読み込み
let mix = require('laravel-mix');

//Sassのコンパイル
mix.sass('src/sass/style.scss', 'common/css')

src/sass の style.scss を common/css にコンパイルして出力します。

npm run watch

上を実行すると、ビルドタスクを記述したファイル、ディレクトリの変更を監視してくれます。

JavaScriptのビルド

JavaScriptをビルドする場合はSassと同様に、

mix.js('src/js/app.js', 'common/js')

src/js の app.js を common/js にビルドします。

npm run watch

こちらも同様に上を実行すると、ビルドタスクを記述したファイル、ディレクトリの変更を監視してくれます。

Browsersync

BrowsersyncをLaravel Mixでも使えます。

まずはBrowsersyncとwebpackのプラグインをインストールします。

npm install -D browser-sync browser-sync-webpack-plugin

続いて、 webpack.mix.js に設定を記述します。

mix.browserSync({
  server: 'htdocs',
  proxy: false,
  files: [
    'htdocs/*/*.html',
    'htdocs/*/*.php',
    'htdocs/common/js/*.js',
    'htdocs/common/css/*.css',
  ]
})

server にはドキュメントルートとなるディレクトリを書きます。
proxy を使用しない場合は false を、使用する場合は、ドメインを書きます。
files　は監視するファイルパスを書きます。

npm run watch

npm scripts を実行するとBrowsersyncが立ち上がり、ブラウザに指定したドキュメントルートのindexが表示され、 files に書いたファイルが変更されると自動的にリロードしてくれます。

TOPへ戻る