Gulp Tasks auf mehrere Dateien aufteilen

Wenn man viele seiner Entwicklungsschritte mit Gulp löst, wird das gulpfile, in dem sich üblicherweise sämtliche Tasks befinden, sehr schnell sehr lang und unübersichtlich.

Glücklicherweise gibt es ein node-Package namens require-dir mit dem man die Inhalte eines Ordners in einem Dokument einbinden kann. Und das wiederum macht es möglich, gulp Tasks in mehrere Dateien aufzuteilen.

Wie das geht zeige in einem kleinen Beispiel.

Hinweis: Dieser Artikel setzt voraus, dass du schon geübt bist im Umgang mit gulp. Ist das nicht der Fall, kannst du hier die Gulp Grundlagen lernen.

Tasks in eigene Dateien auslagern

In meinem Beispiel befindet sich im root Ordner des Projekts wie gewohnt das gulpfile (gulpfile.js) und ein Ordner (gulp-tasks/) mit zwei Javascript Dateien (styles.js und scripts.js). (Die Namen des Ordners und der Dateien sind vollkommen frei gewählt. Das gulpfile muss aber natürlich immer noch gulpfile.js heißen.)

In den beiden Javascript Dateien wird jeweils gulp eingebunden und die Packages, die für die Ausführung der jeweiligen Tasks notwendig sind. Die Tasks sind thematisch auf die beiden Dateien aufgeteilt.

gulp-tasks/scripts.js

// Gulp und alle JS Plugins einbinden
var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    jshint = require('gulp-jshint');

// Task der Javascript validiert und uglified
gulp.task('scripts', function() {
    return gulp.src('scripts/script.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

gulp-tasks/styles.js

// Gulp und alle CSS Plugins einbinden
var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    minify = require('gulp-minify-css'),
    less = require('gulp-less');

// Task der Less zu CSS kompiliert, minified
// und Sourcemaps erstellt
gulp.task('styles', function() {
    return gulp.src('styles/main.less')
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(minify())
    .pipe(sourcemaps.write('.', { sourceRoot: 'css-source' }))
    .pipe(gulp.dest('dist'));
});

Ausgelagerte Tasks einbinden

Im gulpfile selber wird ebenfalls gulp eingebunden. Um auf die Tasks der Dateien im gulp-tasks Ordner zugreifen zu können, muss require-dir installiert (npm install require-dir --save-dev) und required werden. Den gulp-tasks Ordner kann man auch gleich in der selben Zeile einbinden.

require('require-dir')('gulp-tasks');

Das war es eigentlich schon. Wenn man gewisse Tasks nicht auslagern will, kann man diese weiterhin direkt ins gulpfile schreiben.

gulpfile.js

// Gulp einbinden
var gulp = require('gulp');

// Alle Tasks aus den Dateien im gulp-tasks Ordner holen
require('require-dir')('gulp-tasks');

// Die Tasks 'styles' und 'scripts' sind zwar nicht direkt
// im gulpfile, können aber trotzdem ausgeführt werden 
gulp.task('dist', ['styles', 'scripts']);

Das komplette Beispiel kann man hier herunterladen. Bevor man die Tasks ausführen kann, muss man zuerst alle Dependencies mit npm install downloaden.

Das Auslagern von Tasks in eigene Dateien ist nicht immer notwendig, kann aber bei vielen Tasks von Vorteil sein. Außerdem kann die Aufteilung in eigene Dateien die Wiederverwendbarkeit von Tasks vereinfachen.

Manuel Matuzovic

Frontend Developer aus Wien.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *