Heim > Artikel > Web-Frontend > Gulp implementiert die gemeinsame Nutzung statischer Webseiten-Modularisierungsbeispiele
Gulp implementiert die gemeinsame Nutzung statischer Webseiten-Modularisierungsbeispiele
- 小云云Original
- 2018-01-11 09:35:071871Durchsuche
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!