Gulp - Komplet alata za automatizaciju bolnih zadataka u razvoju

Gulp je mali set alata 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 uzima te datoteke, pakira ih zajedno i kompajlira sve kako bi vaš preglednik mogao lako razumjeti to.

Gulp je koristan za automatizaciju sljedećih zadataka:

• Kompajliranje JS i CSS fajlova
• Osvježavanje stranice pretraživača kada sačuvate datoteku
• Pokrenite jedinični test
• Analiza koda
• Kopiranje izmijenjenih datoteka u ciljni direktorij

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

U ovom vodiču ćete naučiti kako instalirati Gulp i kako automatizirati neke osnovne zadatke za svoje projekte. Koristićemo npm – što je skraćenica za menadžer paketa čvorova. Instaliran je sa Node.js, a možete provjeriti da li ste već instalirali Nodejs i npm pomoću:

node --version
npm --version

Ako ga već nemate instaliran na vašem sistemu, preporučujem vam da pogledate vodič: Instalirajte najnovije Nodejs i NPM verziju u Linux sistemima.

Kako instalirati Gulp u Linux

Instalacija gulp-cli može se završiti sa npm koristeći sljedeću naredbu.

npm install --global gulp-cli

Ako želite da instalirate gulp modul lokalno (samo za trenutni projekat), možete koristiti upute u nastavku:

Kreirajte direktorij projekta i navigirajte u njemu:

mkdir myproject
cd myproject

Zatim koristite sljedeću naredbu za inicijalizaciju vašeg projekta:

npm init

Nakon što pokrenete gornju naredbu, bit će vam postavljen niz pitanja kako bi vašem projektu dali ime, opis verzije i ostalo. Na kraju potvrdite sve informacije koje ste dali:

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

npm install --save-dev gulp

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

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

Kreirajte Gulp fajl

Sada kreirajmo gulpfile. Zadaci koje želimo pokrenuti naći će se u toj datoteci. Automatski se učitava kada se koristi naredba gulp. Koristeći uređivač teksta, kreirajte datoteku pod nazivom gulpfile.js. Za potrebe ovog tutorijala, kreiraćemo jednostavan test.

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

var gulp = require('gulp');

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

Sačuvajte datoteku i sada pokušajte da je pokrenete sa:

gulp hello

Trebali biste vidjeti sljedeći rezultat:

Evo šta radi gornji kod:

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

Naravno, ovo je bio samo primjer koji pokazuje 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 Plugins

Gulp ima hiljade dostupnih dodataka, koji pružaju različite funkcije. Možete ih provjeriti na Gulp-ovoj stranici dodataka.

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

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

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

cat gulpfile.js

Sample Output

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

Zatim možete minimizirati HTML datoteke koristeći sljedeće naredbe.

gulp minify-html
du -sh /src dest/

Zaključak

Gulp je koristan komplet alata koji vam može pomoći da poboljšate svoju produktivnost. Ako ste zainteresovani za ovaj alat, toplo preporučujem da pogledate njegovu stranicu dokumentacije, koja je dostupna ovde.