NPM Installieren Sie Gulp-Save-dev
Was ist Schlupf?
Gulp ist eine neue Generation von Tools für Front-End-Projektbuilding. Sie können Gulp und seine Plugins verwenden, um Ihren Projektcode (weniger, SASS) zu kompilieren und auch Ihren JS- und CSS -Code zu komprimieren und sogar Ihre Bilder zu komprimieren. Gulp hat nur eine kleine Menge API, daher ist es sehr einfach zu lernen. Gulp verwendet Stream, um Inhalte zu verarbeiten. Der Knoten hat eine Reihe von Automatisierungswerkzeugen wie Bower, Yeoman, Grunzen usw. hervorgebracht.
Ähnlichkeiten und Unterschiede zwischen Gulp und Grunzen
Einfach zu verwenden: Verwenden von Code über Konfigurationsstrategien hält Gulp einfache und komplexe Aufgaben überschaubar.
Effizient: Durch die Nutzung des leistungsstarken Stroms von Node.js können Sie die Konstruktion schneller abschließen, ohne Zwischendateien auf die Festplatte zu schreiben.
Hohe Qualität: Die strengen Plugin -Richtlinien von Gulp, um sicherzustellen, dass Plugins einfach sind und so wie Sie es erwarten.
Einfach zu lernen: Durch die Minimierung von APIs können Sie in kürzester Zeit Schlupflinge lernen. Die Build -Arbeit ist genau wie Sie es sich vorgestellt haben: Es ist eine Reihe von Flow -Pipelines.
Da Gulp in node.js geschrieben ist, müssen Sie NPM auf Ihrem Terminal installieren. NPM ist der Node.js -Paket -Manager, also installieren Sie zuerst Node.js auf Ihrem Computer.
GULP -Installationsbefehl
sudo npm install -g gulp
Erstellen Sie im Stammverzeichnis eine neue Datei Package.json -Datei
npm init.
Installieren Sie das Gulp -Paket
Geben Sie nach der Installation Gulp -v erneut ein, um die Versionsnummer anzuzeigen, wie in der folgenden Abbildung gezeigt, erfolgreich:
Plug-Ins installieren
Installieren Sie häufig verwendete Plugins:
Zusammenstellung von SASS (Gulp-Ruby-Sass)
Fügen Sie automatisch das CSS-Präfix hinzu (Gulp-Autoprefixer)
Komprimierte CSS (Gulp-Minify-CSS)
JS-Code-Überprüfung (Gulp-JSHINT)
JS-Dateien zusammenführen (Gulp-Concat)
Komprimierter JS-Code (Gulp-Uuglify)
Druckbild (Gulp-Imagemin)
Aktualisieren Sie die Seite automatisch (Gulp-Leberoad)
Bildcache, nur wenn das Bild ersetzt wird (Gulp-Cache)
Erinnern ändern (Gulp-nicht-oder-nicht)
Löschen Sie die Datei (Del)
Um diese Plugins zu installieren, müssen Sie den folgenden Befehl ausführen:
Die Codekopie lautet wie folgt:
$ npm Installieren Sie Gulp-Ruby-Sass Gulp-Autoprefixer Gulp-Minify-CSS Gulp-JSHINT GULP-CONCAT GULP-UGLIFY GULP-IMAGEMIN GULP-NOTIFY GULP-RENAME GULP-LVULP-CACHE DE-SAVE-DEV-DEV
-Save und -Save -dev können Ihnen die Schritte speichern, um die Datei package.json manuell zu ändern.
NPM Installieren Sie Modulname -Save -Save
Fügen Sie automatisch Modul- und Versionsnummern zum Abschnitt Abhängigkeiten hinzu
NPM Installieren Sie Modulname -save-dev
Fügen Sie dem Abschnitt DevDependencies automatisch Modul- und Versionsnummern hinzu
GULP -Befehl
Sie müssen nur 5 Gulp -Befehle kennen
gulp.task (name [, dEPs], fn) Definieren Sie den Aufgabenname: Aufgabenname DEPS: Abhängigkeit Aufgabe Name Fn: Rückruffunktion
gulp.run (Aufgaben ...): Führen Sie mehrere Aufgaben parallel wie möglich parallel aus
Gulp.Watch (Glob, FN): Wenn sich Glob -Inhalt ändert, führen Sie FN aus
Gulp.src (GLIB): Setzen Sie den Pfad zur zu verarbeitenden Datei, die mehrere Dateien in Form eines Arrays sein kann, oder es kann regelmäßig sein
gulp.dest (Pfad [, Optionen]): Legen Sie den Pfad fest, um die Datei zu generieren
Glob: Kann ein direkter Dateipfad sein. Seine Bedeutung ist Musterübereinstimmung.
Die Dateien, die von Gulp Guides -verwandten Plugins über die Pipeline (PIPE ()) API verarbeitet werden sollen. Führen Sie Dateiverarbeitungsaufgaben über Plug-Ins aus.
gulp.task ('default', function () {...});Die Gulp.Task -API wird zum Erstellen von Aufgaben verwendet. Sie können $ gulp [Standard] in die Befehlszeile (optional für Klammern) eingeben, um die oben genannten Aufgaben auszuführen.
Gulp Offizielle API -Dokumentation: https://github.com/gulpjs/gulp/blob/master/docs/api.md
Gulp Plug-In-Sammlung: http://gulpjs.com/plugins/
Beginnen Sie mit dem Aufbau des Projekts
Erstellen Sie eine neue Datei gulpFile.js im Projektroot -Verzeichnis und fügen Sie den folgenden Code ein:
// GULP- und UGLIFY-Plugins in das Projekt Root Directory var gulp = require ('gulp'); var uglify = required ('gulp-exlify');HINWEIS: Der Name von gulpFile.js kann nicht geändert werden.
Das Projekt muss Plug-Ins verwenden und umbenennen und den folgenden Befehl ausführen, um zu installieren:
npm install-Save-dev gulp-exlifynpm install-Save-dev Gulp-Rename
Nehmen Sie mein Beispiel, geben Sie das Verzeichnis ein, in dem sich gulpFile.js befindet:
CD/Benutzer/Trigkit4/Gulp-Test
Dann eingeben:
var gulp = required ('gulp'); var uglify = required ('gulp-exlify'); var umbename = required ('gulp-rename'); .pipe (gulp.dest ('dist'));});In diesem Befehl werden alle Abhängigkeiten unter package.json installiert, wie in der folgenden Abbildung gezeigt:
Komplette gulpfile.js
// Load plug-in var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), imagemin = erfordern ('gulp-iMagemin'), umbenennen = require ('gulp-rename'), clean = required ('gulp-clan'), concat = Require ('gulp-concat'), benachrichtigen, benachrichtigen = erfordern ('gulp-nicht-teure'), cache = fordern ('gulp-cache'), livereload = ('gulp-livereload'). // Style gulp.task('styles', function() { return gulp.src('src/styles/main.scss') .pipe(sass({ style: 'expanded', })) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4 ')) .pipe (gulp.dest (' dist/styles ')) .pipe (umbename ({Suffix:' .min '}) .pipe (minifycss () .pipe (gulp.dest (' dist/styles ') .pipe ({{message:' stiles tasks complete '})); // script gulp.task ('scripts', function () {return gulp.src ('src/scripts/**/*. Js') .pipe (jStin ('. Js') .pipe (jshint ('. Js') .pipe (jshintrc '). .pipe (concat ('main.js')) .pipe (gulp.dest ('dist/scripts') .pipe (umbename ({Suffix: '.min'}) .pipe (uglify ()) .pipe (gulp.dest ('dist/scripts') .pipe (notify ({{message: '). // Bild gulp.task ('Images', function () {return gulp.src ('src/bilder/**/*') .pipe (cache (imagemin ({optimizationLevel: 3, progressiv: true, true)) .pipe (gulp.dest ('dist/dist/bootion') .pipe .pipe .pipe .pipe .pipe .pipe. }));}); // clean gulp.task ('clean', function () {return gulp.src (['dist/styles', 'dist/scripts', 'dist/images'], {read: false}) .pipe (clean ());}); // Task voreinstieg gulp.task ('Standard', ['Clean'], function () {gulp.start ('styles', 'scripts', 'bilder');}); // Guard gulp.task ('Watch', function () {// Guard alle .Scss -Dateien gulp.watch ('src/styles/**/*. Scss', ['styles']; // HATE ALL .JS -Dateien Gulp.watch ('src/scripts/**/*. gulp.watch ('src/scripts/**/*. JS', 'scripts']; gulp.watch (['dist/**']). on ('ändern', Funktion (Datei) {Server.Changed (Datei.Path);}); });HINWEIS: PIPE () ist eine Methode zum Bestehen von Datenströmen im Stream -Modul. Der erste Parameter ist die Plug-in-Methode. Das Plug-In empfängt Dateien, die aus dem Upstream fließen, verarbeiten und dann nach unten fließen.
gulp.task ('Taskame', function () {return gulp.src ('Dateipfad') .pipe (...) .pipe (...) // Bis zum letzten Schritt der Task.pipe (...);});Gulp Plugin
Gulp-GH-Seiten: Verwenden Sie Gulp, um HTML-Dokumente durch Markdown zu generieren und auf Git-Seiten hochzuladen
https://github.com/shinnn/gulp-gh-pages
var gulp = require ('gulp'); var ghpages = require ('gulp-gh-pages'); gulp.task ('deploy', function () {return gulp.src ('./ dist/**/*') .pipe (ghPages ());});GULP-JADE-Plugin: Kompilieren Sie Jade in eine HTML-Datei
Gulp-ohne Plugin: Weniger in CSS-Datei kompilieren
var weniger = erfordern ('gulp-less'); var path = require ('path'); gulp.task ('weniger', function () {return gulp.src ('./ weniger/**/*. Less') .pipe (weniger ({Pfad: [path.join (__ Dirname, 'weniger', ')}) .pipe (gulp.dest (' ./public/cubly/cs Leichter Server var gulp = required ('gulp'); var gls = require ('gulp-live-server'); gulp.task ('serve', function () {// 1. Mit Standardeinstellungen servieren var server = gls.static (); // gleich mit gls.static ('public', 3000); server.start (); // 2. Bei benutzerdefinierter Port var Server = Gls.static ('Distatic', 8888). '.tmp']);Die Schlupfleberlast kann in Echtzeit speichern und aktualisieren
GULP-LOAD-PLUGINS: Laden Sie das beliebige Gulp-Plugin automatisch in Ihre Paket.json-Datei
$ npm install-Save-dev Gulp-Load-Plugins
Beispielsweise lautet eine bestimmte Paket.json -Datei wie folgt:
{"Abhängigkeiten": {"Gulp-jsint": "*", "Gulp-Concat": "*"}}Fügen Sie den folgenden Code in gulpFile.js hinzu:
var gulp = require ('gulp'); var gulploadplugins = require ('gulp-load-plugins'); var plugins = gulploadplugins (); Plugins.jsHINT = require ('gulp-jSint'); Plugins.concat = fordert ('gulp-concat');Gulp-Babel: Gulps Babel-Plugin,
$ npm Install-Save-Dev Gulp-Babel Babel-Preset-ES2015
Wie man verwendet:
const gulp = require ('gulp'); const babel = require ('gulp-babel'); gulp.task ('default', () => {return gulp.src ('src/app.js') .pipe (babel ({Presets: ['ES2015']}) .pipe (gulp.dest ('));Offizieller GitHub: https://github.com/gulpjs/gulp