Automatisieren Sie Ihren Arbeitsablauf mit Gulp JS

Einführung

In diesem Artikel führe ich Sie durch die grundlegenden, aber nützlichen Schritte, die Ihnen helfen, den Gulp-Workflow im Verzeichnis Ihres Projekts einzurichten. Das wird Ihnen helfen, alle Ihre Style- und Skriptdateien usw. in eine einzige Datei zusammenzufassen und die Gesamtladezeit Ihrer Webanwendung mit einer minimalen Anzahl von HTTP-Anfragen an den Server zu erhöhen.

Ich gehe davon aus, dass Sie mit dem CLI (Command Line Interface) noch nicht vertraut sind, deshalb werde ich Sie durch jeden Schritt im Detail führen, um Gulp für Ihre Anwendung einzurichten. Lassen Sie uns also von Anfang an beginnen.

Node JS installieren

Um ein Build-Tool verwenden zu können, müssen wir Node in unserem System installiert haben. Um nun Node zu installieren, gehen Sie zu https://nodejs.org/en/download/ und laden Sie das entsprechende Build für Ihr Betriebssystem herunter und installieren Sie es. Die Installation von Node beinhaltet auch NPM, den Paketmanager von Node. Wir werden uns später in diesem Artikel ansehen, wie er funktioniert, wenn wir Gulp und alle seine Plugins installieren.

Node und NPM testen

Wenn Sie bereits mit der Befehlszeilenschnittstelle vertraut sind, können Sie diesen Schritt überspringen.

Wie eingangs erwähnt, gehe ich davon aus, dass Sie mit der Verwendung der Befehlszeilenschnittstelle, die Sie als Terminal unter OSX/Linux und als Eingabeaufforderung unter Windows kennen, noch nicht vertraut sind. Es gibt zwar einige wirklich nützliche Tools, die die Kommandozeilenschnittstelle nutzen, wie z.B.: Git, Gulp, Sass, Composer usw.

Lesen Sie auch: Mean Stack Interview Fragen

Sie haben nun Node erfolgreich in Ihrem System installiert, aber wie sollten Sie testen, ob es perfekt installiert ist. Nun, das ist ganz einfach: Öffnen Sie Ihre Kommandozeilenschnittstelle und geben Sie ein:

$ node -v

und um zu überprüfen, ob NPM einwandfrei funktioniert,

$ npm -v

Diese Befehlszeilen sollten die Versionsnummern in der nächsten Zeile zurückgeben. Wenn Sie bei der Ausführung dieser Befehle Fehler erhalten, muss es Probleme bei der Installation geben. Gehen Sie dann zum vorherigen Schritt zurück und installieren Sie es erneut.

Initiieren Sie NPM im Verzeichnis Ihres Projekts

Ich hoffe, Sie haben sich bisher gut mit der Kommandozeilenumgebung auseinandergesetzt und sind nun bereit für den nächsten Schritt.
Wechseln wir nun in das Verzeichnis Ihres Arbeitsprojekts, damit wir alles einrichten können. Da ich auf einem Windows-Rechner arbeite, könnte Ihres ein anderes sein, aber das macht überhaupt keinen Unterschied, die Logik des Kontextes bleibt die gleiche.

C:\xampp\htdocs\myproject\

Once in your project directory, run the following command in your CLI to initiate package.json file, that will require all of your dependencies.

$ npm init

Wenn Sie diesen Befehl ausführen, werden Ihnen einige Fragen gestellt, um Ihre json-Datei einzurichten. Diese sind völlig optional und Sie können sie entweder leer lassen, sie werden dann alle Standardwerte übernehmen, zum Beispiel

name: <your package name>
version: <your package version >
description: <your package description>
Entry Point: <your entry js file>
test Command: <your package test command>
Git Repository: <your git repo >
Keywords: <basic keywords for your package>
Author: <package author name>
License: <your package license>

Nachdem alle Informationen eingerichtet wurden, können Sie Ihre package.json-Datei mit allen eingegebenen Informationen sehen.

Die Grundsatzphase: Installation von Gulp

Bis jetzt haben wir gesehen, wie wir unseren Node einrichten und unseren Paketmanager in unserem Projektverzeichnis initiieren können. Jetzt ist es an der Zeit, Gulp in unserem Projektverzeichnis zu installieren.

$ npm install -g gulp

Der obige Befehl installiert gulp global in Ihrem System, so dass der Befehl gulp global in Ihrem System verfügbar ist.
Lassen Sie uns verstehen, was dieser Befehl hier genau tut,

npm install: Es werden alle Abhängigkeiten installiert, die in Ihrer package.json-Datei enthalten sind.
-g: Dieses Flag bedeutet, dass das Paket global in Ihrem System installiert wird.
gulp: Dies ist der Name des zu installierenden Pakets.

Sobald Ihr System die Installation von Gulp abgeschlossen hat, führen Sie den Befehl genau so aus, wie Sie es für Node und NPM getan haben,

$ gulp -v

