Gulp - alat za automatiziranje bolnih zadataka u razvoju

Gulp je mali alat koji automatizira zadatke koji se ponavljaju. Ti zadaci koji se ponavljaju obično su kompajliranje CSS, JavaScript datoteka ili u osnovi kada koristite okvir koji se bavi nestandardnim JavaScript/CSS datotekama, poželjet ćete koristiti alat za automatizaciju koji hvata te datoteke, pakira ih zajedno i kompilira sve tako da vaš preglednik može lako razumjeti to.

Gulp je koristan za automatizaciju sljedećih zadataka:

• Sastavljanje JS i CSS datoteka
• Osvježavanje stranice preglednika kada spremite datoteku
• Pokrenite jedinični test
• Analiza koda
• Kopiranje izmijenjenih datoteka u ciljni direktorij

Da biste pratili sve datoteke koje su vam potrebne za stvaranje gulp datoteke, razvoj vašeg alata za automatizaciju ili automatizaciju zadataka, morate generirati datoteku package.json. Datoteka u osnovi sadrži objašnjenje onoga što je unutar vašeg projekta, koje su vam ovisnosti potrebne da bi vaš projekt funkcionirao.

U ovom vodiču naučit ćete kako instalirati Gulp i kako automatizirati neke osnovne zadatke za svoje projekte. Koristit ćemo npm – što je kratica za node package manager. Instalira se s Node.js, a možete provjeriti jeste li već instalirali Nodejs i npm s:

node --version
npm --version

Ako ga već nemate instaliran na svom sustavu, preporučujem vam da pogledate vodič: Instalirajte najnovije Nodejs i NPM verziju u Linux sustavima.

Kako instalirati Gulp u Linux

Instalacija gulp-cli može se dovršiti s npm pomoću sljedeće naredbe.

npm install --global gulp-cli

Ako želite instalirati gulp modul lokalno (samo za trenutni projekt), možete koristiti upute u nastavku:

Napravite direktorij projekta i krećite se njime:

mkdir myproject
cd myproject

Zatim upotrijebite sljedeću naredbu za inicijalizaciju projekta:

npm init

Nakon pokretanja gornje naredbe, bit će vam postavljen niz pitanja kako biste svom projektu dali naziv, opis verzije i druga. Na kraju potvrdite sve podatke koje ste dali:

Sada možemo instalirati gulp paket u naš projekt sa:

npm install --save-dev gulp

Opcija --save-dev govori npm-u da ažurira datoteku package.json novim devDependencies.

Imajte na umu da devDependencies treba riješiti tijekom razvoja, dok Dependencies tijekom vremena izvođenja. Budući da je gulp alat koji nam pomaže u razvoju, potrebno ga je riješiti tijekom razvoja.

Stvorite Gulp datoteku

Kreirajmo sada gulpfile. Zadaci koje želimo pokrenuti nalazit će se u toj datoteci. Automatski se učitava kada se koristi naredba gulp. Pomoću uređivača teksta izradite datoteku pod nazivom gulpfile.js. U svrhu ovog vodiča, napravit ćemo jednostavan test.

Možete umetnuti sljedeći kod u svoju gulpfile.js:

var gulp = require('gulp');

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

Spremite datoteku i sada je pokušajte pokrenuti s:

gulp hello

Trebali biste vidjeti sljedeći rezultat:

Evo što gornji kod radi:

• var gulp=require(‘gulp’); – uvozi gulp modul.
• gulp.task(‘hello’, function(done) { – definira zadatak koji će biti dostupan iz naredbenog retka.
• console.log(‘Hellow world!’); – jednostavno ispisuje “Hellow world! ” na ekran.
• done(); – koristimo ovu funkciju povratnog poziva kako bismo Gulp-u rekli da su naši zadaci završeni.

Naravno, gore je bio samo uzorak da pokaže kako se gulpfile.js može organizirati. Ako želite vidjeti dostupne zadatke iz vašeg gulpfile.js, možete koristiti sljedeću naredbu:

gulp --tasks

Gulp dodaci

Gulp ima tisuće dostupnih dodataka, a svi pružaju različite funkcije. Možete ih provjeriti na Gulp-ovoj stranici dodatka.

U nastavku ćemo koristiti minify-html dodatak u praktičnijem primjeru. Pomoću donje funkcije možete smanjiti HTML datoteke i smjestiti ih u novi direktorij. Ali prvo ćemo instalirati gulp-minify-html dodatak:

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

Možete učiniti da vaš gulpfile.js izgleda ovako:

cat gulpfile.js

Uzorak izlaza

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

Tada možete smanjiti HTML datoteke pomoću sljedećih naredbi.

gulp minify-html
du -sh /src dest/

Zaključak

Gulp je koristan alat koji vam može pomoći da poboljšate svoju produktivnost. Ako ste zainteresirani za ovaj alat, toplo preporučujem da provjerite stranicu s njegovom dokumentacijom, koja je dostupna ovdje.