Wie implementiert man die Modularisierung statischer Webseiten mit Gulp?-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Wie implementiert man die Modularisierung statischer Webseiten mit Gulp?

亚连

Jun 12, 2018 pm 06:09 PM

gulp 模块化

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.

Vorwort

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). Dann war das Problem gelöst. Dann, nach mehrmaligem Hinsehen, sagte der Produktmanager plötzlich, dass ein bestimmter Teil des Oberteils neu gestaltet werden müsse. . . Plötzlich ist es mir so peinlich ~~ (Mein Herz ist voller galoppierender Pferde ~), was kommt als nächstes? Dann freuen Sie sich auf den nächsten Pferdegalopp! ! !

Obwohl es viele Lösungen für ähnliche Probleme gibt, ist die Verwendung eines Build-Tools wie gulp eine zuverlässigere Lösung als iframe, wenn es um ein reines Frontend ohne die Verwendung verschiedener Frameworks geht. Obwohl es einige kleinere Mängel in der Erfahrung geben kann (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, müssen Sie zunächst bestätigen, dass node.js korrekt installiert wurde, und dann Gulp im Projekt installieren Stammverzeichnis:

$ npm install gulp

Nach dem Login kopieren

Beispielkonfiguration einer Entwicklungsumgebung:

Windows: Erstellen Sie das Projekt in iis, um die Vorschau im Browser zu erleichtern Editor (Sobald Sie sich daran gewöhnt haben, fühlt es sich viel einfacher an als Notepad, und Sie können bestimmte Ordner auch ignorieren).

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).

Erforderliches Plug-in:

gulp-file-include

Skill-Beschreibung:

Fügen Sie den HTML-Code, der modularisiert werden muss, in eine separate HTML-Datei ein. Zum Beispiel: head.html

Dann verwenden Sie es dort, wo Sie es benötigen: @@include('./head.html')

Passen Sie den Dateipfad an~~

