tailwind template
v1.11.9
Stellen Sie in erster Linie sicher, dass Sie pnpm install im Terminal im Stammverzeichnis dieses Projekts ausführen. Dadurch wird alle erforderlichen Abhängigkeiten installiert und generiert Ihren Ordner node_modules . Dieser Schritt ist sehr wichtig.
Dieses Projekt verwendet Tailwind CSS, ein Utility-First CSS-Framework. Die erforderlichen Abhängigkeiten sollten bereits in dieses Projekt aufgenommen werden. Wenn Ihnen der Ordner node_modules fehlt, führen Sie einfach pnpm install aus, und er sollte mit den in der Datei package.json angegebenen Abhängigkeiten generieren.
Um den Tailwind CSS Intellisense zu aktivieren, benötigen Sie die VS -Code -Erweiterung. Ich schlage vor, das Tailwind CSS -Erweiterungspaket zu installieren, das mit einigen Erweiterungen ausgestattet ist, die alle zusammenarbeiten, um die Verwendung von Rückenwind -CSS zu einer viel besseren Erfahrung zu machen. Um mehr darüber zu erfahren, klicken Sie auf den obigen Link.
Im Root -Ordner des Projekts befindet sich ein Vermögens-/Stilordner . Damit beherbergt die Datei Tailwind.css . Diese Datei wird verwendet, um schließlich die vollständig kompilierten Rückenwind -CSS -Stile zu generieren. Nach der Kompilierung gibt es die Klassen in die Datei styles.css aus, die sich ebenfalls im Ordner Assets/Styles befinden.
Um in einer Entwicklungsumgebung zu arbeiten, führen Sie das dev NPM -Skript aus. Verwenden Sie dazu die unten beschriebene Methode.
pnpm run dev im Stammordner des Projekts aus.Dies beginnt einen langjährigen Uhrenprozess , der Ihre Stile on-demanden erzeugt , anstatt im Voraus alles zu generieren. Dies ist äußerst nützlich, um die Entwicklung schneller und effizienter zu gestalten. Im Terminal sollten Sie die anfängliche Kompilierungsnachricht und die Zeit, die sie benötigte, sehen. Jedes Mal, wenn Sie eine HTML-Datei, die Datei Tailwind.css oder die Datei Tailwind.config.js Datei speichern, werden das CSS verarbeitet und neu kompiliert. Diese Stile werden im Entwicklungsprozess nicht abgebaut.
Bitte beachten Sie, dass Klassen On-Demand hinzugefügt werden, jedoch nicht auf Nachfrage entfernt werden. Dies geschieht derzeit von Adam Wathan, dem Schöpfer von Tailwind CSS. Um dies zu umgehen (Cache Bust It), speichern Sie einfach die Datei tailwind.css . Es wird eine vollständige Neukompilierung erzwingen und alle nicht verwendeten Klassen entfernen.
Um den Uhrenprozess abzutöten, legen Sie Ihren Fokus in das Terminal, in dem der Prozess ausgeführt wird, und drücken Sie CTRL + C . Sie sollten aufgefordert werden, Ihre Beendigung des Prozesses zu bestätigen. Bestätigen Sie Ihre Wahl, indem Sie Y eingeben, gefolgt von der ENTER .
Wir werden eine VS -Code -Erweiterung verwenden, um unseren Server nach oben zu starten. Suchen Sie nach "Live -Server" auf der Registerkarte VS -Code -Erweiterungen. Alternativ finden Sie es auf dem Visual Studio Marketplace.
Sobald Sie die Erweiterung heruntergeladen und installiert haben, sehen Sie möglicherweise eine neue Schaltfläche in der unteren rechten Ecke des Fensters im blauen Band. Es heißt live . Wenn Sie darauf klicken, sollte der Server starten und in Ihrem Browser geöffnet werden.
Wenn Sie die Schaltfläche nicht sehen, klicken Sie einfach mit der rechten Maustaste auf die Datei index.html im VS -Code -Datei Explorer und klicken Sie mit Live -Server öffnen .
Das Gebäude für die Produktion ähnelt dem Bau der Entwicklung. Machen Sie eine der folgenden Aussagen, um das CSS für die Produktion zu bauen.
pnpm run prod im Stammordner des Projekts aus.prod in der NPM -Skript -Verknüpfung aus, die sich unten links in der Registerkarte "Datei Explorer" in VS Code befindet.Entgegen dem zuvor verwendeten Entwicklungsskript startet dies keinen langjährigen Uhrenprozess. Vielmehr kompiliert dieses Skript das CSS einmal und nur einmal. Es werden nur Klassen in den HTML -Dateien im Root -Ordner vorgenommen und sie in die Datei styles.css in Assets/Styles/Styles.css kompilieren. Diese Stile werden abgebaut.
In diesem Projekt wird Gulp verwendet, um das Projekt zur Bereitstellung zu erstellen. Durch das Ausführen von Gulp erzeugt es einen DIST -Ordner in der Wurzel Ihres Projekts. Gulp kopiert dann alle erforderlichen Dateien aus der Quelle und dem Vermögen Ihres Projekts in den DIST -Ordner.
Darüber hinaus optimiert und miniiert Gulp die Dateien nach Bedarf. Die HTML-, SVG- und JavaScript -Dateien werden alle abgebaut. Das Minimieren einer Datei bedeutet einfach, Whitespace und andere unnötige Zeichen/Symbole zu entfernen. Wir tun dies, um die Größe der Dateien zu verringern.
Die Stile (CSS) werden ebenfalls in die Distel kopiert. Da das CSS bereits durch die Verwendung von Postcss und des JIT -Motors durch Rückenwind -CLI abgebrochen wird, müssen wir es hier nicht minifieren. Es ist wichtig , zuerst pnpm run prod zu rennen, bevor Sie gulp ausführen. Wenn Sie dies nicht tun, verwendet Gulp die nicht überminifizierte Version Ihres CSS.
Die Bilder werden ebenfalls kopiert und mit einem Gulp-Image, einem Bildoptimierer, optimiert. Dies optimiert nur PNG-, JPG- und GIF -Bilder. Fast jeder andere Bildtyp wird kopiert, aber nicht optimiert, einschließlich PDF -Dateien.
Wie benutzt du Gulp? Es ist sehr einfach! Hier sind drei Optionen. 1) Öffnen Sie das VS -Code -Terminal und führen Sie den gulp aus. Dadurch wird die Standardaufgabe ausgeführt, die in der Datei gulpFile.js im Stammverzeichnis gefunden wurde. Die Standardaufgabe führt dann alle anderen Aufgaben aus, um das Projekt zu erstellen. 2) Alternativ habe ich ein NPM -Skript namens gulp erstellt. Sie können dies aus der unteren linken Ecke des VS -Codefensters in der Registerkarte NPM -Skripte ausführen. 3) Wenn Sie die Registerkarte NPM -Skripte nicht sehen, können Sie diesen Befehl auch im Terminal ausführen, indem Sie pnpm run gulp ausgeführt haben. Zu diesem Zeitpunkt ist es einfacher, nur gulp einzugeben.
In dem Fall, dass Sie den Namen des Ausgabefordners von Dist in etwas anderes ändern müssen, navigieren Sie einfach zur Datei gulpFile.js und finden Sie das variable destination , das sich oben in der Datei befindet. Standardmäßig ist es auf dist gesetzt, aber Sie können dies ändern, indem Sie den dist Teil der Zeichenfolge durch alles ersetzen, was Sie möchten. Ein weiterer Name der normalen Zielordner ist docs , die zum Bereitstellen eines Projekts für Github -Seiten verwendet werden.
