Gulp - Un set de instrumente pentru automatizarea sarcinilor dureroase în dezvoltare

Gulp este un mic set de instrumente care automatizează sarcini repetitive. Aceste sarcini repetitive sunt de obicei compilarea fișierelor CSS, JavaScript sau, practic, atunci când utilizați un cadru care se ocupă cu fișiere JavaScript/CSS nestandard, veți dori să utilizați un instrument de automatizare care preia acele fișiere, le împachetează și compila totul, astfel încât browserul dvs. să poată înțelege cu ușurință. aceasta.

Gulp este util pentru automatizarea următoarelor sarcini:

  • Compilarea fișierelor JS și CSS
  • Actualizarea paginii browser când salvați un fișier
  • Executați un test unitar
  • Analiza codului
  • Copierea fișierelor modificate într-un director țintă

Pentru a urmări toate fișierele de care aveți nevoie pentru a crea un fișier gulp, pentru a vă dezvolta instrumentul de automatizare sau pentru a automatiza sarcini, trebuie să generați un fișier package.json. Fișierul conține, practic, explicații despre ceea ce se află în interiorul proiectului, de ce dependențe aveți nevoie pentru ca proiectul să funcționeze.

În acest tutorial, veți învăța cum să instalați Gulp și cum să automatizați unele sarcini de bază pentru proiectele dvs. Vom folosi npm – care înseamnă managerul de pachete de noduri. Este instalat cu Node.js și puteți verifica dacă ați instalat deja Nodejs și npm cu:

# node --version
# npm --version

Dacă nu îl aveți deja instalat pe sistemul dvs., vă recomand să verificați tutorialul: Instalați cea mai recentă versiune Nodejs și NPM în sistemele Linux.

Cum se instalează Gulp în Linux

Instalarea gulp-cli poate fi finalizată cu npm folosind următoarea comandă.

# npm install --global gulp-cli

Dacă doriți să instalați modulul gulp local (numai pentru proiectul curent), puteți utiliza instrucțiunile de mai jos:

Creați un director de proiect și navigați în el:

# mkdir myproject
# cd myproject

Apoi, utilizați următoarea comandă pentru a vă inițializa proiectul:

# npm init

După rularea comenzii de mai sus, vi se vor pune o serie de întrebări pentru a oferi proiectului dumneavoastră un nume, o descriere a versiunii și altele. În cele din urmă, confirmați toate informațiile pe care le-ați furnizat:

Acum putem instala pachetul gulp în proiectul nostru cu:

# npm install --save-dev gulp

Opțiunea --save-dev îi spune npm să actualizeze fișierul package.json cu noile devDependencies.

Rețineți că Dependențele de dezvoltare trebuie rezolvate în timpul dezvoltării, în timp ce dependențele în timpul rulării. Deoarece gulp este un instrument care ne ajută în dezvoltare, trebuie rezolvat în timpul dezvoltării.

Creați fișierul Gulp

Acum să creăm un gulpfile. Sarcinile pe care dorim să le executăm vor fi găsite în acel fișier. Se încarcă automat când utilizați comanda gulp. Folosind un editor de text, creați un fișier numit gulpfile.js. În scopul acestui tutorial, vom crea un test simplu.

Puteți introduce următorul cod în gulpfile.js:

var gulp = require('gulp');

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

Salvați fișierul și acum încercați să-l rulați cu:

# gulp hello

Ar trebui să vedeți următorul rezultat:

Iată ce face codul de mai sus:

  • var gulp=require(‘gulp’); – importă modulul gulp.
  • gulp.task(‘bună ziua’, funcția(terminat) { – definește o sarcină care va fi disponibilă din linia de comandă.
  • console.log(‘Bună lume!’); – pur și simplu imprimă pe ecran „Bună ziua!”.
  • terminat(); – folosim această funcție de apel invers pentru a informa gulp că sarcinile noastre s-au încheiat.

Desigur, cele de mai sus a fost doar un exemplu pentru a arăta cum poate fi organizat gulpfile.js. Dacă doriți să vedeți sarcinile disponibile din gulpfile.js, puteți utiliza următoarea comandă:

# gulp --tasks

Pluginuri Gulp

Gulp are mii de pluginuri disponibile, toate oferind funcționalități diferite. Le puteți verifica pe pagina de pluginuri Gulp.

Mai jos vom folosi pluginul minify-html într-un exemplu mai practic. Cu funcția de mai jos, puteți reduce fișierele HTML și le puteți plasa într-un director nou. Dar mai întâi, vom instala pluginul gulp-minify-html:

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

Puteți face ca gulpfile.js să arate astfel:

# cat gulpfile.js
Ieșire eșantion
// 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()
});

Apoi puteți reduce fișierele HTML folosind următoarele comenzi.

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

Gulp este un set de instrumente util care vă poate ajuta să vă îmbunătățiți productivitatea. Dacă sunteți interesat de acest instrument, vă recomand cu căldură să verificați pagina sa de documentație, care este disponibilă aici.