skillup

技術ブログ

PHP デザイン

laravel Mix

投稿日:2017年11月19日 更新日:

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ファイルを生成したい場合には下記コマンドで監視状態にします。

特定環境下ではnpm run watchで動かないことがあるようなので、その場合、下記コマンドで動かしましょう。

https://readouble.com/laravel/5.4/ja/mix.html

-PHP, デザイン
-, , ,

執筆者:


comment

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

関連記事

no image

css flexboxについて どんなことができるのか?

CSSを使い始めて数年がたっていますが、いまだに最適な書き方がようわかっとりません(汗) 特に難しいのが全体的なレイアウトの決定でfloatとかpositionなんかを使っていろいろと悪戦苦闘していま …

no image

フォーム入力のポイント

以前のエントリーにならってさらにフォーム入力のデザイン上のポイントなどを。 Contents1 選択肢は横よりも縦で2 エラーがすぐにわかる入力欄を3 会員登録ではメリットをわかりやすく4 必須項目は …

no image

PHPのオートローディング

大規模開発では扱うファイルが増えるため、必要なクラスの読み込みが煩雑になるケースが多いです。 Contents1 従来のPHPのファイルのロード2 オートローディングとは3 サンプルソース4 メモ5 …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …

no image

ワンポイント画像系のcssでの実装

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …

アーカイブ