tailwind template
v1.11.9
Avant tout, assurez-vous d'exécuter pnpm install dans le terminal dans le répertoire racine de ce projet. Cela installera toutes les dépendances requises et générera votre dossier Node_Modules . Cette étape est très importante.
Ce projet utilise Tailwind CSS, un framework CSS-First Utility. Les dépendances requises doivent déjà être incluses dans ce projet. Si vous manquez le dossier Node_Modules , exécutez simplement pnpm install , et il devrait générer avec les dépendances spécifiées dans le fichier package.json .
Pour activer CSS Intellisense, vous aurez besoin de l'extension de code VS. Je suggère d'installer le pack d'extension CSS de vent arrière qui est livré avec quelques extensions qui fonctionnent toutes ensemble pour faire de l'utilisation de CSS à vent arrière une bien meilleure expérience. Pour en savoir plus, cliquez sur le lien ci-dessus.
Dans le dossier racine du projet, il existe un dossier Assets / Styles . Cela abrite le fichier tailwind.css . Ce fichier est utilisé pour éventuellement générer les styles CSS de vent arrière entièrement compilés. Une fois compilé, il diffuse les classes dans le fichier Styles.css , également située dans le dossier Assets / Styles .
Pour travailler dans un environnement de développement, exécutez le script dev NPM. Pour ce faire, utilisez l'une ou l'autre méthode décrite ci-dessous.
pnpm run dev dans le dossier racine du projet.Cela commencera un processus de montre de longue date qui générera vos styles à la demande au lieu de tout générer à l'avance. Ceci est extrêmement utile pour rendre le développement plus rapide et plus efficace. Dans le terminal, vous devriez voir le message de compilation initial et le temps qu'il a pris. Chaque fois que vous enregistrez un fichier HTML, le fichier tailwind.css ou le fichier tailwind.config.js , le CSS sera traité et recompilé. Ces styles ne seront pas minifiés dans le processus de développement.
Veuillez noter que les classes sont ajoutées à la demande, mais non supprimées à la demande. Ceci est actuellement par conception comme indiqué par Adam Wathan, le créateur de Tailwind CSS. Pour contourner ce (cache Bust It), enregistrez simplement le fichier tailwind.css . Il obligera une recompile complète et supprimera toutes les classes inutilisées.
Pour tuer le processus de montre, mettez votre concentration dans le terminal que le processus l'exécute et appuyez sur CTRL + C Vous devez être invité à confirmer votre résiliation du processus. Confirmez votre choix en entrant Y suivi de la touche ENTER .
Nous utiliserons une extension de code VS pour démarrer notre serveur. Recherchez "Live Server" dans l'onglet Extensions de code VS. Alternativement, vous pouvez le trouver sur le marché Visual Studio.
Une fois que vous avez téléchargé et installé l'extension, vous pouvez voir un nouveau bouton dans le coin inférieur droit de la fenêtre dans le ruban bleu. Ça dit aller en direct . Lorsque vous cliquez sur cela, il doit démarrer le serveur et l'ouvrir sur votre navigateur.
Si vous ne voyez pas le bouton, cliquez simplement avec le bouton droit sur le fichier index.html dans l'explorateur de fichiers de code vs, et cliquez sur ouvrir avec le serveur en direct .
Le bâtiment pour la production est similaire à la construction pour le développement. Faites l'un des éléments suivants pour construire le CSS pour la production.
pnpm run prod dans le dossier racine du projet.prod dans le raccourci des scripts NPM situé en bas à gauche de l'onglet Explorateur de fichiers dans le code vs.Contrairement au script de développement que nous avons utilisé auparavant, cela ne lancera pas un processus de montre de longue date; Ce script compile le CSS une fois et une seule fois. Il ne faudra que des classes trouvées dans les fichiers HTML situés dans le dossier racine et les compilera dans le fichier Styles.css situé dans Assets / Styles / Styles.css . Ces styles seront minifiés.
Ce projet utilise Gulp pour créer le projet de déploiement. En exécutant Gulp, il créera un dossier DIST à la racine de votre projet. Gulp copiera ensuite tous les fichiers nécessaires de la source et des actifs de votre projet dans le dossier DIST .
En plus de cela, Gulp optimisera et minivera également les fichiers au besoin. Les fichiers HTML, SVG et JavaScript seront tous minifiés. La réduction d'un fichier signifie simplement supprimer les espaces blancs et autres caractères / symboles inutiles. Nous le faisons pour réduire la taille des fichiers.
Les styles (CSS) seront également copiés sur la dist. Étant donné que le CSS est déjà minifié par l'utilisation par CLI de Tailwind de PostCSS et du moteur JIT, nous n'avons pas besoin de l'établir ici. Il est important d'exécuter d'abord pnpm run prod avant de courir gulp . En ne faisant pas cela, Gulp utilisera la version non minifiée de votre CSS.
Les images seront également copiées également et optimisées à l'aide de Gulp-Image, un optimiseur d'image. Cela n'optimisera que les images PNG, JPG et GIF. Presque tous les autres types d'images seront copiés, mais pas optimisés, y compris les fichiers PDF.
Alors, comment utilisez-vous Gulp? C'est très facile! Voici trois options. 1) Ouvrez le terminal de code vs et exécutez la commande gulp . Cela exécutera la tâche par défaut trouvée dans le fichier gulpfile.js dans le répertoire racine. La tâche par défaut s'exécute ensuite, dans l'ordre, toutes les autres tâches pour construire le projet. 2) Alternativement, j'ai créé un script NPM appelé gulp . Vous pouvez l'exécuter à partir du coin inférieur gauche de la fenêtre de code vs dans l'onglet Scripts NPM. 3) Si vous ne voyez pas l'onglet Scripts NPM, vous pouvez également exécuter cette commande dans le terminal en exécutant pnpm run gulp , mais à ce stade, le simple fait de taper gulp est plus facile.
Dans le cas où vous devez modifier le nom du dossier de sortie de DIST à autre chose, accédez simplement au fichier gulpfile.js et trouvez la destination variable située près du haut du fichier. Par défaut, il est défini sur dist , mais vous pouvez le modifier en remplaçant la partie dist de la chaîne à ce que vous souhaitez. Un autre nom de dossier de destination commun est docs , qui est utilisé pour déployer un projet dans les pages GitHub.