Abschließend 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(&#39;../Layout/head.html&#39;)
<p class="news"> 
</p>
@@include(&#39;../Layout/foot.html&#39;)
</body>

Nach dem Login kopieren

gulp:

var gulp = require(&#39;gulp&#39;),
 fileinclude = require(&#39;gulp-file-include&#39;);
gulp.task(&#39;prew&#39;, function () {
 gulp.src([&#39;*.html&#39;,&#39;pages/*.html&#39;, &#39;!node_modules/**/*.html&#39;])
  .pipe(fileinclude({
   prefix: &#39;@@&#39;,
   basepath: &#39;@file&#39;
  }))
  .pipe(gulp.dest(&#39;prew&#39;));
 gulp.src([&#39;**/**.js&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
 gulp.src([&#39;**/**.css&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
 gulp.src([&#39;**/*.jpg&#39;,
  &#39;**/*.jpge&#39;,
  &#39;**/*.png&#39;,
  &#39;**/*.gif&#39;,
  &#39;**/*.bmp&#39;, &#39;!prew/**/*&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
});
gulp.task(&#39;watch&#39;,function () {
 gulp.watch([&#39;pages/*.html&#39;,&#39;css/*.css&#39;,&#39;img/**/*&#39;,&#39;!prew/**/*.html&#39;,&#39;!prew/**/*.css&#39;,&#39;!prew/img/**/*&#39;], [&#39;prew&#39;]);
})

Nach dem Login kopieren

Skill-Einführung:

Ausführen von gulp prew kopiert die Datei in das Prew-Verzeichnis und generiert die entsprechende vollständige HTML-Datei. (Hinweis: Hier werden die Dateien im Seitenordner direkt im prew-Stammverzeichnis abgelegt, nicht in prew/pages. Ändern Sie die Konfiguration nach Bedarf.)

Ausführen nach gulp watch, gulp richtet einen Abhörprozess ein, jedes Mal, wenn eine Datei während der Entwicklung geändert wird, führt gulp automatisch prew aus, sodass nicht jedes Mal manuell ausgeführt werden muss gulp prew und dann den Browser aktualisieren. (Dies ist eine praktische Fertigkeit)

Abschließend:

Bei dieser Reihe von Fertigkeiten geht es nicht darum, wie man den Schluck verwendet, sondern darum, wie Teilen Sie es. Zusätzlich zum HTML-Code kann jedes Modul auch JS-, CSS-Code oder Code enthalten, der JS- und CSS-Dateien einführt, sodass es modularer sein kann.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Wie verwende ich node.js und andere Technologien, um die Anmelde- und Registrierungsfunktion zu implementieren?

So nutzen Sie den Wert von SessionStorage mit JS

Probleme mit kompatiblen Browsern in JS

Konfigurationsschritte zu Axios (ausführliches Tutorial)

Detaillierte Interpretation der modularen Organisation in Vuex

Wie implementiert man die Chat-Funktion mit NodeJS?

Das obige ist der detaillierte Inhalt vonWie implementiert man die Modularisierung statischer Webseiten mit Gulp?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

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

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

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

Wo ist der Login-Zugang für Gmail-E-Mail?

7487

CakePHP-Tutorial

1377

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

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.

Wie kann der Codekomplexitätsfehler im Python-Code behoben werden? Jun 24, 2023 pm 05:43 PM

Python ist eine einfache, leicht zu erlernende und effiziente Programmiersprache. Wenn wir jedoch Python-Code schreiben, können Probleme mit übermäßiger Codekomplexität auftreten. Wenn diese Probleme nicht gelöst werden, wird es schwierig, den Code zu warten, fehleranfällig zu machen und die Lesbarkeit und Skalierbarkeit des Codes zu verringern. In diesem Artikel besprechen wir daher, wie man Codekomplexitätsfehler in Python-Code beheben kann. Verständnis der Codekomplexität Die Codekomplexität ist ein Maß für die Art des Codes, der schwer zu verstehen und zu warten ist. In Python gibt es einige Indikatoren, die verwendet werden können

Wie kann der Fehler der schlechten Wartbarkeit von Python-Code behoben werden? Jun 25, 2023 am 11:58 AM

Python wird als höhere Programmiersprache häufig in der Softwareentwicklung verwendet. Obwohl Python viele Vorteile bietet, besteht ein Problem, mit dem viele Python-Programmierer häufig konfrontiert sind, darin, dass der Code weniger wartbar ist. Die Wartbarkeit von Python-Code umfasst die Lesbarkeit, Skalierbarkeit und Wiederverwendbarkeit des Codes. In diesem Artikel konzentrieren wir uns darauf, wie das Problem der schlechten Wartbarkeit von Python-Code gelöst werden kann. 1. Lesbarkeit des Codes Die Lesbarkeit des Codes bezieht sich auf die Lesbarkeit des Codes, die den Kern der Wartbarkeit des Codes darstellt.

Leitfaden zur Implementierung der modularen Entwicklung in Vue-Großprojekten Jun 09, 2023 pm 04:07 PM

In der modernen Webentwicklung wird Vue als flexibles, benutzerfreundliches und leistungsstarkes Frontend-Framework häufig bei der Entwicklung verschiedener Websites und Anwendungen eingesetzt. Bei der Entwicklung großer Projekte ist die Vereinfachung der Codekomplexität und die einfachere Wartung des Projekts ein Problem, mit dem sich jeder Entwickler auseinandersetzen muss. Die modulare Entwicklung kann uns helfen, Code besser zu organisieren, die Entwicklungseffizienz und die Lesbarkeit des Codes zu verbessern. Im Folgenden werde ich einige Erfahrungen und Richtlinien für die Implementierung der modularen Entwicklung in Vue-Großprojekten teilen: 1. Klare Arbeitsteilung in einem Großprojekt

Was ist Modularität in Vue? Dec 23, 2022 pm 06:06 PM

In Vue besteht die Modularisierung darin, eine einzelne Funktion in einem Modul (einer Datei) zu kapseln. Die Module sind voneinander isoliert, interne Mitglieder können jedoch über bestimmte Schnittstellen verfügbar gemacht werden und können sich auch auf andere Module verlassen (um die Wiederverwendung von Code zu erleichtern). Verbessern Sie die Entwicklungseffizienz und erleichtern Sie die spätere Wartung. Die Vorteile der modularen Entwicklung: 1. Klare Organisation und einfache Wartung. 2. Alle Daten werden nicht auf einmal angefordert. Die Benutzererfahrung ist gut. 3. Module sind voneinander isoliert, aber interne Mitglieder können durch spezifische Informationen verfügbar gemacht werden Schnittstellen oder Hängt von anderen Modulen ab.

So verwenden Sie die Go-Sprache für die Praxis der Code-Modularisierung Aug 03, 2023 am 10:31 AM

So verwenden Sie die Go-Sprache für die Praxis der Code-Modularisierung: In der Softwareentwicklung ist die Code-Modularisierung eine gängige Entwicklungsmethode. Durch die Aufteilung des Codes in wiederverwendbare Module können die Wartbarkeit, Testbarkeit und Wiederverwendbarkeit des Codes verbessert werden. In diesem Artikel wird die Verwendung der Go-Sprache zum Üben der Codemodularisierung vorgestellt und entsprechende Codebeispiele bereitgestellt. 1. Die Vorteile der Modularisierung verbessern die Wartbarkeit des Codes: Durch die Modularisierung wird der Code in unabhängige Funktionsmodule unterteilt, und jedes Modul ist für bestimmte Aufgaben verantwortlich, wodurch der Code klarer und einfacher zu ändern ist. Der Code kann verbessert werden

Zusammenfassung der Python-Entwicklungserfahrung: Praktiken zur Verbesserung der Wartbarkeit und Skalierbarkeit des Codes Nov 22, 2023 pm 12:22 PM

Zusammenfassung der Python-Entwicklungserfahrung: Praktiken zur Verbesserung der Wartbarkeit und Skalierbarkeit des Codes Im Softwareentwicklungsprozess stoßen wir häufig auf Anforderungsänderungen, Funktionsiterationen usw., sodass die Wartbarkeit und Skalierbarkeit des Codes zu einem wichtigen Bestandteil des Entwicklungsprozesses geworden sind. Themen, die ernst genommen werden müssen. Insbesondere in der Python-Entwicklung ist die Verbesserung der Wartbarkeit und Skalierbarkeit von Code zu einem häufigen Anliegen von Entwicklern geworden. In diesem Artikel werden einige Vorgehensweisen zur Verbesserung der Wartbarkeit und Skalierbarkeit von Python-Code zusammengefasst, in der Hoffnung, Python-Entwicklern einige Vorteile zu bringen.

Chaon bringt industrielle Mini-Hosts der TGS-1000-Serie auf den Markt: Unterstützt Stapelschnittstellen-Erweiterungsmodule und ist mit MTL-Prozessoren ausgestattet Aug 14, 2024 pm 01:33 PM

Laut Nachrichten dieser Website vom 14. August brachte Chaoen Vecow am 22. Juli, Pekinger Zeit, den industriellen Mini-Host der TGS-1000-Serie auf den Markt, der mit dem Intel Core Ultra-Prozessor der ersten Generation ausgestattet ist. Das Besondere an dieser Produktserie ist, dass sie vertikales Stapeln unterstützt, um zusätzliche I/O-Ports zu erweitern. Die TGS-1000-Serie ist in zwei Modelle unterteilt: TGS-1000 und TGS-1500. Der Unterschied besteht darin, dass die Unterseite des TGS-1500 ein Modul enthält, das MXM-Grafikkarten oder bis zu einer RTX5000Ada-Mobilversion unterstützt von professionellen NVIDIA-Karten. ▲Mini-Hosts der TGS-1500TGS-1000-Serie sind mit Intel Core Ultra7165H- oder Ultra5135H-Prozessoren erhältlich, ausgestattet mit Dual-D

See all articles