de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Der Kampf der Build-Skripte: Gulp Vs Grunt

Ich habe bereits darüber geschrieben, wie man mit Gulp beginnt und wie man mit Grunt anfängt. Beide automatisieren unsere Aufgaben, beide verwenden Knoten, und beide erfordern, dass Sie Aufgaben erstellen und Plugins installieren . Aber wundern Sie sich über den Unterschied zwischen den beiden, oder sogar, was ist besser?

In diesem Artikel werde ich mich hauptsächlich auf die Unterschiede zwischen diesen beiden Projekten konzentrieren, die dazu beitragen können, dass Sie entscheiden, welche der beiden für Sie besser ist. Ich werde einen Code verwenden, der mir nicht vertraut ist. Wenn dies der Fall ist, empfehle ich Ihnen, die zwei zuvor veröffentlichten Artikel durchzulesen, bevor Sie beginnen.

Mehr auf Hongkiat.com

  • Wie man mit Gulp anfängt
  • Wie man mit Grunt anfängt

Geschwindigkeit

Der Hauptunterschied zwischen Gulp und Grunt besteht darin, wie sie mit ihren Automatisierungsaufgaben im Inneren umgehen . Gulp verwendet Node-Streams, während Grunt temporäre Dateien verwendet. Lasst uns das ins Englische bringen, sollen wir?

Angenommen, Sie möchten SASS-Code für Ihr Projekt schreiben. Sie möchten Ihren SASS-Code kompilieren und ihn dann eventuell verkleinern.

Grunt behandelt dies mit Zwischendateien, bei denen es sich um Datenträger-E / A-Vorgänge handelt. Ihre SASS-Datei wird kompiliert und dann in eine temporäre Datei geschrieben. Die temporäre Datei wird vom Autoprefixer verwendet und anschließend wird das Endprodukt in die Zieldatei geschrieben.

Gulp kümmert sich um all dieses In-Memory . Ihre Quell-SASS-Datei wird kompiliert, das Ergebnis wird an den Autoprefixer übergeben, ohne in eine Datei geschrieben zu werden, und die Zieldatei wird dann ausgeschrieben.

Im Vergleich zu In-Memory-Operationen sind die Plattenschreibvorgänge langsam, was bedeutet, dass Gulp ( vorerst) einen großen Geschwindigkeitsvorteil hat . Ein Geschwindigkeitsvergleich wurde von tech.tmw durchgeführt, was zeigt, dass die meisten Aufgaben auf Gulp mindestens doppelt so schnell sind. Während dies keine sehr wissenschaftliche Studie war, ist die Tendenz da und ich habe das gleiche mit meinen eigenen Projekten gesehen. Aber wie groß ist der Unterschied in der Geschwindigkeit?

Differenz in Sekunden

Für die meisten Projekte ist das egal. Die meisten Projekte sind klein . Wenn Sie ein WordPress-Theme oder ähnliches erstellen, liegt die Anzahl der Dateien, mit denen Sie arbeiten müssen, innerhalb eines vernünftigen Rahmens. Es spielt keine Rolle, ob Ihre Stylesheets in 400ms oder 800ms kompiliert werden.

Darüber hinaus können die meisten Projekte so strukturiert werden, dass einige der intensivsten Probleme vermieden werden können . Wenn Sie 50 SASS-Dateien haben, können Sie sie während der Entwicklung genauso schnell verketten, so dass sie nicht automatisch korrigiert oder verkleinert werden müssen. Sie müssen die Bilder nicht jedes Mal optimieren, wenn Sie ein Projekt speichern und so weiter.

Selbst wenn Sie wirklich die großen Waffen brauchen, weil Sie Ihre Arbeit auf einen Staging-Server schieben oder wenn Sie ein Repository aktualisieren, macht eine eingebaute Zeit von 5 Sekunden oder 9 Sekunden einen großen Unterschied?

