Gulp - E Toolkit fir Automatiséierung vu schmerzhafte Aufgaben an der Entwécklung

Gulp ass e klengen Toolkit deen repetitive Aufgaben automatiséiert. Dës repetitive Aufgaben kompiléieren normalerweis CSS, JavaScript Dateien oder am Fong, wann Dir e Kader benotzt deen sech mat net-Standard JavaScript/CSS Dateien beschäftegt, wëllt Dir en Automatisatiounsinstrument benotzen dat dës Dateie gräift, packt se zesummen a kompiléiert alles sou datt Äre Browser einfach kann verstoen et.

Gulp ass nëtzlech fir déi folgend Aufgaben ze automatiséieren:

  • JS- an CSS-Dateien kompiléieren
  • Browser Säit erfrëscht wann Dir e Fichier späichert
  • En Eenheetstest ausféieren
  • Code Analyse
  • Verännert Dateien an en Zilverzeichnis kopéieren

Fir all d'Fichier'en ze halen, déi Dir braucht fir eng Gulp-Datei ze kreéieren, Äert Automatisatiounsinstrument z'entwéckelen oder Aufgaben ze automatiséieren, musst Dir eng package.json Datei generéieren. De Fichier enthält grondsätzlech Erklärung vu wat an Ärem Projet ass, wéi eng Ofhängegkeeten Dir braucht fir Äre Projet ze maachen.

An dësem Tutorial gitt Dir léiere wéi Dir Gulp installéiert a wéi Dir e puer Basisaufgaben fir Är Projeten automatiséiert. Mir wäerte npm benotzen - wat fir Node Package Manager steet. Et ass mat Node.js installéiert, an Dir kënnt kucken ob Dir schonn Nodejs an npm installéiert hutt mat:

# node --version
# npm --version

Wann Dir et net schonn op Ärem System installéiert hutt, empfeelen ech Iech den Tutorial z'iwwerpréiwen: Installéiert déi lescht Nodejs an NPM Versioun an Linux Systemer.

Wéi installéiere ech Gulp op Linux

Installatioun vu gulp-cli kann mat npm mat dem folgenden Kommando ofgeschloss ginn.

# npm install --global gulp-cli

Wann Dir de Gulp Modul lokal installéiere wëllt (nëmme fir den aktuelle Projet), kënnt Dir d'Instruktioune hei ënnen benotzen:

Erstellt e Projetsverzeichnis a navigéiert doranner:

# mkdir myproject
# cd myproject

Als nächst benotzt de folgende Kommando fir Äre Projet ze initialiséieren:

# npm init

Nodeems Dir de uewe genannte Kommando ausgefouert hutt, gitt Dir eng Serie vu Froen gefrot fir Äre Projet en Numm, Versiounsbeschreiwung an anerer ze ginn. Bestätegt endlech all Informatioun déi Dir uginn hutt:

Elo kënne mir de Gulp Package an eisem Projet installéieren mat:

# npm install --save-dev gulp

D'Optioun --save-dev erzielt npm fir d'package.json Datei mat den neien devDependencies ze aktualiséieren.

Notéiert datt DevDependencies musse während der Entwécklung geléist ginn, während Ofhängegkeeten wärend der Lafzäit. Zënter Gulp ass en Tool dat eis an der Entwécklung hëlleft, muss et zu der Entwécklungszäit geléist ginn.

Loosst eis elo e Gulpfile erstellen. Aufgaben, déi mir wëllen ausféieren, ginn an deem Fichier fonnt. Et gëtt automatesch gelueden wann Dir de Gulp Kommando benotzt. Mat engem Texteditor erstellt eng Datei mam Numm gulpfile.js. Fir den Zweck vun dësem Tutorial wäerte mir en einfachen Test erstellen.

Dir kënnt de folgende Code an Ärem gulpfile.js aginn:

var gulp = require('gulp');

gulp.task('hello', function(done) {
        console.log('Hello world!');
        done();
});

Späichert d'Datei a probéiert et elo mat:

# gulp hello

Dir sollt dat folgend Resultat gesinn:

Hei ass wat den uewe genannte Code mécht:

  • var gulp = require('gulp'); – importéiert de Gulp Modul.
  • gulp.task('Moien', Funktioun (gemaach) { – definéiert eng Aufgab déi vun der Kommandozeil verfügbar ass.
  • console.log('Hallo Welt!'); - dréckt einfach \Hallo Welt! op den Ecran.
  • gemaach(); - Mir benotzen dës Callback Funktioun fir Gulp z'instruéieren datt eis Aufgaben ofgeschloss sinn.

Natierlech war dat hei just e Probe fir ze weisen wéi de gulpfile.js kann organiséiert ginn. Wann Dir déi verfügbar Aufgaben vun Ärem gulpfile.js wëllt gesinn, kënnt Dir de folgende Kommando benotzen:

# gulp --tasks

Gulp huet Dausende vu Plugins verfügbar, all déi verschidde Funktionalitéit ubidden. Dir kënnt se op der Gulp Plugin Säit iwwerpréiwen.

Drënner wäerte mir de minify-html Plugin an engem méi praktesche Beispill benotzen. Mat der Funktioun hei drënner kënnt Dir HTML Dateien miniséieren an se an en neien Verzeechnes placéieren. Awer als éischt wäerte mir de gulp-minify-html Plugin installéieren:

# npm install --save-dev gulp-minify-html

Dir kënnt Är gulpfile.js esou ausgesinn:

# cat gulpfile.js

// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

Da kënnt Dir HTML Dateien minimiséieren andeems Dir folgend Kommandoen benotzt.

# gulp minify-html
# du -sh /src dest/

Gulp ass en nëtzlecht Toolkit deen Iech hëllefe kënnt Är Produktivitéit ze verbesseren. Wann Dir un dësem Tool interesséiert sidd, empfeelen ech Iech staark seng Dokumentatiounssäit ze kontrolléieren, déi hei verfügbar ass.