Installieren Sie node.js
Zuerst müssen Sie Node.js. Im Allgemeinen müssen Sie das Installationspaket nur herunterladen und auf der offiziellen Website von node.js. Aber ich habe schändlich gescheitert und der folgende Fehler tauchte auf:
Also habe ich mich zu Brew Dafa geändert:
Brauen installieren Nodejs
Gulp einbauen
Gulp wird mit dem Befehl npm von node.js installiert:
NPM Install -Global Gulp
Installieren Sie es dann im Projektverzeichnis:
NPM Install-Save-dev Gulp
Ich bin ziemlich verwirrt über diesen Schritt. Mit meiner langjährigen Erfahrung als Kodierer sollte auch wenn die globale Installation installiert ist, die Verwendung, wo sie verwendet werden sollen. Aber Gulp ist offensichtlich nicht so. Wenn Sie diesen Schritt im Projektverzeichnis nicht ausführen, wird der folgende Fehler aufgefordert, wenn der Befehl gulp verwendet wird:
… Lokaler Schluck nicht in…
… Versuchen Sie es zu rennen: NPM Installieren Sie den Gulp
Führen Sie schließlich den Gulp -Befehl im Projektverzeichnis aus. Wenn der folgende Inhalt ausgegeben wird, bedeutet dies, dass die Installation abgeschlossen ist:
… Kein Schluck gefunden
Einfaches Beispiel
Das Folgende zeigt die Verwendung von Gulp zum Erstellen eines statischen Website -Entwicklungsservers und unterstützt Live -Aktualisierungsfunktion (Leberoad).
Zunächst müssen Sie das Browser-Plug-In für Leberoad installieren. Die Plug-In-Adresse lautet: http://livereload.com/extensions/, die drei Hauptbrowser unterstützt: Chrome, Firefox und Safari. Nach der Installation des Plug-Ins wird im Browser eine Taste angezeigt. Diese Taste hat zwei Zustände. Feste Punkte geben an, dass das Plug-In aktiviert ist und hohle Punkte zeigen, dass das Plug-In nicht aktiviert ist. Denken Sie daran, sich zu erinnern!
Erstellen Sie dann eine einfache Projektstruktur:
./gulpfile.js./public/./public/index.html
Verwenden Sie den folgenden Befehl, um Gulp und zugehörige Komponenten zu installieren:
NPM Installation-Save-Dev Gulp Gulp-Connect
Gulp-Connect ist ein Gulp-Plug-In, das statische Webserverfunktionen bietet und Leberoadfunktionen integriert.
Als nächstes müssen Sie die Datei gulpFile.js bearbeiten. Der Inhalt lautet wie folgt:
var gulp = require('gulp'), connect = require('gulp-connect') gulp.task('server', function() { connect.server({ root: 'public', livereload: true }) }) gulp.task('html', function() { gulp.src ('./ öffentlich/*.Führen Sie schließlich diesen Webserver aus:
Schluck
Öffnen Sie den Browser und besuchen Sie http: // localhost: 4000. Versuchen Sie dann, den Inhalt der index.html -Datei zu ändern und zu speichern. Unter normalen Umständen sollte die Browser -Seite den geänderten Inhalt automatisch aktualisieren und anzeigen.
Einfacher Vergleich zwischen Gulp und Grunzen
Schauen wir uns ein Beispiel an, konstruieren Sie Sass in Gulp bzw. grunzen:
Grunzen:
sass: { dist: { options: { style: 'expanded' }, files: { 'dist/assets/css/main.css': 'src/styles/main.scss', } }},autoprefixer: { dist: { options: { browsers: [ 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1 ',' iOS 6 ',' Android 4 ']}, Src:' dist/assets/css/main.css ', dest:' dist/assets/css/main.cssGrunT muss Plug-Ins separat konfigurieren und seinen Quell- und Zielpfad angeben. Zum Beispiel nehmen wir ein Archiv als Eingang zum Plug-in-SASS und speichern die Ausgabergebnisse. Beim Einrichten von Autoprefixer müssen Sie die Ausgabe von SASS als Eingabe verwenden, um eine neue Datei zu generieren. Schauen wir uns dieselbe Konfiguration in Gulp an:
Schluck:
gulp.task ('sass', function () {return gulp.src ('src/styles/main.scss') .pipe (sass ({style: 'komprimiert'}) .pipe (autoprefixer ('letztes 2 -Version', 'Safari 5', ie '8', ',', ',', Ie ',', Ie ',', ',', Ie ',', ',', ',', ', 9', '. 4 ')) .pipe (gulp.dest (' dist/assets/css '))});In Gulp müssen wir nur eine Datei eingeben. Nach der Plug-in-SASS-Verarbeitung wird es dann an Plug-in-Autoprefixer übergeben und schließlich wird eine Datei erhalten. Dieser Prozess beschleunigt den Konstruktionsprozess, beseitigt das Lesen und das Schreiben unnötiger Dateien und erfordert nur eine endgültige Datei.