Um das Ganze abzurunden, wird Grunt Unterstützung für Piping in der kommenden Version 0.5 geben, was die Dinge erheblich beschleunigen wird, was dies zu einem strittigen Punkt macht.

Die Gemeinde

Grunt ist schon viel länger als Gulp und hat somit eine bedeutende Nutzerbasis. Grunt erhält im Durchschnitt etwa 37.000 Downloads pro Tag, Gulp bekommt etwas mehr als die Hälfte davon, in der Nähe der 23.000-Marke. Allerdings ist Gulp erst seit anderthalb Jahren da und macht diese Zahl respektabel.

Grunt hat derzeit über 4000 Plugins, während Gulp mehr als 1200 Plugins hat. Laut Google-Trends suchen mehr Leute nach Grunt-ähnlichen Dingen, es gibt mehr Foren, die damit umgehen und generell mehr Community-Unterstützung.

Natürlich ist Gulp auf dem Vormarsch, was bedeutet, dass dies auf lange Sicht ausgeglichen sein wird . Dies ist jedoch eine Barriere für einige Entwickler, insbesondere für diejenigen, die Grunt-basierte Projekte betreiben.

Ich möchte darauf hinweisen, dass die Gemeinschaften für beide sehr nett sind . Soweit ich das beurteilen kann, ist die Beziehung zwischen den Führern in jeder Gemeinschaft erstaunlich und sollte allen als Beispiel dienen. Der Autor von Gulp hat dem Autor des Speed-Test-Vergleichs tatsächlich geholfen, die Timing-Genauigkeiten zu verbessern, die zu einer Verringerung der Zeitunterschiede führen. Das nenne ich einen Gentleman!

Code-Vs-Konfiguration

Anscheinend ist dies der Wendepunkt für viele, aber um ehrlich zu sein, kann ich das Problem hier nicht persönlich sehen.

Das Argument geht so: Gulp ist ein gutes Beispiel dafür, dass Code über die Konfiguration eine gute Sache sein kann, wenn die Konfiguration ein wenig verwirrend wird . Andere Leute sagen, dass, während dies wahr ist und Gulp einfacher zu lesen ist, es schwieriger ist zu schreiben, weil das Piping ein wenig verwirrend sein kann .

Bevor ich eingewogene, hier ist das gleiche Beispiel zuerst in Grunt, dann in Gulp:

 grunt.initConfig ({sass: {dist: {dateien: [{src: 'dev / *. scss', dest: '.tmp / styles', erweitern: true, ext: '.css'}]}}, autoprefixer : {dateien: [{expand: true, cwd: '.tmp / styles', src: '{, * /} * .css', dest: 'css / styles'}]}}, watch: { Stile: {Dateien: ['dev / *. scss'], Aufgaben: ['sass: dist', 'autoprefixer: dist']}}}); grunt.registerTask ('default', ['styles', 'watch']); 
 gulp.task ('sass', funktion () {gulp.src ('dev / *. scss') .pipe (sass ()) .pipe (autoprefixer ()) .pipe (gulp.dest ('css / styles' ));}); gulp.task ('default', function () {gulp.run ('sass'); gulp.watch ('dev / *. scss', funktion () {gulp.run ('sass');});} ); 

Meiner Meinung nach ist es wirklich egal. Sicher, wenn Sie an den ersten Weg gewöhnt sind, müssen Sie vielleicht etwas Zeit damit verbringen, den zweiten herauszufinden, aber das ist auch umgekehrt der Fall. Für mich ist das Argument "es ist verwirrend" völlig ungültig. Jede neue Methode, die Sie lernen, ist zunächst verwirrend, aber wenn Sie sich die Zeit nehmen, die Logik jedes einzelnen zu verstehen, gleicht sich alles aus.

Das heißt, ich persönlich bevorzuge Gulps API, weil es sauberer ist, und es spiegelt die Art und Weise wider, die ich näher an Grunt denke. Das ist natürlich völlig subjektiv und stellt bei Grunt überhaupt kein Problem dar, es ist nur meine persönliche Vorliebe.

