gulp Tutorial
Erste Schritte mit Schluck

Bemerkungen

Versionen

Installation oder Setup

1. Installieren Sie Node.js und NPM:

Gulp erfordert Node.js und NPM, den Paketmanager von Node. Die meisten Installationsprogramme enthalten NPM mit Node.js. Schlagen Sie in der Installationsdokumentation nach oder vergewissern Sie sich, dass sie bereits installiert ist, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

npm -v
// will return NPM version or error saying command not found

2. Installieren Sie gulp global:

Wenn Sie zuvor eine globale Version von gulp installiert haben, führen Sie npm rm --global gulp , um sicherzustellen, dass Ihre alte Version nicht mit gulp-cli kollidiert.

$ npm install --global gulp-cli

3. Initialisieren Sie Ihr Projektverzeichnis:

$ npm init

4. Installieren Sie gulp in Ihrem Projekt devDependencies:

$ npm install --save-dev gulp

5. Erstellen Sie eine gulpfile.js im Stammverzeichnis Ihres Projekts:

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

6. Schluck laufen:

$ gulp

Die Standardaufgabe wird ausgeführt und nichts ausgeführt.

Verwenden Sie gulp <task> <othertask> um einzelne Aufgaben gulp <task> <othertask> .

Aufgabenabhängigkeit

Sie können Aufgaben in Reihe ausführen, indem Sie einen zweiten Parameter an gulp.task() .

Dieser Parameter ist ein Array von Aufgaben, die ausgeführt und ausgeführt werden müssen, bevor Ihre Aufgabe ausgeführt wird:

var gulp = require('gulp');

gulp.task('one', function() {
   // compile sass css
});

gulp.task('two', function() {
   // compile coffeescript
});

// task three will execute only after tasks one and two have been completed
// note that task one and two run in parallel and order is not guaranteed
gulp.task('three', ['one', 'two'], function() {
   // concat css and js
});

// task four will execute only after task three is completed
gulp.task('four', ['three'], function() {
   // save bundle to dist folder
});

Sie können die Funktion auch weglassen, wenn Sie nur ein Bündel von Abhängigkeitstasks ausführen möchten:

gulp.task('build', ['array', 'of', 'task', 'names']);

Hinweis: Die Tasks werden parallel (alle gleichzeitig) ausgeführt. Gehen Sie daher nicht davon aus, dass die Tasks der Reihe nach gestartet / beendet werden. gulp.series() gulp v4 gulp.series() , sollte gulp.series() verwendet werden, wenn die Reihenfolge der Ausführung von Abhängigkeitstasks wichtig ist.

Concat-js-Datei im Unterordner mit gulp

var gulp = require('gulp'); 

// include plug-ins
var uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

// Minified file
gulp.task('packjsMin', function() {
   return gulp.src('node_modules/angular/*.js')
      .pipe(concat('script.js'))
      .pipe(uglify())
      .pipe(gulp.dest('Scripts'));
});

//Not minified file
gulp.task('packjs', function () {
    return gulp.src('node_modules/angular/*.js')
      .pipe(concat('allPackages.js'))
      .pipe(gulp.dest('Scripts'));
});

Schluck CLI-Dokumente

Flaggen

gulp hat sehr wenige Fahnen zu wissen. Alle anderen Flags können bei Bedarf verwendet werden.

• -v oder --version zeigt die globale und lokale Version des Schluckens an
• --require <module path> erfordert ein Modul, bevor das gulpfile ausgeführt wird. Dies ist nützlich für Transpiler, hat aber auch andere Anwendungen. Sie können mehrere --require Flags verwenden
• --gulpfile <gulpfile path> setzt den Pfad der gulpfile manuell. Nützlich, wenn Sie mehrere Gulpfiles haben. Dadurch wird die CWD auch auf das gulpfile-Verzeichnis gesetzt
• --cwd <dir path> setzt die CWD manuell. Die Suche nach dem Gulpfile sowie die Relativität aller Anforderungen wird von hier aus erfolgen
• -T oder --tasks zeigt den Aufgabenabhängigkeitsbaum für die geladene Datei an
• --tasks-simple zeigt eine Klartextliste mit Aufgaben für die geladene Datei an
• --color zwingt Schluck- und Schluck-Plugins, Farben anzuzeigen, auch wenn keine Farbunterstützung erkannt wird
• --no-color zwingt Schluck- und Schluck-Plugins, auch wenn eine Farbunterstützung erkannt wird, keine Farben anzuzeigen
• --silent deaktiviert die gesamte Protokollierung

Die CLI fügt process.env.INIT_CWD hinzu, die ursprüngliche cwd, von der sie gestartet wurde.

Aufgabenspezifische Flags

In diesem StackOverflow- Link finden Sie Informationen zum Hinzufügen von aufgabenspezifischen Flags

Aufgaben

Aufgaben können ausgeführt werden, indem gulp <task> <othertask> . gulp Sie gulp ausführen, wird die von Ihnen registrierte Aufgabe namens default . Wenn keine default vorhanden ist, wird ein Fehler ausgegeben.

Compiler

Eine Liste der unterstützten Sprachen finden Sie unter Interpret . Wenn Sie Unterstützung für eine neue Sprache hinzufügen möchten, senden Sie dort Pull-Anfrage / offene Probleme.