Wenn es perfekt in Ihrem System installiert ist, werden Sie die Gulp-Version in der nächsten Zeile sehen.
Ich hoffe, dass Sie es geschafft haben, mit mir durch diesen Punkt leicht zu kommen. Gehen wir zum nächsten Schritt über und installieren wir Gulp und seine Plugins für unseren Entwicklungs-Build.

$ npm install gulp --save-dev

Wie Sie vielleicht bemerkt haben, haben beide Installationsbefehle nur einen einzigen Unterschied, nämlich das Flag - save-dev. Sie fragen sich jetzt vielleicht, was dieses Flag bewirkt? Nun, das ist ganz einfach: Mit diesem Flag wird NPM angewiesen, die Abhängigkeit zu unserer devDependencies-Liste in unserer package.json-Datei hinzuzufügen.
Abhängigkeiten helfen uns, unsere Pakete in der Entwicklungs- und Produktionsumgebung zu organisieren. Weitere Einzelheiten finden Sie in der offiziellen Dokumentation zu NPM-Abhängigkeiten.

Ok, wir sind jetzt weit gekommen und ziemlich nahe an dem, was wir hier erreichen wollen.

Gulp ist nun installiert, wir müssen ihm einige Anweisungen geben, damit wir wissen, welche Aufgaben wir mit diesem Gulp-Paket durchführen müssen. Lassen Sie uns zunächst entscheiden, was wir mit unseren Skripten und Stildateien machen wollen. Lassen Sie mich Ihnen meinen Arbeitsansatz erläutern.

Hinzufügen einiger weiterer nützlicher Plugins

Um das Gulp-Paket zum Laufen zu bringen, müssen wir unsere package.json-Datei ein wenig aktualisieren. Der beste Weg, dies zu tun, ist das Hinzufügen der Abhängigkeiten durch unser eigenes CLI-Tool. Hier fügen wir nur die Grundlagen hinzu, also legen wir los.

gulp-concat
gulp-cssmin
gulp-rename
gulp-sass
gulp-uglify
streamqueue

Gehen wir zunächst jedes dieser Plugins einzeln durch

• gulp-concat — fügt die Quelldateien zusammen und mischt sie in die definierte Datei.
• gulp-cssmin — minimiert CSS mit Gulp.
• gulp-rename — bietet einfache Methoden zur Umbenennung von Dateien.
• gulp-sass — Plugin für die Kompilierung von scss-Dateien, das Sie überspringen können, wenn Sie keinen SASS-Compiler für Ihre Stile verwenden.
• gulp-uglify — Dateien mit UglifyJS verkleinern
• streamqueue — kompiliert die Quelldateien eine nach der anderen, um ihre inhaltliche Reihenfolge zu wahren. (HINWEIS: Dies ist ein alternativer Ansatz, um Ihre src-Dateien in eine Warteschlange zu stellen).

$ npm install gulp-concat gulp-cssmin gulp-rename gulp-sass  gulp-uglify streamqueue --save-dev

Führen Sie nun den obigen Befehl aus und lassen Sie die Befehlszeile all diese Plugins eines nach dem anderen installieren. Nachdem die Installation abgeschlossen ist, können Sie Ihre package.json-Datei erneut öffnen und die in der Datei vorgenommenen Änderungen sehen. Diese Abhängigkeiten stehen Ihnen nun im Verzeichnis Ihres Projekts zur Verfügung.

Der nächste große Schritt: Erstellen der Gulp-Datei

Jetzt, wo wir alles Notwendige eingerichtet haben. Erstellen Sie eine Datei mit dem Namen gulpfile.js im Stammverzeichnis Ihres Projekts und beginnen Sie mit der Eingabe, wir werden Schritt für Schritt vorgehen, damit Sie nicht durcheinander kommen.

Erfordern der Abhängigkeiten

var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);
var concat = require(‘gulp-concat’);
var rename = require(‘gulp-rename’);
var uglify = require(‘gulp-uglify’);
var streamqueue = require(‘streamqueue’);
var cssmin = require(‘gulp-cssmin’);

Jetzt werden wir die Gulp-Aufgaben eine nach der anderen einrichten, beginnen wir mit unseren CSS-Dateien.

CSS-Aufgabe

gulp.task(‘css’, function ()
{
 return gulp.src([‘css/app.css’,'css/base.css'])
 .pipe(cssmin())
 .pipe(concat(‘style.css’))
 .pipe(rename({suffix: ‘.min’})) //optional
 .pipe(gulp.dest(‘assets/css/’));
});

Lassen Sie sich nicht verwirren, ich werde Ihnen erklären, was hier passiert.
Nehmen wir an, Sie haben ein CSS-Verzeichnis in Ihrem Projektstamm, das einige .css-Dateien enthält, die Ihre src werden. Im nächsten Schritt werden wir die src-Dateien mit cssmin() verkleinern. Als Nächstes fassen wir das verkleinerte CSS in einer Datei namens style.css zusammen und benennen sie mit dem Suffix .min um. Schließlich geben wir den gewünschten Speicherort für diese Datei an. In meinem Fall ist es assets/css/style.min.css. Einfach genug, oder? Kommen wir nun zur JS-Aufgabe.

