Gulp - tööriistakomplekt valulike ülesannete automatiseerimiseks arenduses

Gulp on väike tööriistakomplekt, mis automatiseerib korduvaid ülesandeid. Need korduvad ülesanded on tavaliselt CSS-i, JavaScripti failide kompileerimine või põhimõtteliselt siis, kui kasutate mittestandardsete JavaScripti/CSS-failidega tegelevat raamistikku, soovite kasutada automatiseerimistööriista, mis haarab need failid kokku, pakendab need kokku ja kompileerib kõik, et teie brauser saaks hõlpsasti aru saada seda.

Gulp on kasulik järgmiste ülesannete automatiseerimiseks:

• JS- ja CSS-failide koostamine
• Brauseri lehe värskendamine faili salvestamisel
• Käivitage ühikutest
• Koodianalüüs
• Muudetud failide kopeerimine sihtkataloogi

Kõigi failide jälgimiseks, mida vajate faili loomiseks, automatiseerimistööriista arendamiseks või ülesannete automatiseerimiseks, peate looma faili package.json. Fail sisaldab põhimõtteliselt selgitust selle kohta, mis on teie projektis, milliseid sõltuvusi vajate, et teie projekt toimiks.

Selles õpetuses saate teada, kuidas Gulppi installida ja kuidas oma projektide jaoks mõningaid põhiülesandeid automatiseerida. Kasutame npm - mis tähistab sõlmpakettide haldurit. See on installitud koos Node.js-iga ja saate kontrollida, kas olete Nodejs ja npm juba installinud:

# node --version
# npm --version

Kui teil pole seda veel teie süsteemi installitud, soovitan teil tutvuda juhendajaga: Installige uusim Nodejs ja NPM versioon Linuxi süsteemidesse.

Kuidas Gulppi Linuxi installida

Gulp-cli installimise saab lõpetada npm-iga järgmise käsu abil.

# npm install --global gulp-cli

Kui soovite gulp-mooduli installida kohapeal (ainult praeguse projekti jaoks), võite kasutada järgmisi juhiseid:

Looge projekti kataloog ja navigeerige selles:

# mkdir myproject
# cd myproject

Järgmisena kasutage projekti lähtestamiseks järgmist käsku:

# npm init

Pärast ülaltoodud käsu käivitamist küsitakse teilt rea küsimusi, et anda oma projektile nimi, versioonikirjeldus ja teised. Lõpuks kinnitage kogu teie esitatud teave:

Nüüd saame oma projekti installida paketi:

# npm install --save-dev gulp

Valik --save-dev käsib npm-il värskendada faili package.json uute devDependencies-iga.

Pange tähele, et sõltuvused tuleb lahendada arenduse käigus, sõltuvused aga tööaja jooksul. Kuna lonks on tööriist, mis aitab meid arengus, tuleb see lahendada arendamise ajal.

Nüüd loome ühe faili. Ülesanded, mida soovime käivitada, leiate sellest failist. See laaditakse käsu gulp kasutamisel automaatselt. Looge tekstiredaktori abil fail nimega gulpfile.js. Selle õpetuse jaoks loome lihtsa testi.

Võite oma gulpfile.js sisestada järgmise koodi:

var gulp = require('gulp');

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

Salvestage fail ja proovige seda nüüd käivitada:

# gulp hello

Peaksite nägema järgmist tulemust:

Ülaltoodud kood teeb järgmist:

• var gulp = nõudma (‘gulp’); - impordib lonksmooduli.
• gulp.task (‘tere’, function (done) {- määratleb käsurealt saadaval oleva ülesande.
• console.log (‘Tere maailm!’); - lihtsalt trükib\"kolmaailm!" ekraanile.
• tehtud(); - kasutame seda tagasihelistamisfunktsiooni, et anda meile teada, et meie ülesanded on lõpetatud.

Muidugi oli ülaltoodud vaid proov, mis näitas, kuidas gulpfile.js saab korraldada. Kui soovite oma gulpfile.js-ist saadaolevaid ülesandeid, võite kasutada järgmist käsku:

# gulp --tasks

Gulpil on saadaval tuhandeid pistikprogramme, mis pakuvad kõiki erinevaid funktsioone. Saate neid kontrollida Gulpi pistikprogrammi lehel.

Allpool kasutame praktilisemas näites minify-html pistikprogrammi. Alloleva funktsiooniga saate HTML-faile minimeerida ja paigutada uude kataloogi. Kuid kõigepealt installime pistikprogrammi gulp-minify-html:

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

Saate oma gulpfile.js välja näha järgmiselt:

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

Seejärel saate HTML-faile järgmiste käskude abil minimeerida.

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

Gulp on kasulik tööriistakomplekt, mis aitab teil oma tööviljakust parandada. Kui olete selle tööriista vastu huvitatud, soovitan teil tungivalt vaadata selle dokumentatsioonilehte, mis on siin saadaval.