Web-Frontend
js-Tutorial
Gulp implementiert die gemeinsame Nutzung statischer Webseiten-Modularisierungsbeispiele
Gulp implementiert die gemeinsame Nutzung statischer Webseiten-Modularisierungsbeispiele
Bei der Entwicklung rein statischer Seiten werden Sie unweigerlich auf einige peinliche Probleme stoßen. Beispiel: Der gesamte Codesatz besteht aus 50 Seiten, von denen 40 Seiten die gleichen oberen und unteren Module haben. Dann haben wir 40 Mal dieselben beiden Codeteile kopiert (die umständlichste Methode). Wie wir alle wissen, ist Gulp.js ein automatisiertes Build-Tool, mit dem Entwickler allgemeine Aufgaben während der Projektentwicklung automatisieren können. Der folgende Artikel führt Sie hauptsächlich in die relevanten Informationen zur Implementierung der statischen Webseitenmodularisierung ein. Freunde in Not können darauf verweisen.
Obwohl es viele Lösungen für ähnliche Probleme gibt, ist die Verwendung eines Konstruktionstools wie gulp eine zuverlässigere Lösung als iframe, wenn es um ein reines Frontend ohne die Verwendung verschiedener Frameworks geht. Obwohl das Erlebnis möglicherweise einen kleinen Fehler aufweist (jedes Mal, wenn Sie eine Datei nach der Änderung in der Vorschau anzeigen möchten, müssen Sie sie zuerst schlucken), ist dies nicht unerträglich. Schließlich wollen wir 40 Seiten lösen, indem wir einfach ein bestimmtes öffentliches Modul ändern.
Einführung in gulp
gulp ist ein automatisiertes Build-Tool. In entwickelten Projekten können Sie gulp verwenden, um das Projekt automatisch zu erstellen, was die Arbeitseffizienz erheblich verbessert.
Gulp installieren
Bevor Sie Gulp installieren, bestätigen Sie zunächst, dass node.js korrekt installiert wurde, und installieren Sie dann Gulp im Projektstammverzeichnis:
$ npm install gulp
Beispielkonfiguration einer Entwicklungsumgebung:
Windows: Erstellen Sie das Projekt in IIS, um die Vorschau im Browser zu erleichtern (wenn Sie sich daran gewöhnt haben, fühlt es sich viel einfacher an, es zu verwenden als Notepad, und Sie können es auch). Ignorieren Sie auch einige Ordner).
MacOs: Erstellen Sie das Projekt in Apache, um die Vorschau im Browser zu erleichtern; verwenden Sie den Webstorm-Editor (gewöhnen Sie sich daran, er fühlt sich eher nützlich als großartig an und Sie können einige Ordner ignorieren).
Unverzichtbares Plug-in:
gulp-file-include
Fähigkeitsbeschreibung:
Fügen Sie den HTML-Code, der modularisiert werden muss, in einen separaten HTML-Code ein Datei Mitte. Zum Beispiel: head.html
Dann verwenden Sie es dort, wo Sie es benötigen: @@include('./head.html')
Passen Sie den Dateipfad an~~
Schließlich gulp konfigurieren und ausführen
Demo verwenden:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title></title>
<link rel="stylesheet" href="css/comm.css?v=1.13" rel="external nofollow" >
<link rel="stylesheet" href="css/template.css" rel="external nofollow" >
<link rel="stylesheet" href="css/news.css" rel="external nofollow" >
</head>
<body>
@@include('../Layout/head.html')
<p class="news">
</p>
@@include('../Layout/foot.html')
</body>gulp:
var gulp = require('gulp'),
fileinclude = require('gulp-file-include');
gulp.task('prew', function () {
gulp.src(['*.html','pages/*.html', '!node_modules/**/*.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('prew'));
gulp.src(['**/**.js', '!node_modules/**/*']).pipe(gulp.dest('prew/'));
gulp.src(['**/**.css', '!node_modules/**/*']).pipe(gulp.dest('prew/'));
gulp.src(['**/*.jpg',
'**/*.jpge',
'**/*.png',
'**/*.gif',
'**/*.bmp', '!prew/**/*', '!node_modules/**/*']).pipe(gulp.dest('prew/'));
});
gulp.task('watch',function () {
gulp.watch(['pages/*.html','css/*.css','img/**/*','!prew/**/*.html','!prew/**/*.css','!prew/img/**/*'], ['prew']);
})Fähigkeitseinführung:
Durch Ausführen von gulp prew wird die Datei in das prew-Verzeichnis kopiert und die entsprechende vollständige HTML-Datei generiert. (Hinweis: Hier werden die Dateien im Seitenordner direkt im prew-Stammverzeichnis abgelegt, nicht in prew/pages. Ändern Sie die Konfiguration nach Bedarf.)
Nach der Ausführung von gulp watch richtet gulp einen Abhörvorgang ein Entwicklung Jedes Mal, wenn Sie eine Datei ändern, führt gulp automatisch prew aus, sodass Sie nicht jedes Mal gulp prew manuell ausführen und dann den Browser aktualisieren müssen. (Dies ist eine praktische Fertigkeit)
Abschließend:
Bei dieser Reihe von Fertigkeiten geht es nicht darum, wie man Gulp verwendet, sondern darum, wie man Module aufteilt. Zusätzlich zum HTML-Code kann jedes Modul tatsächlich auch JS-, CSS-Code oder Code enthalten, der JS- und CSS-Dateien einführt, sodass es modularer sein kann.
Verwandte Empfehlungen:
Was passiert, wenn ein Projekt auf Github als statische Webseite veröffentlicht wird?
Teilen Sie ein Beispiel für Spezialeffektcode, der statisches Webseiten-Paging simuliert
Das obige ist der detaillierte Inhalt vonGulp implementiert die gemeinsame Nutzung statischer Webseiten-Modularisierungsbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Wie sende ich Webseiten als Verknüpfung im Edge-Browser an den Desktop?
Mar 14, 2024 pm 05:22 PM
Wie sende ich Webseiten als Verknüpfung im Edge-Browser an den Desktop? Viele unserer Benutzer möchten häufig verwendete Webseiten als Verknüpfungen auf dem Desktop anzeigen, um Zugriffsseiten bequemer öffnen zu können, wissen jedoch nicht, wie das geht. Als Reaktion auf dieses Problem wird der Herausgeber dieser Ausgabe dies mitteilen Werfen wir einen Blick auf den Inhalt des heutigen Software-Tutorials. Die Verknüpfungsmethode zum Senden von Webseiten an den Desktop im Edge-Browser: 1. Öffnen Sie die Software und klicken Sie auf der Seite auf die Schaltfläche „…“. 2. Wählen Sie in der Dropdown-Menüoption „Diese Site als Anwendung installieren“ unter „Anwendung“ aus. 3. Klicken Sie abschließend im Popup-Fenster darauf
So richten Sie die automatische Aktualisierung einer Webseite ein
Oct 26, 2023 am 10:52 AM
Um die automatische Aktualisierung einer Webseite festzulegen, können Sie das HTML-Tag „meta“, die JavaScript-Funktion „setTimeout“, die Funktion „setInterval“ oder den HTTP-Header „Refresh“ verwenden. Detaillierte Einführung: 1. Verwenden Sie das „meta“-Tag des HTML-Dokuments, um die automatische Aktualisierung der Webseite festzulegen "Funktion von JavaScript usw.
Was soll ich tun, wenn die Bilder auf der Webseite nicht geladen werden können? 6 Lösungen
Mar 15, 2024 am 10:30 AM
Einige Internetnutzer stellten fest, dass die Bilder auf der Webseite beim Öffnen der Browser-Webseite längere Zeit nicht geladen werden konnten. Was ist passiert? Ich habe überprüft, ob das Netzwerk normal ist. Was ist also das Problem? Der folgende Editor stellt Ihnen sechs Lösungen für das Problem vor, dass Webseitenbilder nicht geladen werden können. Webseitenbilder können nicht geladen werden: 1. Internetgeschwindigkeitsproblem Die Webseite kann keine Bilder anzeigen. Dies kann daran liegen, dass die Internetgeschwindigkeit des Computers relativ langsam ist und mehr Software auf dem Computer geöffnet ist. Und die Bilder, auf die wir zugreifen, sind relativ groß Möglicherweise liegt eine Zeitüberschreitung beim Laden vor. Daher kann die Software, die mehr Netzwerkgeschwindigkeit verbraucht, nicht angezeigt werden. 2. Wenn auf der Webseite keine Bilder angezeigt werden können, liegt das möglicherweise daran, dass die von uns besuchten Webseiten gleichzeitig besucht wurden.
Was tun, wenn die Webseite nicht aufgerufen werden kann?
Sep 06, 2023 am 09:36 AM
Zu den Lösungen für nicht zugängliche Webseiten gehören die Überprüfung der Netzwerkverbindung, das Löschen des Browser-Cache, die Überprüfung der Webseitenadresse, der Versuch, andere Browser zu verwenden, die Überprüfung des Serverstatus, die Überprüfung der Auflösung des Domänennamens, die Überprüfung der Firewall- und Sicherheitseinstellungen sowie die Kontaktaufnahme mit der Website Administrator. Detaillierte Einführung: 1. Überprüfen Sie die Netzwerkverbindung, um sicherzustellen, dass die Netzwerkverbindung normal ist. Sie können versuchen, andere Webseiten zu öffnen oder andere Geräte für den Zugriff zu verwenden, um festzustellen, ob ein Netzwerkverbindungsproblem vorliegt , es könnte ein Problem mit der Webseite sein; 2. Leeren Sie den Browser-Cache. Der Browser-Cache kann dazu führen, dass die Webseite nicht geladen wird usw.
Mögliche Gründe, warum die Netzwerkverbindung normal ist, der Browser jedoch nicht auf die Webseite zugreifen kann
Feb 19, 2024 pm 03:45 PM
Der Browser kann die Webseite nicht öffnen, aber das Netzwerk ist normal. Dafür gibt es viele mögliche Gründe. Wenn dieses Problem auftritt, müssen wir es Schritt für Schritt untersuchen, um die spezifische Ursache zu ermitteln und das Problem zu lösen. Stellen Sie zunächst fest, ob die Webseite nicht geöffnet werden kann, auf einen bestimmten Browser beschränkt ist oder ob alle Browser die Webseite nicht öffnen können. Wenn nur ein Browser die Webseite nicht öffnen kann, können Sie es zum Testen mit anderen Browsern wie Google Chrome, Firefox usw. versuchen. Wenn andere Browser die Seite korrekt öffnen können, liegt das Problem möglicherweise höchstwahrscheinlich bei diesem bestimmten Browser
So optimieren Sie die Wartbarkeit von Java-Code: Erfahrungen und Ratschläge
Nov 22, 2023 pm 05:18 PM
So optimieren Sie die Wartbarkeit von Java-Code: Erfahrungen und Ratschläge Im Softwareentwicklungsprozess ist das Schreiben von Code mit guter Wartbarkeit von entscheidender Bedeutung. Wartbarkeit bedeutet, dass Code leicht verstanden, geändert und erweitert werden kann, ohne dass es zu unerwarteten Problemen oder zusätzlichem Aufwand kommt. Für Java-Entwickler ist die Optimierung der Wartbarkeit von Code ein wichtiges Thema. In diesem Artikel werden einige Erfahrungen und Vorschläge geteilt, um Java-Entwicklern dabei zu helfen, die Wartbarkeit ihres Codes zu verbessern. Befolgen Sie standardisierte Benennungsregeln. Standardmäßige Benennungsregeln können die Lesbarkeit des Codes verbessern.
Was tun, wenn die Webseite nicht geöffnet werden kann?
Feb 21, 2024 am 10:24 AM
So lösen Sie das Problem, dass Webseiten nicht geöffnet werden. Mit der rasanten Entwicklung des Internets verlassen sich die Menschen zunehmend auf das Internet, um Informationen zu erhalten, zu kommunizieren und sich zu unterhalten. Manchmal stoßen wir jedoch auf das Problem, dass die Webseite nicht geöffnet werden kann, was uns große Probleme bereitet. In diesem Artikel werden einige gängige Methoden vorgestellt, mit denen Sie das Problem lösen können, dass Webseiten nicht geöffnet werden. Zuerst müssen wir feststellen, warum die Webseite nicht geöffnet werden kann. Mögliche Gründe sind Netzwerkprobleme, Serverprobleme, Probleme mit den Browsereinstellungen usw. Hier sind einige Lösungen: Überprüfen Sie die Netzwerkverbindung: Zuerst benötigen wir
So öffnen Sie PHP auf der Webseite
Mar 22, 2024 pm 03:20 PM
Um PHP-Code auf einer Webseite auszuführen, muss sichergestellt werden, dass der Webserver PHP unterstützt und ordnungsgemäß konfiguriert ist. PHP kann auf drei Arten geöffnet werden: * **Serverumgebung:** Legen Sie die PHP-Datei im Stammverzeichnis des Servers ab und greifen Sie über den Browser darauf zu. * **Integrierte Entwicklungsumgebung: **Platzieren Sie PHP-Dateien im angegebenen Web-Stammverzeichnis und greifen Sie über den Browser darauf zu. * **Remote-Server:** Greifen Sie über die vom Server bereitgestellte URL-Adresse auf PHP-Dateien zu, die auf einem Remote-Server gehostet werden.
