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

Wie implementiert man die Modularisierung statischer Webseiten mit Gulp?

亚连

Freigeben： 2018-06-12 18:09:38

Original

2094 Leute haben es durchsucht

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!