skillup

技術ブログ

PHP デザイン

laravel Mix

投稿日:

laravel Mix

実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。

※保存されると自動的にコンパイルされるようになります。

他にも自動コンパイルにはいろいろありまして、一般的にはgulpなどのタスクランナーをつかうことが多いでしょう。

遅すぎたgulp実践導入 (Mac編)

今実務でlaravelを使っていますが、laravelでは中に、このようなタスクランナー(laravel Mix)がすでに実装されています。※5.4を前提にしています。

https://laravel.com/docs/5.4/mix

インストール

node.jsがインストールされていることが前提になります。

アプリのディレクトリで下記コマンドを実行すると、package.jsonに記述されているライブラリがインストールされます。(この中にlaravel Mixがあります。)

あとはwebpack.mix.jsというファイルがあるのでこのファイルにタスクを記述します。

webpack.mix.js

上記のようにlessのパスとcssのパスを一つ一つ記述します。アスタリスクなどは効かないようです。

あとは下記コマンドをうてばメッセージが表示され、実際に指定されたディレクトリにlessファイルと同名のcssファイルが生成されます。

ちなみに一回一回コマンドを打つのが面倒で、保存された場合に同時にcssファイルを生成したい場合には下記コマンドで監視状態にします。

 

-PHP, デザイン
-, ,

執筆者:


comment

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

関連記事

no image

CakePHP3系でのテスト処理

以前CakePHP2系のテストは書きましたが、3系は若干仕様が違いますので、3について書こうと思います。例によってエントリーレベルですが。 Contents1 準備1.1 phpunit1.2 テスト …

no image

一般的なWebサイト制作について

実務で通常のWebサイトを作成するというお仕事が。 Webサイトを改めて作成するっていう経験からはだいぶ遠のいてましたんで、これを機にスキルをまとめたいなーって思います。 サイト作成といっても本格的な …

no image

CSSで背景画像の出力

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

基本的な …

no image

vertical-alignの挙動に関して

cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。 css中央ぞろえ ざっとまとめると以下のようなかんじでしょうか。 テキストのみの1行タイプであればli …

no image

CakePHP3 リクエストパラメーターの扱いについて

CakePHPのリクエストの扱いについて。 ほとんどのフレームワークですと、HTTPリクエストの扱いに関してはフレームワーク側で実装されていることが多いので、フレームワークを使い始める場合、この部分に …