WeChat アプレットは、less ファイルをリアルタイムで監視し、それらを wxss ファイル、グローバル コマンド ツール、less-to-wxss にコンパイルします。

WeChat ミニ プログラム プロジェクト用に選択したテクノロジー スタックは: ネイティブ埋め込み h5 です。テクノロジーの選択には何も問題はありませんが、何かがおかしいと思います。同じ設計ドラフトの場合、通常、h5 開発のほうが小さなプログラム開発よりも早いのですが、落ち込んでいます。なぜですか?ミニ プログラムには多くのカプセル化されたコンポーネントが含まれています。開発効率が依然として低いのはなぜですか? 問題の根本原因の 1 つを見つけてください。ミニ プログラムはネイティブに開発されています。スタイルは wxss を使用します。ネストされた構文は使用できず、開発は困難です。効率が上がるのは当然ですが、割引されるので、後で wxss を維持するのがさらに面倒になります。

前世

wxss での開発は遅すぎます。WeChat アプレットはネイティブで開発されています。もう wxss は書きたくないです。 WeChat ミニ プログラムがリリースされてからかなりの時間が経っていることを考えれば、この問題を解決するための成熟したソリューションがあるはずです。そこで、次の解決策を見つけました。

オプション 1: 自動コンパイルを行わないウェブストーム構成

このソリューションは、webstorm を使用するエディター開発者に適していますが、私は今 # に夢中です。 # #VSCode (または WeChat 開発者ツール。デバッグには引き続き使用する必要があります)、webstorm は使いたくないので、他のソリューションを探す必要があります。

ウェブストーム エディターを使用する開発者は、次の参考記事に従って構成できます。

#webstorm 設定は自動的にコンパイルされません
webstorm 設定は wxss ファイル設定にコンパイルされます

オプション 2: gulp-less を使用して自動的にコンパイルする

タスクを実行するには、gulp のタスク フローを参照してください。gulp-less は、特に gulp 自動コンポーネント ツールのプラグインです。より少ないファイルを処理するために使用されます。出力 CSS ファイルは、運用環境で使用するために提供されます。このソリューションは使用できますが、私の要件を完全には満たしていません。私は怠け者なので、手動でコンパイルしたくありません。検索して検索して次の解決策を見つけます。

#gulp レス gulp パッケージング処理のレス化

オプション 3: wxss-cli: グローバル コマンド ライン パス

ついに、echo008 によって開発された、良いソリューションである wxss-cli が見つかりました。このツールをグローバルにインストールした後、wxss ./path を実行して、wxss にコンパイルを少なくします。 1週間使ってみて、毎日会社に開発に行くと、最初にコンパイルするプロジェクトのディレクトリをコピーする必要があることに気づきましたが、毎回パスをコピーするのは面倒です。また、コンパイル時には、node_modules 内のlessもコンパイルされます。これにより、コンパイルが遅くなります。プロジェクトのルート ディレクトリにあるページとコンポーネント ファイルをコンパイルしたいのですが、何か方法はありますか?

これら 3 つのオプションはどれも使いやすいものではありません...

この人生

そこで、wxss-cli の作者に問題を提起しましたが、作者は 1 週間後に私を無視しました。

---

これ以上待つことはできないので、うまくいかなかったら自分でやって、ソースコードを盗んで、要件を満たすように変更します。どのディレクトリ less

をコンパイルする必要があるか、どのファイル ディレクトリでコマンド

less-to-wxss watch を実行し、リアルタイム監視を実行して、less を wxss に自動的に変換します。 ＃＃＃ 書類。

使い方はとても簡単です。また作者に問題を残しましたが、無視されました。他の問題もいくつか無視されたようです。作者は忙しすぎて対応できなかったのかもしれません。最後に、複数の端末でのless-to-wxss watchの実行をサポートします。このプラグインは、小規模プログラムのネイティブ開発者にとって非常に役立ちます。プラグインが新しくリリースされました。必要なものをピックアップしてください。

less-to-wxss 用の npm パッケージ

less-to-wxss

less-to-wxss の利点wxss ：

---

パスを渡す必要はありません

1. グローバル インストール、ワンクリック コンパイル

   less-to-wxss watch

3. 改良された

   less-to-wxss## を使用した自立型マルチターミナル、マルチディレクトリ# 実装原理は、入力コマンドを通じて現在の場所のパスを取得し、変更されたディレクトリ内のファイルに対してファイル トラバーサル モニタリングを実行し、less ツールを通じてless を wxss にコンパイルし、名前を変更して元のディレクトリに保存します。元のレス ファイルの更新は上記のプロセスを続行します。

推奨チュートリアル: 「

WeChat ミニ プログラム 」

以上がWeChat アプレットは、less ファイルをリアルタイムで監視し、それらを wxss ファイル、グローバル コマンド ツール、less-to-wxss にコンパイルします。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。