Gulp - Et verktøysett for automatisering av smertefulle oppgaver under utvikling

Gulp er et lite verktøysett som automatiserer repeterende oppgaver. Disse repeterende oppgavene er vanligvis å kompilere CSS, JavaScript-filer eller i utgangspunktet når du bruker et rammeverk som omhandler ikke-standard JavaScript/CSS-filer, vil du bruke et automatiseringsverktøy som tar tak i disse filene, pakker dem sammen og kompilerer alt slik at nettleseren din enkelt kan forstå den.

Gulp er nyttig for å automatisere følgende oppgaver:

  • Kompilering av JS- og CSS-filer
  • Oppdaterer nettlesersiden når du lagrer en fil
  • Kjør en enhetstest
  • Kodeanalyse
  • Kopierer endrede filer til en målkatalog

For å holde styr på alle filene du trenger for å lage en gulp-fil, utvikle automatiseringsverktøyet eller automatisere oppgaver, må du generere en package.json-fil. Filen inneholder i utgangspunktet forklaring på hva som er inne i prosjektet ditt, hvilke avhengigheter du trenger for å få prosjektet til å fungere.

I denne opplæringen skal du lære hvordan du installerer Gulp og hvordan du automatiserer noen grunnleggende oppgaver for prosjektene dine. Vi skal bruke npm – som står for node package manager. Den er installert med Node.js, og du kan sjekke om du allerede har installert Nodejs og npm med:

# node --version
# npm --version

Hvis du ikke allerede har det installert på systemet ditt, anbefaler jeg deg å sjekke opplæringen: Installer siste Nodejs og NPM-versjon i Linux-systemer.

Hvordan installere Gulp i Linux

Installasjon av gulp-cli kan fullføres med npm ved å bruke følgende kommando.

# npm install --global gulp-cli

Hvis du ønsker å installere gulp-modulen lokalt (kun for det aktuelle prosjektet), kan du bruke instruksjonene nedenfor:

Opprett en prosjektkatalog og naviger i den:

# mkdir myproject
# cd myproject

Deretter bruker du følgende kommando for å initialisere prosjektet:

# npm init

Etter å ha kjørt kommandoen ovenfor, vil du bli stilt en rekke spørsmål for å gi prosjektet ditt et navn, versjonsbeskrivelse og andre. Bekreft til slutt all informasjonen du har gitt:

Nå kan vi installere gulp-pakken i prosjektet vårt med:

# npm install --save-dev gulp

Alternativet --save-dev ber npm oppdatere filen package.json med de nye devDependencies.

Merk at devDependencies må løses under utvikling, mens Dependencies under kjøretid. Siden gulp er et verktøy som hjelper oss i utviklingen, må det løses på utviklingstidspunktet.

La oss nå lage en gulpfile. Oppgaver vi ønsker å kjøre vil bli funnet i den filen. Den lastes automatisk når du bruker gulp-kommandoen. Bruk et tekstredigeringsprogram, lag en fil med navnet gulpfile.js. For formålet med denne opplæringen skal vi lage en enkel test.

Du kan sette inn følgende kode i gulpfile.js:

var gulp = require('gulp');

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

Lagre filen og prøv nå å kjøre den med:

# gulp hello

Du bør se følgende resultat:

Her er hva koden ovenfor gjør:

  • var gulp = require(‘gulp’); – importerer gulp-modulen.
  • gulp.task(‘hei’, function(done) { – definerer en oppgave som vil være tilgjengelig fra kommandolinjen.
  • console.log(‘Hei verden!’); – bare skriver ut «Hallo verden!» til skjermen.
  • ferdig(); – vi bruker denne tilbakeringingsfunksjonen for å instruere gulp om at oppgavene våre er fullført.

Selvfølgelig var ovenstående bare et eksempel for å vise hvordan gulpfile.js kan organiseres. Hvis du vil se de tilgjengelige oppgavene fra gulpfile.js, kan du bruke følgende kommando:

# gulp --tasks

Gulp har tusenvis av plugins tilgjengelig, som alle gir forskjellig funksjonalitet. Du kan sjekke dem på Gulps plugin-side.

Nedenfor vil vi bruke minify-html plugin i et mer praktisk eksempel. Med funksjonen nedenfor kan du forminske HTML-filer og plassere dem i en ny katalog. Men først skal vi installere gulp-minify-html plugin:

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

Du kan få gulpfile.js til å se slik ut:

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

Deretter kan du forminske HTML-filer ved å bruke følgende kommandoer.

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

Gulp er et nyttig verktøysett som kan hjelpe deg med å forbedre produktiviteten. Hvis du er interessert i dette verktøyet, anbefaler jeg deg å sjekke dokumentasjonssiden, som er tilgjengelig her.