A toolkit to automate & enhance your workflow.

https://gulpjs.com/

Gulp kann wiederkehrende Aufgaben der Entwicklung von Webseiten automatisieren und vereinfachen:

• Gulp nutzen
• concat files
• watch files
• start development server with hot reloading
• Mehrere gulp.js Tasks nacheinander ausführen
• Links

Gulp nutzen

Zuerst muss Gulp global mittels NPM installiert werden:

npm install -g gulp-cli

Danach wird Gulp dem aktuellen Projekt hinzugefügt:

npm install --save-dev gulp

Nun muss im Root des Projekts noch eine gulpfile.js Datei erstellt werden. In dieser Datei werden die ganzen Gulp-Aufgaben definiert, die dann über die Konsole ausgeführt werden können. Hier werden JavaScript-Dateien in einen „dist“-Ordner kopiert:

const { src, dest } = require("gulp");

function copy(cb) {
  src('js/*.js')
      .pipe(dest('dist/js'));
  cb(); //callback to indicate function finished
}

exports.copy = copy;

Die erstellte Aufgabe kann dann in der Konsole mittels „gulp copy“ ausgeführt werden:

Für weitere umfassendere Aufgaben wird oft eines der mehr als 3000 Gulp-Plugins benötigt.

concat files

Sollen mehrere Dateien in eine große Datei zusammengeführt werden, kann man das „gulp concat“ Plugin nutzen:

//installiert das Plugin
npm install --save-dev gulp-concat

const { src, dest } = require("gulp");
const concat = require("gulp-concat");

function concatFiles(cb) {
  src([
    "./js/grapheditor/Editor.js",
    "./js/grapheditor/EditorUi.js",
    "./js/grapheditor/Sidebar.js",
    "./js/grapheditor/Graph.js",
    "./js/grapheditor/Format.js",
    "./js/grapheditor/Shapes.js",
    "./js/grapheditor/Actions.js",
    "./js/grapheditor/Menus.js",
    "./js/grapheditor/Toolbar.js",
    "./js/grapheditor/Dialogs.js",
  ])
    .pipe(concat("scripts.js"))
    .pipe(dest("dist/js"));

  cb();
}

exports.concat = concatFiles;

watch files

Mit Hilfe von „watch“ kann überprüft werden, ob sich eine Datei verändert hat. Trifft dies zu, kann eine weitere Aufgabe automatisch ausgeführt werden. Hier zum Beispiel, werden alle JavaScript Dateien im Ordner „js“ überwacht. Wird eine Datei geändert, wird die oben erstellte Funktion „concatFiles“ aufgerufen:

const { src, dest, watch } = require("gulp");
const concat = require("gulp-concat");

function watchFiles(cb) {
  watch("js/*.js", concatFiles);
}

exports.watch = watchFiles;

start development server with hot reloading

Mit Hilfe des browser-sync Plugins kann man auch mittels gulp.js einen Development-Server mit hot-reloading starten:

npm install --save-dev browser-sync

const sync = require("browser-sync").create();

function browserSync(cb) {
  sync.init({
    server: {
      baseDir: "./dist",
    },
  });

  watch("js/grapheditor/*.js", concatFiles);
}

exports.sync = browserSync;

//concatFiles Änderung:
function concatFiles(cb) {
  src([
    "./js/grapheditor/Editor.js",
	...
  ])
    .pipe(concat("scripts.js"))
    .pipe(dest("dist/js"))
    .pipe(sync.stream()); //neu hinzugefügt

  cb();
}

Mehrere gulp.js Tasks nacheinander ausführen

Mit Hilfe des in gulp.js bereits vorhandenen „series“-Moduls können mehrere Tasks nacheinander ausgeführt werden.

const { src, dest, watch, series} = require("gulp");
...
exports.start = series(copy, concatFiles, browserSync);

Links:

• Getting Started with Gulp.js