Gulp - Verkfærakista til að gera sjálfvirkan sársaukafull verkefni í þróun


Gulp er lítið verkfærasett sem gerir endurtekin verkefni sjálfvirk. Þessi endurteknu verkefni eru venjulega að setja saman CSS, JavaScript skrár eða í rauninni þegar þú notar ramma sem fjallar um óstöðluð JavaScript/CSS skrár þá viltu nota sjálfvirkniverkfæri sem grípur þessar skrár, pakkar þeim saman og safnar öllu saman svo vafrinn þinn geti auðveldlega skilið það.

Gulp er gagnlegt til að gera eftirfarandi verkefni sjálfvirk:

  • Samsetning JS og CSS skráa
  • Endurnýjar vafrasíðu þegar þú vistar skrá
  • Keyra einingarpróf
  • Kóðagreining
  • Afritar breyttar skrár í markskrá

Til að halda utan um allar skrárnar sem þú þarft til að búa til gulp-skrá, þróa sjálfvirknitólið þitt eða gera sjálfvirk verkefni, þarftu að búa til package.json skrá. Skráin inniheldur í grundvallaratriðum útskýringar á því hvað er inni í verkefninu þínu, hvaða ósjálfstæði þú þarft til að láta verkefnið þitt virka.

Í þessari kennslu ertu að fara að læra hvernig á að setja upp Gulp og hvernig á að gera nokkur grunnverkefni sjálfvirk fyrir verkefnin þín. Við ætlum að nota npm – sem stendur fyrir hnútapakkastjóra. Það er sett upp með Node.js og þú getur athugað hvort þú hafir þegar sett upp Nodejs og npm með:

# node --version
# npm --version

Ef þú ert ekki með það þegar uppsett á kerfinu þínu, mæli ég með því að þú skoðir kennsluna: Settu upp nýjustu Nodejs og NPM útgáfuna í Linux kerfum.

Hvernig á að setja upp Gulp í Linux

Hægt er að ljúka uppsetningu á gulp-cli með npm með eftirfarandi skipun.

# npm install --global gulp-cli

Ef þú vilt setja upp gulp-eininguna á staðnum (aðeins fyrir núverandi verkefni) geturðu notað leiðbeiningarnar hér að neðan:

Búðu til verkefnaskrá og farðu í hana:

# mkdir myproject
# cd myproject

Næst skaltu nota eftirfarandi skipun til að frumstilla verkefnið þitt:

# npm init

Eftir að hafa keyrt ofangreinda skipun verður þú spurður röð spurninga til að gefa verkefninu þínu nafn, útgáfulýsingu og fleira. Staðfestu að lokum allar upplýsingar sem þú hefur gefið:

Nú getum við sett upp gulp pakkann í verkefninu okkar með:

# npm install --save-dev gulp

Valmöguleikinn --save-dev segir npm að uppfæra package.json skrána með nýju devDependencies.

Athugaðu að devDependencies þarf að leysa meðan á þróun stendur, en Dependencies á keyrslutíma. Þar sem gulp er tæki sem hjálpar okkur í þróun, þarf að leysa það á þróunartíma.

Nú skulum við búa til gulpfile. Verkefni sem við viljum keyra munu finnast í þeirri skrá. Það er sjálfkrafa hlaðið þegar gulp skipunin er notuð. Notaðu textaritil til að búa til skrá sem heitir gulpfile.js. Í tilgangi þessarar kennslu ætlum við að búa til einfalt próf.

Þú getur sett eftirfarandi kóða inn í gulpfile.js þinn:

var gulp = require('gulp');

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

Vistaðu skrána og reyndu nú að keyra hana með:

# gulp hello

Þú ættir að sjá eftirfarandi niðurstöðu:

Hér er það sem ofangreindur kóði gerir:

  • var gulp = require(‘gulp’); – flytur inn gulp-eininguna.
  • gulp.task(‘halló’, fall(lokið) { – skilgreinir verkefni sem verður tiltækt frá skipanalínunni.
  • console.log(‘Halló heimur!’); - prentar einfaldlega Halló heimur! á skjáinn.
  • gert(); – við notum þessa svarhringingaraðgerð til að segja gulp að verkefnum okkar sé lokið.

Auðvitað var ofangreint bara sýnishorn til að sýna hvernig hægt er að skipuleggja gulpfile.js. Ef þú vilt sjá tiltæk verkefni frá gulpfile.js þínum geturðu notað eftirfarandi skipun:

# gulp --tasks

Gulp er með þúsundir viðbóta í boði, sem öll bjóða upp á mismunandi virkni. Þú getur athugað þau á viðbætursíðu Gulp.

Hér að neðan munum við nota minify-html viðbótina í hagnýtara dæmi. Með aðgerðinni hér að neðan geturðu minnkað HTML skrár og sett þær í nýja möppu. En fyrst munum við setja upp gulp-minify-html viðbótina:

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

Þú getur látið gulpfile.js líta svona út:

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

Síðan geturðu minnkað HTML skrár með eftirfarandi skipunum.

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

Gulp er gagnlegt verkfærasett sem getur hjálpað þér að bæta framleiðni þína. Ef þú hefur áhuga á þessu tóli mæli ég eindregið með því að þú skoðir skjalasíðu þess, sem er aðgengileg hér.