Einführung und Verwendung der praktischen Gulp-Konfiguration

Einführung:

gulp ist ein Tool zum Erstellen von Code im Front-End-Entwicklungsprozess und ein Tool zum Erstellen von Automatisierungsprojekten, mit dem nicht nur Website-Ressourcen optimiert werden können Außerdem können viele sich wiederholende Aufgaben in Python mit den richtigen Tools automatisch erledigt werden. Mit ihr können wir nicht nur problemlos Code schreiben, sondern auch unsere Arbeitseffizienz erheblich verbessern.

gulp ist ein automatischer Task-Runner, der auf Nodejs basiert. Er kann das Testen, Überprüfen, Zusammenführen, Komprimieren, Formatieren und Durchsuchen von Javascript/Kaffee/Sass/Less/HTML/Image/CSS und anderen Dateien automatisch durchführen. Der Server aktualisiert sich automatisch, generiert Bereitstellungsdateien und überwacht Dateien, um die angegebenen Schritte nach Änderungen zu wiederholen. Bei der Implementierung greift sie auf die Pipe-Idee des Unix-Betriebssystems zurück. Die Ausgabe der vorherigen Ebene wird direkt zur Eingabe der nächsten Ebene, was die Bedienung sehr einfach macht. In diesem Artikel erfahren Sie, wie Sie mit Gulp den Entwicklungsprozess ändern und die Entwicklung schneller und effizienter gestalten können.

gulp ist grunt sehr ähnlich, aber im Vergleich zu den häufigen E/A-Vorgängen von grunt können die Stream-Vorgänge von gulp die Build-Arbeit schneller und bequemer abschließen.

Ich nenne diese Konfiguration die Demo-Testkonfiguration, da ich bei meiner Arbeit oft schnell Effekte erzeugen oder bestimmte Funktionen implementieren muss. Wenn Sie keine Zeit haben, sie selbst umzusetzen, müssen Sie welche finden vorhandene Beispiele oder Plugins.

Allerdings müssen diese Demos oder Plug-ins häufig auf dem mobilen Endgerät angezeigt oder ein Server gestartet werden. Daher besteht die Hauptaufgabe dieser Konfiguration darin, einen lokalen Server zu starten, der sowohl auf dem mobilen Endgerät angezeigt werden kann Terminal und PC-Terminal gleichzeitig. Darüber hinaus kann es beim Codieren automatisch aktualisiert werden, sodass nicht jedes Mal die Anwendung zum Aktualisieren gewechselt werden muss. Dies kann insbesondere auf der mobilen Seite viel sparen Problem.

Der detaillierte Code lautet wie folgt:

gulpfile.js:

var gulp = require('gulp'),
    browserSync = require('browser-sync').create();// 启动 browserSync 服务，自己启动server，并且为浏览器实时刷新提供服务gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: './'},
    files: './demo/**/*',
    browser: ["chrome"]
  })
})// 默认任务，在命令行输入`gulp`来启动任务gulp.task('default', gulp.parallel('browserSync'))

package.json:

{  "name": "gulp-demo",  "version": "1.0.0",  "description": "",  "main": "index.js?1.1.11",  "scripts": {"test": "echo \"Error: no test specified\" && exit 1"
  },  "author": "",  "license": "ISC",  "devDependencies": {"browser-sync": "^2.18.12","gulp": "gulpjs/gulp#4.0"
  }
}

Ordnerstruktur:

XX—

|— demo

|— gulpfile.js

|— Paket .json

In dieser Konfiguration wird nur ein Plug-in verwendet browserSync Dieses Plug-in startet einen Localhost-Server, der automatisch aktualisiert werden kann. und sowohl mobil als auch PC-synchron.

browserSync ist ein sehr leistungsfähiges Plug-in, das einfach und leicht verständlich ist. Sie können es selbst überprüfen, wenn Sie es benötigen. Ein kleiner Trick besteht außerdem darin, dass wir Dateiänderungen direkt über die Konfigurationsoptionen des Plug-Ins überwachen können, ohne die Überwachungsfunktion von gulp zu verwenden, was einfacher ist.

Das obige ist der detaillierte Inhalt vonEinführung und Verwendung der praktischen Gulp-Konfiguration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!