Gulp - Priročnik za avtomatizacijo bolečih nalog pri razvoju

Gulp je majhen komplet orodij, ki avtomatizira ponavljajoče se naloge. Te ponavljajoče se naloge so običajno sestavljanje CSS, datotek JavaScript ali v bistvu, ko uporabljate okvir, ki obravnava nestandardne datoteke JavaScript/CSS, boste želeli uporabiti orodje za avtomatizacijo, ki te datoteke zgrabi, jih skupaj zapakira in zbere vse, da bo brskalnik zlahka razumel. to.

Gulp je uporaben za avtomatizacijo naslednjih nalog:

• Sestavljanje datotek JS in CSS
• Osvežitev strani brskalnika, ko shranite datoteko
• Zaženite preizkus enote
• Analiza kode
• Kopiranje spremenjenih datotek v ciljni imenik

Če želite slediti vsem datotekam, ki jih potrebujete za ustvarjanje datoteke gulp, razvoj orodja za avtomatizacijo ali avtomatizacijo opravil, morate ustvariti datoteko package.json. Datoteka v bistvu vsebuje razlago, kaj je v vašem projektu, katere odvisnosti potrebujete, da bo vaš projekt deloval.

V tej vadnici se boste naučili, kako namestiti Gulp in kako avtomatizirati nekaj osnovnih nalog za svoje projekte. Uporabili bomo npm - kar pomeni upravitelj paketov vozlišč. Nameščen je z Node.js in lahko preverite, ali ste že namestili Nodejs in npm z:

# node --version
# npm --version

Če ga še nimate v sistemu, vam priporočam, da preverite vadnico: Namestite najnovejšo različico Nodejs in različico NPM v sisteme Linux.

Kako namestiti Gulp v Linux

Namestitev gulp-cli lahko dokončate z npm z naslednjim ukazom.

# npm install --global gulp-cli

Če želite modul gulp namestiti lokalno (samo za trenutni projekt), lahko uporabite spodnja navodila:

Ustvarite imenik projekta in se pomaknite po njem:

# mkdir myproject
# cd myproject

Nato za začetek projekta uporabite naslednji ukaz:

# npm init

Ko zaženete zgornji ukaz, boste pozvani k vrsti vprašanj, ki bodo vašemu projektu dali ime, opis različice in druga. Končno potrdite vse podatke, ki ste jih dali:

Zdaj lahko v svoj projekt namestimo paket gulp z:

# npm install --save-dev gulp

Možnost --save-dev pove npm, naj datoteko package.json posodobi z novimi devDependencies.

Upoštevajte, da je treba devDependencies rešiti med razvojem, medtem ko je odvisnosti med časom izvajanja. Ker je gulp orodje, ki nam pomaga pri razvoju, ga je treba razrešiti v času razvoja.

Zdaj pa ustvarimo datoteko gulp. Opravila, ki jih želimo izvesti, bodo v tej datoteki. Samodejno se naloži ob uporabi ukaza gulp. Z urejevalnikom besedil ustvarite datoteko z imenom gulpfile.js. Za namen te vadnice bomo ustvarili preprost test.

V svoj gulpfile.js lahko vstavite naslednjo kodo:

var gulp = require('gulp');

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

Shranite datoteko in jo zdaj poskusite zagnati z:

# gulp hello

Videti bi morali naslednji rezultat:

Evo, kaj počne zgornja koda:

• var gulp = require ('gulp'); - uvozi modul gulp.
• gulp.task ("zdravo", funkcija (končano) { - definira opravilo, ki bo na voljo v ukazni vrstici.
• console.log ('Pozdravljeni svet!'); - preprosto natisne\"Hellow world!" na zaslon.
• dokončano(); - s to funkcijo povratnega klica uporabimo, da nas gulp obvesti, da so naše naloge končane.

Seveda je bilo zgoraj zgolj vzorec, ki je pokazal, kako je mogoče organizirati gulpfile.js. Če želite videti razpoložljiva opravila iz svojega gulpfile.js, lahko uporabite naslednji ukaz:

# gulp --tasks

Gulp ima na voljo na tisoče vtičnikov, ki ponujajo različne funkcije. Lahko jih preverite na strani vtičnikov Gulp.

Spodaj bomo v bolj praktičnem primeru uporabili vtičnik minify-html. S spodnjo funkcijo lahko datoteke HTML pomanjšate in jih postavite v nov imenik. Najprej pa bomo namestili vtičnik gulp-minify-html:

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

Vaš gulpfile.js lahko naredite tako:

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

Nato lahko datoteke HTML pomanjšate z naslednjimi ukazi.

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

Gulp je uporaben komplet orodij, ki vam lahko pomaga izboljšati produktivnost. Če vas to orodje zanima, toplo priporočam, da preverite njegovo dokumentacijsko stran, ki je na voljo tukaj.