Seuraava artikkeli auttaa sinua: Grunt Vs Gulp: Mitä Web-kehittäjien automaatiotyökalua sinun tulisi käyttää?
Kukaan ei halua tehdä tylsiä ja toistuvia tehtäviä. Hyvä uutinen on, että voimme todennäköisesti saada tietokoneemme tekemään ne puolestamme. Mitä tulee verkkokehityksen rakentamisen automaatioon, sinun kannattaa tarkastella kahta suurta toimijaa: Grunt ja Gulp.
Mutta kumman kanssa kannattaa mennä? Mitä eroja niillä on? Kumpi on parempi? Katsotaanpa Gruntin ja Gulpin yhtäläisyyksiä ja eroja auttaaksemme sinua valitsemaan sinulle oikean JavaScript-tehtävän suorittajan.
Samankaltaisuudet Gruntin ja Gulpin välillä
Grunt ja Gulp voivat automatisoida ikäviä, inhimillisille virheille alttiita rakennusprosesseja, kuten:
- koodin pienennys
- koodin laatuanalyysi
- kuvan optimointi
- myyjä-etuliite
- yksikkötestaus
- … ja paljon enemmän
Periaatteessa, jos teet jotain uudestaan ja uudestaan, on suuri mahdollisuus, että voit automatisoida sen joko Gruntin tai Gulpin avulla. Integroimalla Task Runnerin työnkulkuumme vältymme tuhlaamasta aikaa ja energiaa asioihin, joita tietokoneemme voi tehdä puolestamme. Viime kädessä tämä tarkoittaa, että voimme keskittyä tärkeimpiin asioihin: luomiseen ja innovaatioihin.
Ajattele Task Runneriä kehyksenä kehitystehtävien automatisointiin. JavaScript-verkkokehityskehykset, kuten Angular ja jQuery, helpottavat JavaScript-koodin kirjoittamista. Samoin Grunt ja Gulp helpottavat rakennusautomaatiokoodin kirjoittamista.
Miten Task Runner toimii? Yksinkertainen. Kirjoitat ohjeet, jotka kertovat tehtävän suorittajalle:
- mitkä tiedostot haluat sen käsittelevän
- mitä haluat sen tekevän tiedostoille (pienentää niitä, analysoida niitä virheiden varalta jne.)
- mihin haluat sen sijoittavan käsitellyt tiedostot
Koska Grunt ja Gulp ovat JavaScript-tehtävien suorittajia, kirjoitamme ohjeet JavaScriptin avulla. Tässä on vaiheittaiset opetusohjelmat, jotka auttavat sinua pääsemään alkuun Gruntin ja Gulpin kanssa:
Ensi silmäyksellä Grunt ja Gulp näyttävät molemmat melko samanlaisilta. Ja jommankumman käyttäminen johtaa samaan tulokseen: Tehokkaampi web-kehityksen työnkulku. Joten laajemmassa merkityksessä Grunt ja Gulp ovat identtisiä siinä mielessä, että:
- He ovat tehtävien suorittajia, jotka voivat automatisoida osia kehitystyönkulustamme
- Kirjoitamme tehtävät, jotka haluamme niiden suorittavan JavaScriptin avulla
- Molemmat tarvitsevat Noden ja npm:n toimiakseen
Yhtäläisyydet loppuvat tähän. Tapa, jolla ne on määritetty ja niiden menetelmä tehtäviemme suorittamiseksi, ovat erilaisia.
Erot Gruntin ja Gulpin välillä
Gruntin ja Gulpin välillä on kaksi pääeroa:
- Tapa, jolla määrität tehtäväsi. Grunt on Gulp on
- Tapa, jolla he hoitavat tehtäväsi. Grunt suorittaa prosessit, jotka haluat suorittaa . Gulp yrittää ajaa niitä komennolla , mikä tarkoittaa, että se yrittää suorittaa prosesseja rinnakkain, jos mahdollista.
Tehtävän määritys
Tutkitaanpa suurta eroa Gruntin ja Gulpin välillä esimerkin avulla. Luomme Gruntin ja Gulpin tehtävän. Tämä tehtävä vaatii joukon CSS-tiedostoja ja optimoi ne parantamaan verkon suorituskykyä. Tässä on mitä tehtävä tekee:
- Yhdistä kaikki hakemistosta löytyvät CSS-tiedostot yhdeksi suureksi tyylisivuksi
- Pienennä tyylitaulukkoa
- Sijoitti pienennetyn tiedoston hakemistoon, jonka nimi on
- Ilmoita tehtävän suoritusaika komentorivillä tehtävän valmistumisen jälkeen
Grunt-tehtävän määritys
module.exports = function(grunt) { vaatia(‘time-grunt’)(grunt); grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json’), concat_css: { dist: { src: [‘src/*.css’]kohde: ‘css/styles.css’ } }, cssmin: { kohde: { tiedostot: [{ ‘css/styles.min.css’: [‘css/styles.css’] }]} } }); grunt.loadNpmTasks(‘grunt-concat-css’); grunt.loadNpmTasks(‘grunt-contrib-cssmin’); grunt.registerTask(‘default’, [‘concat_css’, ‘cssmin’]); }
Gulp Task -kokoonpano
var gulp = vaatia(‘gulp’); var concatenate = vaatia(‘gulp-concat-css’); var minify = vaatia(‘gulp-cssmin’); var kesto = vaatia(‘gulp-duration’); gulp.task(‘default’, function() { gulp.src(‘src/*.css’) .pipe(concatenate(‘styles.min.css’)) .pipe(minify()) .pipe(duration(‘Suoritusaika: ‘)) .pipe(gulp.dest(‘css/’)); });
Tehtävän kokoonpanon ero
Gulpin syntaksi on ytimekäs. Hieno asia Gulpissa on stream-pohjainen rakennusjärjestelmä. Luot vain tehtäväsi yhdistämällä kaikki prosessisi peräkkäin.
Ikään kuin voimme ketjuttaa menetelmiä jQueryn valintatoiminnossa.
Taika johtuu objektimuodosta, jota laajennukset vaihtavat, niin kutsuttua vinyyliä. Vinyyli on vain abstraktio, joka kuvaa virtuaalista tiedostoobjektia – joka voi viitata olemassa olevaan tiedostoon FS:ssä, streamiin tai yksinkertaisesti umpikujaan, jossa on nolla.
– Preslav Rachev Gulp vs Grunt. Miksi yksi? Miksi Toinen?
Löysin suurimman osan tehtävistä, joiden kanssa luon Gulpin tuloksena on paljon lyhyempi ja selkeämpi tehtävämääritystiedosto. Toisin sanoen Gulpilla on vähemmän koodia kirjoitettavana samojen prosessien tekemiseen.
Saatat ajatella, että olen puolueellinen – ehkä hieman – mutta käytän Gruntia ja Gulpia. (Valitsen toisen sijasta työskentelemäni projektin tyypin mukaan.) Seuraavassa taulukossa on lueteltu tehtävässä käytetyt Grunt- ja Gulp-laajennukset.
Tehtävän suoritus
Tapa, jolla tehtävä suoritetaan, on erilainen Grunt vs. Gulp -pelissä.
Kuinka Grunt suorittaa tehtävän
Jokaisen tehtävän prosessin osalta Gruntin on:
- Avaa käsitelty tiedosto viimeisestä prosessista
- Suorita nykyinen prosessi
- Tallenna muutokset
- Sulje nykyinen käsitelty tiedosto, jotta seuraava prosessi voi käyttää sitä
Kuinka Gulp suorittaa tehtävän
Gulp puolestaan ei tarvitse välivaiheita väliaikaisten tiedostojen luomiseksi prosessien välillä. Prosessista tuleva koodi menee suoraan seuraavaan, mikä säästää paljon I/O-aikaa. Siksi se on “stream-pohjainen”. Gulp käyttää Orchestratoria, joka auttaa sitä ajamaan prosesseja mahdollisimman samanaikaisesti. Tämä tarkoittaa, että Gulp yrittää suorittaa prosesseja samanaikaisesti. Teoriassa tämä mahdollistaa Gulpin suorittaa tehtävät nopeammin.
Tehtävän suoritusnopeuden mittaaminen
Voit testata Gruntin ja Gulpin nopeuseroa.
Molemmat voivat raportoida tehtävien suorittamiseen kuluvan ajan. Aiemmin luomiemme tehtävien suoritusnopeuden mittaamiseen käytettiin time-grunt- ja gulp-duration -laajennuksia. Grunt-tehtävä ja Gulp-tehtävä suoritettiin kumpikin viisi kertaa.
Käytettiin samoja lähdetiedostoja (kolme CSS-tiedostoa). Kohdehakemisto (eli hakemisto) poistettiin koneesta jokaisen tehtävän suorittamisen välillä.
Tällä tavalla tehtävien suorittajien on kirjoitettava levylle joka kerta, kun tehtävä suoritettiin. Ole varovainen tulkitessasi seuraavien tietojen tuloksia. Monet tekijät voivat vaikuttaa tuloksiin, kuten Grunt- ja Gulp-laajennusten väliset erot ketjuttamisen, pienentämisen ja suoritusnopeuden raportoinnin välillä.
Grunt Task-Execution nopeudet
| Testi 1 | 915 ms |
| Testi 2 | 941 ms |
| Testi 3 | 908 ms |
| Testi 4 | 994 ms |
| Testi 5 | 938 ms |
| Keskimääräinen aika | 939,2 ms |
Gulp Task-Execution nopeudet
| Testi 1 | 229 ms |
| Testi 2 | 229 ms |
| Testi 3 | 226 ms |
| Testi 4 | 225 ms |
| Testi 5 | 221 ms |
| Keskimääräinen aika | 226 ms |
Tässä nimenomaisessa tapauksessa Gulp pystyi suorittamaan CSS-optimointitehtävän 4x nopeampi kuin Grunt. Yksinkertaisissa tehtävissä et koskaan huomaa eroa. Mutta monimutkaisissa rakennusautomaatiotehtävissä, joiden suorittaminen kestää minuutteja, tämä saattaa olla ongelma.
Et halua odottaa pidempään kuin sinun on pakko. On syytä huomauttaa, että Gruntista on tulossa uusi versio. Se käyttää myös Orchestratoria.
Tämä johtaa todennäköisesti tehtävien suorittamisen nopeuden parannuksiin. Katso tämä blogikirjoitus, jossa Zander Martineau teki nopeusvertailutestin Grunt vs. Gulp -pelissä. Hän raportoi myös, että Gulp pystyi suorittamaan tehtävät nopeammin kuin Grunt. Lähde: tech.tmw.co.uk
Grunt vs Gulp -tilastot
Projektin aloituspäivä
Grunt-projekti käynnistyi loppuvuodesta 2011. Kesti noin vuoden ennen kuin projekti tuli huomattavaksi. Koska se tuli markkinoille ensimmäisenä, sillä on suurempi käyttäjäkunta Gulpiin verrattuna. Gulp tuli näyttämölle vuoden 2013 puolivälissä. Se huomattiin vasta vuoden 2014 alussa. Siitä lähtien adoptioiden määrä on ollut nousussa.
Käyttö
Saadaksemme käsityksen siitä, kuinka moni kehittäjä käyttää Gruntia ja Gulpia, voimme tarkastella grunt- ja gulp-pakettien npm-lataustilastoja. Koska grunt- ja/tai gulp-paketin lataaminen on ensimmäinen askel tehtäväsuorittimien käyttöön, tämä on hyvä lähtökohta yritettäessä kvantifioida, kuinka monet ihmiset käyttävät Gruntia ja Gulpia.
“Lataus”-mittarissa on kuitenkin useita puutteita vertailua varten. Jotkut kehittäjät saattavat käyttää sekä Gruntia että Gulpia. Gulp on julkaissut enemmän versiopäivityksiä kuin Grunt, ja tämä saattaa johtaa latausnopeuteen, koska ihmiset päivittävät ohjelmistojaan.
Tämä mittaus kertoo vain osan tarinasta. Seuraavat tiedot ovat peräisin npm-stat-työkalusta, joka raportoi tilastoja npm-paketteista.
Grunt-käyttötilastot
| Latauksia yhteensä | 14 miljoonaa |
| Latausten määrä viime kuussa | 1,3 miljoonaa |
| Keskimääräinen latausten määrä päivässä | 42,075 |
Gulpin käyttötilastot
| Latauksia yhteensä | 5,9 miljoonaa |
| Latausten määrä viime kuussa | ~929 000 |
| Keskimääräinen latausten määrä päivässä | 32,479 |
Lisäosien määrä
Laajennukset ovat tehtävien määrityksen leipä ja voide.
Vaikka voit varmasti kirjoittaa omia prosessejasi automatisoitaviksi, on paljon helpompaa käyttää olemassa olevaa, jos se on jo olemassa. Sekä Gruntilla että Gulpilla on viralliset liitännäishakemistot sivustollaan. Molemmat näyttävät lisäosien lukumäärän, joka on lueteltu omissa laajennushakemistoissaan. Gruntissa on 4 663 laajennusta.
Gulpissa on 1 561 laajennusta. Selvästikin Gruntilla on enemmän laajennuksia kuin Gulpilla, ja lähes 3x enemmän laajennuksia verrattuna jälkimmäiseen. Muista, että Gruntilla on vähän etumatkaa, joten lisää laajennuksia on odotettavissa.
Kehitystoiminta
Kun luotat johonkin ohjelmistoon, on hyvä idea tarkistaa, kuinka usein se päivitetään.
Haluat käyttää työkaluja, joita parannetaan nopeasti ja jatkuvasti virheenkorjauksilla, tietoturva-aukkojen korjauksilla ja ominaisuuksien parannuksilla. Tarkastelemalla Gruntin ja Gulpin GitHub-varastoja voimme saada käsityksen näiden kahden avoimen lähdekoodin projektin kehitystoiminnan tasosta. Tämä johtuu siitä, että GitHub näyttää toimitusten, julkaisujen ja osallistujien määrän.
Sitoutuu esiintyä aina, kun lähdekoodi on päivitetty. Tämä voi olla hyvä merkki siitä, kuinka aktiivisia projektin kehittäjät ovat virheiden korjaamisessa ja ominaisuuksien lisäämisessä/parannuksessa. Ohjelmistossa, julkaisut viittaavat erillisiin kehitysvaiheisiin.
Esimerkiksi (käyttäen semanttisia versiointikäytäntöjä) v1.0.0 on ensimmäinen vakaa julkaisu. v2.1.2 on kypsempi julkaisu. Julkaisujen määrä voi näyttää kuinka usein ohjelmisto päivitetään.
Se voi antaa meille vihjeen siitä, kuinka reagoivia projektin kehittäjät ovat, kun haavoittuvuuksia ja muita ongelmia löydetään. Osallistujat ovat ahkeria ihmisiä, jotka lisäävät koodia projektiin. Enemmän GitHub-käyttäjiä osallistuvat projektiin voi tarkoittaa sitä, että enemmän ihmisiä tarkistaa projektin lähdekoodia, enemmän ihmisiä, jotka voivat auttaa projektin kehittämisessä, ja suurempi mahdollisuus, että joku voi / ottaa vastuun, jos projektin luojat päättävät, etteivät he enää. haluavat työskennellä projektin parissa.
Hankala asia näiden mittareiden käyttämisessä ohjelmistokehitystoiminnan mittaamiseen on se, että jokaisella projektilla voi olla yksilölliset käytännöt lähdekoodin sitomiseen ja päivitysten julkaisemiseen. Heillä voi myös olla tiettyjä vaatimuksia ja ohjeita, jotka vaikuttavat projektiin koodia lisäävien ihmisten määrään. Lisäksi avoimen lähdekoodin projektien kypsyessä tulee luonnollisesti vähemmän korjattavia bugeja ja lisättäviä ominaisuuksia. Joten teoriassa sitoumusten ja julkaisujen määrä vähenee projektin ikääntyessä.
Mutta ainakin voimme käyttää näitä lukuja saadaksemme karkean käsityksen siitä, kuinka usein Gruntin ja Gulpin kehittäjät päivittävät vastaavia repojaan.
Grunt Development Activity Stats
| Sitoutuu | 1,310 |
| Julkaisut | 8 |
| Osallistujat | 54 |
Gulpin kehitystoiminnan tilastot
| Sitoutuu | 814 |
| Julkaisut | 14 |
| Osallistujat | 135 |
Hyviä uutisia ovat molemmat Grunt ja Gulp ovat terveitä kehitystoiminnan kannalta. Kirjoitushetkellä Gruntilla oli sitoumus viisi päivää sitten, kun taas Gulpilla yksi neljä päivää sitten.
Gruntin viimeisin julkaisu oli lähes 11 kuukautta sitten. Gulpin viimeisin julkaisu on uudempi, noin 3 kuukautta sitten. Ne eroavat eniten projektiin osallistuvien kehittäjien määrässä.
Gulpilla on 2,5 kertaa enemmän kehittäjiä työskentelee projektin parissa.
Suosio
GitHubissa voit mitata tietovarastosta kiinnostuneiden ihmisten määrän katsomalla Watch-, Star- ja Fork-mittareita. Mittari on niiden GitHub-käyttäjien määrä, jotka seuraavat aktiivisesti repossa tapahtuvaa toimintaa.
Mittari on niiden GitHub-käyttäjien määrä, jotka ovat lisänneet arkiston suosikkeihin. Mittari näyttää niiden GitHub-käyttäjien määrän, jotka ovat kopioineet projektin omalle GitHub-tililleen. Nämä mittarit voivat antaa meille käsityksiä projektin suosiosta GitHubissa.
Gruntin suosiotilastot
| Katsojat | 563 |
| Tähdet | 9,466 |
| Haarukka | 1,120 |
Gulpin suosiotilastot
| Katsojat | 653 |
| Tähdet | 13,540 |
| Haarukka | 1 240 |
Vaikka Grunt on vanhempi kuin Gulp, voimme nähdä vain tähtien, tarkkailijoiden ja haarukoiden lukumäärän perusteella. Gulp on tällä hetkellä suositumpi.
Tietolähteet
Tilastot on saatu 11. toukokuuta 2015. Keskimääräinen latausmäärä päivässä laskettiin 1.-7. toukokuuta 2015 tilastojen perusteella. Lähteet:
Johtopäätös
Joten, pitäisikö sinun käyttää Gruntia vai Gulpia? Rehellisesti sanottuna se on sinusta kiinni. Vaikea sanoa. Toinen ei ole toista parempi.
Ne ovat samantyyppisiä työkaluja, jotka voivat tehdä saman työn. Joten se riippuu henkilökohtaisista mieltymyksistä. Mutta haluan kertoa kanssasi, kuinka käytän Grunt Gulpia, jos mietit, ja myös havainnollistaakseni, että sinun ei tarvitse vannoa uskollisuuttasi vain yhdelle heistä.
Käytän Gruntia Angular-projekteihini. Lähinnä AngularJS-laajennuksen Yeoman-generaattorin vuoksi, joka tukee sovellukseni juuri haluamallani tavalla. Tästä on olemassa myös Gulp-versio, generaattori-gulp-kulma, mutta en pitänyt siitä.
Joten käytän edelleen Gruntia Angular-projekteihin. Teen joitain pieniä muokkauksia ja päivityksiä tehtäväni kokoonpanoihin tarvittaessa. Käytän pääasiassa Gulpia Laravel-projekteihini ja joihinkin pieniin verkkosivustoihin.
Periaatteessa, jos en löydä minulle sopivaa Yeoman-generaattoria, teen sen tyhjästä Gulpilla. Gulp on mielestäni paljon yksinkertaisempi käyttää ja määrittää. Toivottavasti täältä lukemasi tiedot auttavat sinua päättämään Gruntin tai Gulpin välillä.
