Contents
laravel Mix
実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。
※保存されると自動的にコンパイルされるようになります。
他にも自動コンパイルにはいろいろありまして、一般的にはgulpなどのタスクランナーをつかうことが多いでしょう。
今実務でlaravelを使っていますが、laravelでは中に、このようなタスクランナー(laravel Mix)がすでに実装されています。※5.4を前提にしています。
https://laravel.com/docs/5.4/mix
インストール
node.jsがインストールされていることが前提になります。
アプリのディレクトリで下記コマンドを実行すると、package.jsonに記述されているライブラリがインストールされます。(この中にlaravel Mixがあります。)
|
1 |
npm install |
あとはwebpack.mix.jsというファイルがあるのでこのファイルにタスクを記述します。
webpack.mix.js
|
1 2 3 4 |
let mix = require('laravel-mix'); mix .less('resources/assets/pc/less/app.less', 'public/pc/css/app') .less('resources/assets/pc/less/app2.less', 'public/pc/css/app'); |
上記のようにlessのパスとcssのパスを一つ一つ記述します。アスタリスクなどは効かないようです。
あとは下記コマンドをうてばメッセージが表示され、実際に指定されたディレクトリにlessファイルと同名のcssファイルが生成されます。
|
1 |
npm run dev |
ちなみに一回一回コマンドを打つのが面倒で、保存された場合に同時にcssファイルを生成したい場合には下記コマンドで監視状態にします。
|
1 |
npm run watch |
特定環境下ではnpm run watchで動かないことがあるようなので、その場合、下記コマンドで動かしましょう。
|
1 |
npm run watch-poll |
