Drei lokale Site Preview-Methoden in 60 Sekunden

Es gibt drei Möglichkeiten, um in 60 Sekunden eine lokale Website-Vorschau einzurichten! Zuerst schauen wir uns Prepros an. Dann verwenden wir BrowserSync mit Gulp. Zum Schluss schauen wir uns XAMPP an. Erledigt.

Drei lokale Site Preview-Methoden

1. Prepros

Installieren Sie die prepros-App für Ihr Betriebssystem und führen Sie sie aus. Ziehen Sie Ihren statischen Site-Projektordner auf die Benutzeroberfläche. Klicken Sie mit der rechten Maustaste auf den Projektnamen und wählen Sie Vorschau öffnen.

2. BrowserSync

In Ihrem Projektordner ausführen npm init, Installieren Sie dann BrowserSync und Gulp mit sudo npm install gulp browser-sync -save-dev. Erstellen Sie eine Datei gulpfile.js mit dem richtigen Code (laden Sie die Quelldateien herunter, um Hilfe zu erhalten). Lauf Schluck Browser-Sync.

3. XAMPP

Für Projekte, die PHP verwenden, installieren Sie XAMPP für Ihr Betriebssystem. Legen Sie "yourprojectfolder" in den Ordner "htdocs" von XAMPP, führen Sie dann XAMPP aus und starten Sie die Apache- und MySQL-Dienste.

In einem Browser gehen Sie zu localhost / yourprojectfolder. Das ist es!

Nützliche Ressourcen

Weitere Informationen zum lokalen Ausführen von Websites in Envato Tuts+.

  • Eine kurze Einführung in das BrowserSync-Tutorial
  • Die Befehlszeile für Webdesign: Live Reload & BrowserSync Tutorial
  • Sudo erklärt
  • Quelldateien für dieses Tutorial