【Laravel Sass】LaravelでSassのCSSを変更(反映時)に時間をかけない方法「Windowsユーザー」

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

初心者
毎回CSSをコンパイルするのに時間がかかるんですけど、差分だけ変更する方法はありません?

よしたか
学んだことをアウトプットしていきます。

LaravelでSassを利用していると、反映するのが遅くて、困ったので解決策を提示しておきます。

ちなみに余談ですが、、

Sassを利用して更新するのに一回で40秒以上かかる事件が起きました。

ビュー画面作るのにどれだけかかるの??って言われて、PCの所為じゃないのか!とか怒る気持ちを抑えて解決方法を探しました。
Dockerで行う場合は以下のコマンドを入力して、操作するようにしましょう。

この記事を読むことで
  • WindowsでLaravelのSassを利用している人は時間短縮ができます。

LaravelのSassの利用している人向けの解決策

前提条件

そもそもWindowsで開発してる時点でどうなのか?とか、そういったお話はいらないのでスルーします。

与えられた環境で課題をこなす方を応援しています。

大前提
  • 所属先がwindowsでdockerを操作しているので、macを利用の方や高性能のPCを利用されている方は効果を実感できないかもしれません。
  • インストール方法については今回は割愛しています

現在の所属先では「Doker」を利用しています。もし違う方は使えないかもしれません。

準備 Laravelのコンテナに入っておく

環境構築が終わっている状態で操作をしていきます。
そのため、Dockerコンテナの環境に入っておいてください。

Windowsの場合

winpty docker-compose exec php bash

macの場合

docker-compose exec php bash

※dockerに入る時は環境設定ファイルで「php」の部分が変わるので、dockerの使い方は違う記事で理解してくださいませ。

 

おそらくホームディレクトリが以下のように設定されていると思います。
※これは環境によって変わります。お使いの環境の設定ファイルによっては違うので、違っていても問題ありません。

var/www

Sassを使う上での知識

 

Laravelの公式サイトはこちらです。

ここを読んでもある程度しかわからないので、理解が曖昧になっている人が多いと感じます。

以下重要な部分を抜粋しています。

Laravel Mixの実行

Mixはwebpack上の設定レイヤーですから、

Laravelに含まれるpackage.jsonファイル上のNPMスクリプトの一つをMixの実行で起動してください。

// 全タスク実行
npm run dev

// 全タスク実行を実行し、出力を圧縮
npm run production

 

上記を読んで、どっちを使えば良いのか最初はわかりません。

最初に使えば良いのは、

// 全タスク実行
npm run dev

になります。

圧縮すると、整形されていない状態で出力されます。

アセット変更の監視

npm run watchコマンドはターミナルで実行し続け、関連ファイル全部の変更を監視します。

webpackは変更を感知すると、アセットを自動的に再コンパイルします。

npm run watch

特定の環境のwebpackでは、ファイル変更時に更新されないことがあります。

自分のシステムでこれが起きた場合は、watch-pollコマンドを使用してください。

npm run watch-poll

ここで私はSassを反映させるコマンドの「npm run watch」を使っていたのですが、全然動作しないため、

「npm run dev」コマンドを何度も利用していたので時間がかかっていました。

本題 Sassを時間かけずに反映させる方法

これで一回ずつ行うのもありなんですが、一回通ることがわかった時点で、
次のコマンドで、増加した分だけを更新するようにしましょう。

解決のコマンド

npm run watch-poll

Windowsを使っているかたは上記のコマンドで変更したら、変更した分だけ更新されるため、時間がかからずにすみます。

まとめ

今回はLaravelでSassを利用するときの簡単な時短術についてお伝えしました。

ビュー画面を作る方はぜひ参考にしてください。

※プログラミングは習得中ですので、参考程度に記事を読んでください。

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事