L'applet WeChat surveille moins de fichiers en temps réel et les compile en fichiers wxss, outils de commande globaux et less-to-wxss

La pile technologique que nous avons choisie pour notre projet de mini-programme WeChat est : natif + h5 intégré. Il n'y a rien de mal avec la sélection technologique, mais je pense que quelque chose est bizarre. Pour le même brouillon de conception, le développement h5 est généralement plus rapide que le développement de petits programmes. Pourquoi ? Les mini-programmes fournissent de nombreux composants encapsulés. Pourquoi l'efficacité du développement est-elle encore faible ? Nous avons trouvé l'une des causes profondes du problème. Le style utilise wxss et l'efficacité du développement est naturellement compromise. . , ce sera plus compliqué à maintenir plus tard wxss.

Dans la vie précédente,

était trop lent à développer avec wxss L'applet WeChat était développée nativement, et je ne voulais plus écrire wxss. Pensant que les mini-programmes WeChat existent depuis si longtemps, il devrait y avoir des solutions matures pour résoudre ce problème, j'ai donc trouvé les solutions suivantes.

Option 1 : Webstorm configure moins de compilation automatique

Cette solution convient aux développeurs éditeurs utilisant webstorm , mais je suis désormais amoureux de VSCode (ou Outils de développement WeChat, vous devez toujours l'utiliser pour le débogage), je ne veux pas utiliser webstorm , je dois donc chercher d'autres solutions.

Les développeurs utilisant l'éditeur webstorm peuvent le configurer selon l'article de référence suivant.

• la configuration webstorm moins est automatiquement compilée

• le fichier webstorm moins est compilé dans la configuration du fichier wxss

Option 2 : Utiliser gulp-less pour compiler automatiquement

Référez-vous au flux de tâches de gulp pour exécuter la tâche gulp-less est un plug-in de l'outil de composant automatisé gulp. , spécialement utilisé pour traiter moins de fichiers. Le fichier CSS de sortie est fourni pour être utilisé dans l'environnement de production. Cette solution peut être utilisée, mais elle ne répond pas tout à fait à mes besoins. Je suis paresseux et je ne veux pas la compiler manuellement. Recherchez et recherchez pour trouver la solution suivante.

• traitement des emballages gulp sans gulp moins

Option 3 : wxss-cli : ligne de commande globale + chemin

Enfin trouvé une assez bonne solution, wxss-cli développée par echo008 Après avoir installé cet outil globalement, exécutez wxss ./path pour compiler moins dans wxss. Après l'avoir utilisé pendant une semaine, j'ai découvert que chaque jour, lorsque je me rends dans l'entreprise pour du développement, je dois d'abord copier le répertoire du projet à compiler. Je ne veux pas copier le chemin à chaque fois. Et lors de la compilation, less in node_modules seront également compilés. Cela ralentira la compilation. Je veux juste compiler sous les pages et les fichiers de composants dans le répertoire racine de mon projet. Existe-t-il un moyen ?

Aucune de ces trois options n'est facile à utiliser...

Cette vie

J'ai donc soulevé des problèmes avec l'auteur de wxss-cli, mais l'auteur m'a ignoré au bout d'une semaine.

Je ne pouvais plus attendre, donc si cela ne fonctionnait pas, j'allais voler le code source et le modifierais pour répondre à mes besoins. Quel répertoire doit être compilé less, dans quel répertoire de fichiers, exécutez la commande  less-to-wxss watch pour une surveillance en temps réel et convertissez automatiquement less en un fichier wxss .

C’est très simple à utiliser. J'ai encore laissé un numéro à l'auteur, mais il m'a ignoré. Il semble que plusieurs autres problèmes aient également été ignorés. Peut-être que l'auteur était trop occupé pour s'en occuper. Enfin, prend en charge l'exécution d'une surveillance less-to-wxss sur plusieurs terminaux. Ce plug-in est vraiment utile pour les développeurs natifs de petits programmes. Un plug-in vient d'être publié. Ramassez ce dont vous avez besoin. Package npm pour moins à wxss

moins à wxss

Avantages de moins à wxss ：

1. Pas besoin de passer le chemin

2. Installation globale, compilation en un clicless-to-wxss watch

3. Multi-terminal et multi-répertoire auto-supportés utilisant

principe d'implémentation amélioré de less-to-wxss, en entrant la commande, obtenez le chemin d'emplacement actuel et exécutez parcours de fichiers sur les fichiers du répertoire modifié Monitor, utilisez l'outil less pour compiler less dans wxss, renommez-le et enregistrez-le dans le répertoire d'origine. La mise à jour originale des fichiers se poursuit avec le processus ci-dessus.

Tutoriel recommandé : "Programme WeChat Mini"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!