Wie man wählt

Ich denke nicht, dass die Frage, ob sowohl Grunt als auch Gulp großartige Werkzeuge sind und Menschen geholfen haben, unzählige Stunden Zeit zu sparen, keine Frage ist. Grunt ist momentan etwas langsamer, hat aber eine viel größere Community. Gulp ist schneller, hat eine sauberere API, aber die Benutzerbasis fehlt.

Ich denke, dass die Entscheidung letztendlich auf Kontinuität, verfügbare Plugins und Präferenzen hinausläuft .

(1) Wenn du Grunt / Gulp schon eine Weile benutzt hast und du damit zufrieden bist, gibt es keinen Grund zum Wechseln.

(2) Wenn Ihr Projekt Plugins benötigt, die nicht von Gulp zur Verfügung gestellt werden und Sie nicht selbst dazu bereit sind, schreiben Sie Grunt.

(3) Wenn die obigen beiden Erwägungen nicht auf Sie zutreffen, wird es sich um eine Präferenz handeln. Ich schlage vor, beide auszuprobieren und zu sehen, was man bei dir hält .

Wie gesagt, ich habe mich für Gulp entschieden, weil ich die cleanere API besser finde, aber ich bin sehr zufrieden mit Grunt, wenn ein Projekt danach verlangt. Was Sie nicht tun sollten, ist zu lesen, dass Mr. Know-it-all sagte, dass Gulp besser ist und akzeptieren Sie es. Während es Unterschiede gibt, gibt es keinen eindeutigen Gewinner und beide Projekte können und werden koexistieren . Probieren Sie sie aus und entscheiden Sie sich selbst.

Hinweis: Sie können auch die Meinung anderer Benutzer wie Keith Cirkel (Ein JavaScript-Berater) berücksichtigen, der Ihnen rät, keines von beiden zu verwenden. In seinem interessanten Warum sollten wir aufhören, Grunt & Gulp Artikel zu verwenden, schlägt er vor, npm zu verwenden.

Weiterführende Literatur

Es gibt viele andere ausgezeichnete Artikel zu diesem Thema. Ich würde wärmstens empfehlen, eine der folgenden für weitere Lektüre; Es tut nie weh, zu lesen, was andere zu sagen haben!

  • Grunt vs Gulp - Jenseits der Zahlen (besonderer Dank für die klaren Beispiele)
  • Schluck, Grunt, was auch immer
  • Wählen Sie: Grunt, Gulp oder npm?
  • Speedtesting Schluck und Grunt
  • Warum sollten wir aufhören, Grunt & Gulp zu benutzen?
  • Baue Kriege (benutze Pfeile um zu navigieren)
  • Keine Notwendigkeit zu grunzen, einen Schluck frische Luft zu nehmen

Die Grundlagen objektorientierter CSS (OOCSS)

Die Grundlagen objektorientierter CSS (OOCSS)

Die Frontend-Entwicklung geht schnell voran mit vielen neuen Techniken, die jedes Jahr hinzugefügt werden. Es kann ein Kampf für Entwickler sein, mit allem Schritt zu halten. Zwischen Sass und PostCSS ist es leicht, sich im Meer der Entwicklungswerkzeuge zu verlieren.Eine neuere Technik ist Object-Oriented CSS, kurz OOCSS genannt.

(Tech- und Design-Tipps)

50 schöne & verlockende Designer Websites

50 schöne & verlockende Designer Websites

Zurückzuschauen, was andere vor Ihnen getan haben, ist eine großartige Möglichkeit, sich inspirieren zu lassen. Dies kann auch zu innovativen Designs führen. In diesem Sinne wohin können wir gehen? Die Antwort ist, andere Webdesigner. Ihr Ziel ist es, ihre Fähigkeiten, ihren Stil und ihre Liebe zum Detail zu fördern und gleichzeitig notwendige Informationen zu vermitteln. Dies

(Tech- und Design-Tipps)