JS-Aufgabe

gulp.task(‘js’, function ()
{
 return streamqueue({objectMode: true},
 gulp.src(‘libs/jquery.min.js’),
 gulp.src(‘libs/jquery.bxslider.min.js’),
 gulp.src(‘libs/pushy.js’),
 gulp.src(‘libs/bootstrap.min.js’),
 gulp.src(“libs/product-images.js”)
 )
 .pipe(concat(‘all.js’))
 .pipe(uglify())
 .pipe(gulp.dest(‘assets/js/’));
});

Wie Sie vielleicht bemerkt haben, haben wir hier streamqueue() statt nur in einer Reihe von gulp.src(). Es tut fast das Gleiche, was wir zuvor mit der CSS-Aufgabe getan haben, dies wird als der alternative Weg, um eine geordnete Zusammenstellung von Dateien zu halten. Sie können jeden dieser Ansätze verwenden.
Das eine neue Plugin, das hier verwendet wird, ist uglify(), das Ihren kompilierten JavaScript-Code verkleinert und in den angegebenen Pfad einfügt. In diesem Fall ist es assets/js/all.js

Nun, wenn Sie eine Echtzeit-Magie haben möchten, die alle Änderungen an Ihrer kompilierten Datei durchführt, während Sie Änderungen an Ihrem Code vornehmen.
Wenn ja, dann können Sie diesen Watcher Task auch in Ihre Gulpfile einfügen.

Aufgabe beobachten

gulp.task(‘watch’, function ()
{
 gulp.watch(‘css/**/*.css’, [‘css’]);
 gulp.watch(‘libs/*.js’, [‘js’]);
});

Jetzt brauchen wir einen Standard-Task, um unsere Gulpfile zu beenden, was ein Muss in Ihrer Gulpfile ist.

Standard-Aufgabe

gulp.task(‘default’, [‘css’, ‘js’, ‘watch’]);

Endgültige Gulpfile

Ihre endgültige gulpfile.js sollte nun so aussehen

var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);
var concat = require(‘gulp-concat’);
var rename = require(‘gulp-rename’);
var uglify = require(‘gulp-uglify’);
var streamqueue = require(‘streamqueue’);
var cssmin = require(‘gulp-cssmin’);
gulp.task(‘css’, function ()
{
return gulp.src([‘css/app.css’,'css/base.css'])
.pipe(cssmin())
.pipe(concat(‘style.css’))
.pipe(rename({suffix: ‘.min’})) //optional
.pipe(gulp.dest(‘assets/css/’));
});
gulp.task(‘js’, function ()
{
return streamqueue({objectMode: true},
gulp.src(‘libs/jquery.min.js’),
gulp.src(‘libs/jquery.bxslider.min.js’),
gulp.src(‘libs/pushy.js’),
gulp.src(‘libs/bootstrap.min.js’),
gulp.src(“libs/product-images.js”)
)
.pipe(concat(‘all.js’))
.pipe(uglify())
.pipe(gulp.dest(‘assets/js/’));
});
gulp.task(‘watch’, function ()
{
gulp.watch(‘css/**/*.css’, [‘css’]);
gulp.watch(‘libs/*.js’, [‘js’]);
});
gulp.task(‘default’, [‘css’, ‘js’, ‘watch’]);

Wenn Sie die Änderungen vorgenommen haben, ist es an der Zeit, weiterzumachen und zu testen, wie Gulp Ihr Leben tatsächlich erleichtert.

Öffnen Sie Ihr CLI und führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Sie werden sehen, wie die Aufgaben beginnen und enden.

 $ gulp

Alternativ können Sie auch alle Aufgaben einzeln ausführen.

$ gulp css
$ gulp js
$ gulp watch

Gehen Sie nun zu Ihren Dateiverzeichnissen. Sie sollten Ihre minimierten Dateien an den angegebenen Pfaden sehen. Falls nicht, befolgen Sie die Schritte noch einmal sorgfältig.

Gist-Datei

Hier können Sie sich informieren gist für eine Gulp-Starterdatei für Ihr Projekt.

Fazit

Jetzt müssen Sie nur noch diese einzelnen Dateien in Ihre Header einfügen, um alle Assets zu laden.

Ich empfehle Ihnen, dies bei jedem einzelnen Projekt zu praktizieren. Es kostet Sie höchstens 5 Minuten Ihrer Zeit, spart Ihnen aber später eine Menge.

Ich hoffe, es hat euch Spaß gemacht, durch diesen Prozess der Automatisierung eurer Stile und Skripte zu lernen.
Wenn euch mein Artikel gefallen hat, nehmt euch die Zeit, ihn zu liken oder mir einen Kommentar zu hinterlassen. Ihr könnt mir auch folgen auf Twitter.