Gulp - Et værktøjssæt til automatisering af smertefulde opgaver under udvikling

Gulp er et lille værktøjssæt, der automatiserer gentagne opgaver. Disse gentagne opgaver er normalt at kompilere CSS, JavaScript-filer eller dybest set når du bruger en ramme, der beskæftiger sig med ikke-standardiserede JavaScript/CSS-filer, skal du bruge et automatiseringsværktøj, der griber disse filer, pakke dem sammen og kompilere alt, så din browser let kan forstå det.

Gulp er nyttigt til automatisering af følgende opgaver:

  • Kompilering af JS- og CSS-filer
  • Opdatering af browserside, når du gemmer en fil
  • Kør en enhedstest
  • Kodeanalyse
  • Kopiering af ændrede filer til et målkatalog

For at holde styr på alle de filer, du har brug for til at oprette en gulp-fil, udvikle dit automatiseringsværktøj eller automatisere opgaver, skal du generere en package.json-fil. Filen indeholder grundlæggende forklaring på, hvad der er inde i dit projekt, hvilke afhængigheder du har brug for for at få dit projekt til at fungere.

I denne vejledning lærer du, hvordan du installerer Gulp, og hvordan du automatiserer nogle grundlæggende opgaver til dine projekter. Vi skal bruge npm - som står for node-pakkehåndtering. Det er installeret med Node.js, og du kan kontrollere, om du allerede har installeret Nodejs og npm med:

# node --version
# npm --version

Hvis du ikke allerede har det installeret på dit system, anbefaler jeg dig at tjekke vejledningen: Installer nyeste Nodejs og NPM-version i Linux-systemer.

Sådan installeres Gulp i Linux

Installation af gulp-cli kan afsluttes med npm ved hjælp af følgende kommando.

# npm install --global gulp-cli

Hvis du vil installere gulp-modulet lokalt (kun for det aktuelle projekt), kan du bruge instruktionerne nedenfor:

Opret en projektmappe, og naviger i den:

# mkdir myproject
# cd myproject

Brug derefter følgende kommando til at initialisere dit projekt:

# npm init

Efter at have kørt ovenstående kommando, vil du blive bedt om en række spørgsmål for at give dit projekt et navn, versionbeskrivelse og andre. Bekræft endelig alle de oplysninger, du har givet:

Nu kan vi installere gulp-pakken i vores projekt med:

# npm install --save-dev gulp

Indstillingen --save-dev fortæller npm at opdatere package.json-filen med de nye devDependencies.

Bemærk, at devDependencies skal løses under udvikling, mens Dependencies i løbetid. Da gulp er et værktøj, der hjælper os med udvikling, skal det løses på udviklingstidspunktet.

Lad os nu oprette en affaldsfil. Opgaver, som vi vil køre, findes i den fil. Det indlæses automatisk, når du bruger gulp-kommandoen. Brug en teksteditor til at oprette en fil med navnet gulpfile.js. Med henblik på denne vejledning skal vi oprette en simpel test.

Du kan indsætte følgende kode i din gulpfile.js:

var gulp = require('gulp');

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

Gem filen, og prøv nu at køre den med:

# gulp hello

Du skal se følgende resultat:

Her er hvad ovenstående kode gør:

  • var gulp = kræve ('gulp'); - importerer gulp-modulet.
  • gulp.task ('hej', funktion (færdig) {- definerer en opgave, der vil være tilgængelig fra kommandolinjen.
  • console.log ('Hej verden!'); - udskriver ganske enkelt “Hult verden!” til skærmen.
  • færdig(); - vi bruger denne tilbagekaldsfunktion til at instruere gulp om, at vores opgaver er afsluttet.

Naturligvis var ovenstående kun en prøve for at vise, hvordan gulpfile.js kan organiseres. Hvis du vil se de tilgængelige opgaver fra din gulpfile.js, kan du bruge følgende kommando:

# gulp --tasks

Gulp har tusindvis af plugins til rådighed, som alle giver forskellige funktioner. Du kan tjekke dem på Gulp's pluginside.

Nedenfor bruger vi minify-html-pluginet i et mere praktisk eksempel. Med nedenstående funktion kan du minimere HTML-filer og placere dem i en ny mappe. Men først installerer vi plug-in'en gulp-minify-html:

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

Du kan få dit gulpfile.js til at se sådan ud:

# 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()
});

Derefter kan du minimere HTML-filer ved hjælp af følgende kommandoer.

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

Gulp er et nyttigt værktøjssæt, der kan hjælpe dig med at forbedre din produktivitet. Hvis du er interesseret i dette værktøj, anbefaler jeg stærkt, at du tjekker dets dokumentationsside, som findes her.