Gulp aloittelijoille

Gulp on työkalu, joka auttaa sinua useissa tehtävissä web-kehityksessä. Sitä käytetään usein tekemään front end -tehtäviä, kuten esim:

• verkkopalvelimen käynnistäminen
• selaimen automaattinen lataaminen aina, kun tiedosto tallennetaan
• esiprosessoreiden, kuten Sassin tai LESSin, käyttäminen
• resurssien, kuten CSS:n, JavaScriptin ja kuvien, optimointi

Tärkeä huomautus! Tämä artikkeli on kirjoitettu Gulp 3.x:lle, mutta nyt Gulp 4.x on julkaistu ja sitä suositellaan. Kuten kaikissa suurissa versiomuutoksissa, API:ssa on rikkovia muutoksia. Jos asennat Gulp 4:n ja yrität tehdä joitakin tämän artikkelin asioita, ne eivät toimi. Teemme joitakin muistiinpanoja tästä ripoteltuna tähän muistutukseksi. Tämä näyttää melko hyvältä Gulp 4:n aloittajalta.

Tämä ei ole kattava luettelo asioista, joita Gulp voi tehdä. Jos olet tarpeeksi hullu, voit jopa rakentaa staattisen sivustogeneraattorin Gulpilla (olen tehnyt sen!). Joten kyllä, Gulp on erittäin tehokas, mutta sinun on opittava käyttämään Gulpia, jos haluat luoda omia räätälöityjä rakennusprosesseja.

Sitä varten tämä artikkeli on siis tehty. Se auttaa sinua oppimaan Gulpin perusteet niin hyvin, että voit alkaa tutkia kaikkea muuta itse.

Ennen kuin sukellamme Gulpin kanssa työskentelyyn, puhutaanpa siitä, miksi saatat haluta käyttää Gulpia verrattuna muihin vastaaviin työkaluihin.

Miksi Gulp?

Työkaluja, kuten Gulpia, kutsutaan usein ”rakennustyökaluiksi”, koska ne ovat työkaluja verkkosivuston rakentamiseen liittyvien tehtävien suorittamiseen. Kaksi suosituinta build-työkalua tällä hetkellä ovat Gulp ja Grunt. (Chrisillä on postaus Gruntin käytön aloittamisesta täällä). Mutta on toki muitakin. Broccoli keskittyy asset-kompilaatioon, joka on yksi yleisimmistä build-työkalun tehtävistä.

Tässä on jo useita artikkeleita, joissa käsitellään Gruntin ja Gulpin eroja ja sitä, miksi kannattaa käyttää toista enemmän kuin toista. Voit tutustua tähän, tähän tai tähän artikkeliin, jos olet kiinnostunut saamaan lisää tietoa. Brunch on samankaltainen keskittyessään omaisuuseriin, ja se niputtaa mukaan joitakin yleisimpiä muita tehtäviä, kuten palvelimen ja tiedostojen tarkkailijan.

Pääero on siinä, miten konfiguroit työnkulun niiden avulla. Gulpin konfiguraatiot ovat yleensä paljon lyhyempiä ja yksinkertaisempia verrattuna Grunttiin. Gulpilla on myös taipumus toimia nopeammin.

Siirrymme nyt eteenpäin ja selvitämme, miten työnkulku määritetään Gulpilla.

Mitä asetamme

Tämän artikkelin loppuun mennessä sinulla on työnkulku, joka tekee tämän artikkelin alussa hahmottelemamme tehtävät:

• Käynnistää web-palvelimen
• Kompiloi Sassin CSS:ksi
• Virkistää selaimen automaattisesti aina, kun tallennat tiedoston
• Optimoi kaikki resurssit (CSS, JS, fontit ja kuvat) tuotantoa varten

Oppiessasi opit myös ketjuttamaan eri tehtäviä yksinkertaisiksi komennoiksi, jotka on helppo käsittää ja jotka on helppo suorittaa.

Aloitetaan asentamalla Gulp tietokoneellesi.

Gulpin asentaminen

Sinulla täytyy olla Node.js (Node) asennettuna tietokoneellesi ennen kuin voit asentaa Gulpin.

Jos sinulla ei ole Nodea jo asennettuna, voit hankkia sen lataamalla paketin asennusohjelman Noden verkkosivuilta.

Kun olet saanut Noden asennuksen valmiiksi, voit asentaa Gulpin käyttämällä komentorivillä seuraavaa komentoa:

$ sudo npm install gulp -g

Huomautus: Vain Mac-käyttäjät tarvitsevat sudo-avainsanaa. (Katso Pawel Grzybekin ensimmäinen kommentti, jos et halua käyttää sudoa). Ja muista, että ”$” yllä olevassa koodissa symboloi vain komentokehotetta. Se ei oikeastaan ole osa ajettavaa komentoa.

Tässä käyttämämme npm install komento on komento, joka käyttää Node Package Manageria (npm) asentaakseen Gulpin tietokoneellesi.

Tässä komennossa oleva -g-lippu käskee npm:ää asentamaan Gulpin globaalisti tietokoneellesi, jolloin voit käyttää gulp-komentoa missä tahansa järjestelmässäsi.

Mac-käyttäjät tarvitsevat komennossa ylimääräisen sudo-avainsanan, koska he tarvitsevat järjestelmänvalvojan oikeudet asentaakseen Gulpin globaalisti.

Nyt kun Gulp on asennettu, tehdään projekti, joka käyttää Gulpia.

Gulp-projektin luominen

Luotaan ensin kansio nimeltä project palvelimelle projektin juureksi, kun etenemme tämän ohjeen läpi. Suorita komento npm init tuon kansion sisältä:

# ... from within our project folder$ npm init

Komento npm init luo projektillesi package.json-tiedoston, johon tallennetaan tietoa projektista, kuten projektissa käytetyt riippuvuudet (Gulp on esimerkki riippuvuudesta).

npm init kysyy sinulta:

Kun package.json-tiedosto on luotu, voimme asentaa Gulpin projektiin seuraavalla komennolla:

$ npm install gulp --save-dev

Tällä kertaa asennamme Gulpin tiedostoon project sen sijaan, että asentaisimme sen globaalisti, minkä vuoksi komennossa on joitakin eroja.

Huomaat, että avainsanaa sudo ei tarvita, koska emme asenna Gulpia globaalisti, joten myöskään -g ei ole tarpeen. Olemme lisänneet --save-dev, joka käskee tietokonetta lisäämään gulp dev-riippuvuudeksi package.json.

Jos tarkistat projektikansiota, kun komento on suoritettu, sinun pitäisi nähdä, että Gulp on luonut node_modules-kansion. Sinun pitäisi myös nähdä gulp-kansio node_modules:n sisällä.

Olemme melkein valmiita aloittamaan työskentelyn Gulpin kanssa. Ennen sitä meidän on oltava selvillä siitä, miten aiomme käyttää Gulpia projektissa, ja osa sitä on kansiorakenteen päättäminen.

Kansiorakenteen määrittäminen

Gulp on tarpeeksi joustava toimimaan minkä tahansa kansiorakenteen kanssa. Sinun on vain ymmärrettävä sen sisäinen toiminta, ennen kuin virität sen projektiisi sopivaksi.

Tässä artikkelissa käytämme geneerisen verkkosovelluksen rakennetta:

 |- app/ |- css/ |- fonts/ |- images/ |- index.html |- js/ |- scss/ |- dist/ |- gulpfile.js |- node_modules/ |- package.json

Tässä rakenteessa käytämme kansiota app kehitystarkoituksiin, kun taas kansiota dist (kuten ”jakelu”) käytetään sisältämään tuotantosivuston optimoituja tiedostoja.

Koska app käytetään kehitystarkoituksiin, kaikki koodimme sijoitetaan app-kansioon.

Meidän on pidettävä tämä kansiorakenne mielessä, kun työstämme Gulp-konfiguraatioitamme. Aloitetaan nyt luomalla ensimmäinen Gulp-tehtävä gulpfile.js-kansioon, johon tallennetaan kaikki Gulp-konfiguraatiot.

Ensimmäisen Gulp-tehtävän kirjoittaminen

Ensimmäinen askel Gulpin käyttöön on require sen require kirjoittaminen gulpfile-tiedostoon.

var gulp = require('gulp');

Tarve-lause käskee Nodea etsimään node_modules-kansiosta gulp-nimistä pakettia. Kun paketti löytyy, osoitamme sen sisällön muuttujaan gulp.

Voitamme nyt alkaa kirjoittaa gulp-tehtävää tämän gulp-muuttujan avulla. Gulp-tehtävän perussyntaksi on:

gulp.task('task-name', function() { // Stuff here});

task-name viittaa tehtävän nimeen, jota käytettäisiin aina, kun halutaan suorittaa tehtävä Gulpissa. Voit suorittaa saman tehtävän myös komentorivillä kirjoittamalla gulp task-name.

Testaamiseksi luodaan hello tehtävä, jossa lukee Hello Zell!.

gulp.task('hello', function() { console.log('Hello Zell');});

Voidaan ajaa tämä tehtävä komentorivillä gulp hello.

$ gulp hello

Komentorivi palauttaa lokin, jossa lukee Hello Zell!.

Gulp-tehtävät ovat yleensä hieman monimutkaisempia kuin tämä. Se sisältää yleensä kaksi ylimääräistä Gulp-metodia sekä erilaisia Gulp-liitännäisiä.

Tältä oikea tehtävä voi näyttää:

Kuten näet, oikea tehtävä ottaa mukaan kaksi ylimääräistä gulp-metodia – gulp.src ja gulp.dest.

gulp.src kertoo Gulp-tehtävälle, mitä tiedostoja tehtävässä käytetään, kun taas gulp.dest kertoo Gulpille, minne tiedostot tulostetaan, kun tehtävä on suoritettu.

Kokeillaan rakentaa oikea tehtävä, jossa käännetään Sass-tiedostoja CSS-tiedostoiksi.

Esikäsittely Gulpilla

Voidaan kääntää Sass CSS:ksi Gulpissa gulp-sass-nimisen laajennuksen avulla. Voit asentaa gulp-sassin projektiin käyttämällä npm install komentoa, kuten teimme gulp kohdalla.

Haluamme myös käyttää --save-dev-lippua varmistaaksemme, että gulp-sass lisätään devDependencies:een package.json:ssä.

$ npm install gulp-sass --save-dev

Meidän täytyy require poistaa gulp-sass node_modules-kansiosta aivan kuten teimme gulp:n kanssa ennen kuin voimme käyttää lisäosaa.

var gulp = require('gulp');// Requires the gulp-sass pluginvar sass = require('gulp-sass');

Voimme käyttää gulp-sassia korvaamalla aGulpPlugin() kansiolla sass(). Koska tehtävän on tarkoitus kääntää Sass CSS:ksi, nimetään se sass.

gulp.task('sass', function(){ return gulp.src('source-files') .pipe(sass()) // Using gulp-sass .pipe(gulp.dest('destination'))});

Tehtävälle sass on annettava lähdetiedostot ja määränpää, jotta tehtävä toimisi, joten luodaan styles.scss-tiedosto app/scss-kansioon. Tämä tiedosto lisätään sass-tehtävään gulp.src.

Tahdomme tulostaa mahdollisen styles.css-tiedoston `app/css`-kansioon, joka olisi destination:lle gulp.dest.

Haluamme testata, että sass-tehtävä toimii niin kuin haluamme. Tätä varten voimme lisätä Sass-funktion styles.scss:n sisälle.

// styles.scss.testing { width: percentage(5/7);}

Jos suoritat gulp sass komentorivillä, sinun pitäisi nyt nähdä, että styles.css-tiedosto luotiin app/css:ssä. Lisäksi siinä on koodi, jossa percentage(5/7) evaluoitiin 71.42857%:ksi.

/* styles.css */.testing { width: 71.42857%; }

Siten tiedämme, että tehtävä sass toimii!

Joskus tarvitsemme kykyä kääntää useampi kuin yksi .scss-tiedosto CSS:ksi samaan aikaan. Voimme tehdä sen Noden globien avulla.

Globbing in Node

Globit ovat tiedostojen täsmääviä kuvioita, joiden avulla voit lisätä useamman kuin yhden tiedoston gulp.src. Se on kuin säännölliset lausekkeet, mutta erityisesti tiedostopolkuja varten.

Kun käytät globia, tietokone tarkistaa tiedostojen nimet ja polut määritetyn kuvion osalta. Jos kuvio on olemassa, tiedosto sovitetaan.

Useimmat työnkulut Gulpilla vaativat yleensä vain 4 erilaista globbauskuviota:

1. *.scss: *-kuvio on jokerimerkki, joka sopii mihin tahansa kuvioon nykyisessä hakemistossa. Tässä tapauksessa täsmäämme kaikkiin tiedostoihin, joiden pääte on .scss juurihakemistossa (project).
2. **/*.scss: Tämä on äärimmäisempi versio *-kuviosta, joka täsmää kaikkiin tiedostoihin, joiden pääte on .scss juurihakemistossa ja kaikissa alahakemistoissa.
3. !not-me.scss: ! ilmaisee, että Gulpin pitäisi sulkea kuvio pois osumiensa joukosta, mikä on hyödyllistä, jos tiedosto halutaan sulkea pois täsmäävästä kuviosta. Tässä tapauksessa not-me.scss jätettäisiin osuman ulkopuolelle.
4. *.+(scss|sass): Plus + ja sulut () mahdollistavat sen, että Gulp voi täsmäyttää useita kuvioita, ja eri kuviot erotetaan toisistaan piippumerkillä |. Tässä tapauksessa Gulp vastaa kaikkiin tiedostoihin, jotka päättyvät .scss tai .sass juurikansiossa.

Mikä tahansa muu Sass-tiedosto, joka löytyy app/scss:n sisältä, sisällytetään automaattisesti sass-tehtävään tämän muutoksen myötä. Jos lisäät print.scss-tiedoston projektiin, näet, että print.css syntyy app/css:ssä.

Olemme nyt onnistuneet kääntämään kaikki Sass-tiedostot CSS-tiedostoiksi yhdellä komennolla. Kysymys kuuluukin, mitä hyötyä siitä on, jos meidän on ajettava gulp sass manuaalisesti joka kerta, kun haluamme kääntää Sassin CSS:ksi?

Onneksi voimme kertoa Gulpille, että se suorittaa sass-tehtävän automaattisesti aina, kun tiedosto tallennetaan prosessin nimeltä ”watching” kautta.

Sass-tiedostojen tarkkailu muutosten varalta

Huom! Gulp Watch oli yksi niistä asioista, jotka muuttuivat paljon 3.x:stä 4.x:ään. Katso dokumentit.

Gulp tarjoaa meille watch-metodin, joka tarkistaa, onko tiedosto tallennettu. watch-metodin syntaksi on:

// Gulp watch syntaxgulp.watch('app/scss/**/*.scss', ); 

Useimmiten haluamme kuitenkin katsoa useampaa kuin yhtä tiedostotyyppiä kerralla. Tätä varten voimme ryhmitellä useita katseluprosesseja watch-tehtäväksi:

gulp.task('watch', function(){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Jos suoritit gulp watch-komennon juuri nyt, huomaat, että Gulp aloittaa katselun välittömästi.

Ja että se suorittaa automaattisesti sass-tehtävän aina kun tallennat .scss-tiedoston.

Viedään asia vielä askeleen pidemmälle ja laitetaan Gulp lataamaan selain uudelleen aina, kun tallennamme .scss-tiedoston Browser Syncin avulla.

Live-reloading with Browser Sync

Browser Sync auttaa tekemään web-kehityksestä helpompaa pyöräyttämällä web-palvelimen, jonka avulla voimme tehdä Live-reloadingin helposti. Sillä on myös muita ominaisuuksia, kuten toimintojen synkronointi useiden laitteiden välillä.

Meidän on ensin asennettava Browser Sync:

$ npm install browser-sync --save-dev

Olet ehkä huomannut, että Browser Synciä asennettaessa ei ole gulp--etuliitettä. Tämä johtuu siitä, että Browser Sync toimii Gulpin kanssa, joten meidän ei tarvitse käyttää lisäosaa.

Käyttääksemme Browser Synciä, meidän on require Browser Sync.

var browserSync = require('browser-sync').create();

Meidän on luotava browserSync tehtävä, jotta Gulp voi pyörittää palvelimen Browser Syncin avulla. Koska käynnistämme palvelimen, meidän on annettava Browser Syncille tieto siitä, missä palvelimen juuren pitäisi olla. Meidän tapauksessamme se on `app`-kansio:

gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: 'app' }, })})

Meidän on myös muutettava hieman sass-tehtäväämme, jotta Browser Sync voi injektoida uusia CSS-tyylejä (päivittää CSS:n) selaimeen aina, kun sass-tehtävä suoritetaan.

Olemme valmiita Browser Syncin konfiguroinnin kanssa. Nyt meidän on suoritettava sekä watch– että browserSync-tehtävät samaan aikaan, jotta live-uudelleenlataus tapahtuisi.

On hankalaa avata kaksi komentoriviikkunaa ja ajaa gulp browserSync ja gulp watch erikseen, joten laitetaan Gulp ajamaan ne yhdessä kertomalla watch-tehtävälle, että browserSync:n on oltava valmis ennen kuin watch saa ajaa.

Voimme tehdä sen lisäämällä toisen argumentin watch-tehtävään. Syntaksi on seuraava:

gulp.task('watch', , function (){ // ...})

Ja tässä tapauksessa lisäämme tehtävän browserSync.

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Haluamme myös varmistaa, että sass suoritetaan ennen watch, jotta CSS on jo viimeisin aina, kun suoritamme Gulp-komennon.

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers});

Nyt, jos suoritat gulp watch komentorivillä, Gulpin pitäisi käynnistää sekä sass että browserSync tehtävät samanaikaisesti. Kun molemmat tehtävät on suoritettu, watch suoritetaan.

Samanaikaisesti avautuisi myös selainikkuna, joka osoittaa app/index.html. Jos muutat styles.scss-tiedostoa, näet, että selain latautuu automaattisesti uudelleen.

On vielä yksi asia ennen kuin lopetamme tämän live-uudelleenlatausta käsittelevän osion. Koska tarkkailemme jo .scss-tiedostojen uudelleenlatausta, miksi emme menisi askeleen pidemmälle ja lataisi selainta uudelleen, jos jokin HTML- tai JavaScript-tiedosto tallennetaan?

Voimme tehdä sen lisäämällä kaksi uutta watch-prosessia ja kutsumalla browserSync.reload-funktiota, kun tiedosto tallennetaan:

Tässä opetusohjelmassa olemme tähän mennessä hoitaneet kolme asiaa:

1. Verkkopalvelimen käynnistäminen kehitystyötä varten
2. Sass-esiprosessorin käyttäminen
3. Selaimen lataaminen aina, kun tiedosto tallennetaan

Käsitellään seuraavassa osiossa omaisuuserien optimointia koskevaa osaa. Aloitamme CSS- ja JavaScript-tiedostojen optimoinnista.

CSS- ja JavaScript-tiedostojen optimointi

Kehittäjillä on kaksi tehtävää, kun yritämme optimoida CSS- ja JavaScript-tiedostoja tuotantoa varten: pienentäminen ja ketjuttaminen.

Eräs ongelma, jonka kehittäjät kohtaavat automatisoidessaan tätä prosessia, on se, että skriptejä on vaikea ketjuttaa oikeassa järjestyksessä.

Esitetään, että olemme sisällyttäneet 3 skriptitunnistetta index.html.

Nämä skriptit sijaitsevat kahdessa eri hakemistossa. Niiden ketjuttaminen perinteisillä lisäosilla, kuten gulp-concatenate, tulee olemaan vaikeaa.

Onneksi on olemassa hyödyllinen Gulp-lisäosa, gulp-useref, joka ratkaisee tämän ongelman.

Gulp-useref yhdistää minkä tahansa määrän CSS- ja JavaScript-tiedostoja yhdeksi tiedostoksi etsimällä kommenttia, joka alkaa ”<!-build:” ja päättyy ”<!-endbuild->”. Sen syntaksi on:

<!-- build:<type> <path> -->... HTML Markup, list of script / link tags.<!-- endbuild -->

<type> voi olla joko js, css tai remove. On parasta asettaa type sen tiedoston tyypiksi, jota yrität ketjuttaa. Jos asetat type:n arvoksi remove, Gulp poistaa koko rakennuslohkon tuottamatta tiedostoa.

<path> viittaa tässä generoidun tiedoston kohdepolkuun.

Haluamme, että lopullinen JavaScript-tiedosto generoidaan js-kansioon, kuten main.min.js. Näin ollen merkintätapa olisi:

Konfiguroidaan nyt gulp-useref-lisäosa gulpfileen. Meidän on asennettava lisäosa ja vaadittava sitä gulpfilessä.

$ npm install gulp-useref --save-dev

var useref = require('gulp-useref');

Tehtävän useref määrittäminen on samanlainen kuin muutkin tähän mennessä tekemämme tehtävät. Tässä on koodi:

gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulp.dest('dist'))});

Nyt jos suoritat tämän useref-tehtävän, Gulp käy läpi 3 skriptitunnistetta ja ketjuttaa ne dist/js/main.min.js:ksi.

Tiedostoa ei kuitenkaan ole minifioitu juuri nyt. Meidän on käytettävä gulp-uglify-lisäosaa, joka auttaa JavaScript-tiedostojen pienentämisessä. Tarvitsemme myös toisen pluginin nimeltä gulp-if varmistaaksemme, että yritämme minifioida vain JavaScript-tiedostoja.

$ npm install gulp-uglify --save-dev 

Gulpin pitäisi nyt automaattisesti minifioida tiedosto `main.min.js` aina, kun ajetaan useref-tehtävä.

Yksi näppärä asia, jonka en ole vielä paljastanut Gulp-userefista, on se, että se muuttaa automaattisesti kaikki skriptit ”<!-build:” ja ”<!-endbuild->” sisällä yhdeksi ainoaksi JavaScripttiedostoksi, joka osoittaa `js/main.min.js`.

Ihmeellistä, eikö olekin?

Voidaan käyttää samaa menetelmää myös mahdollisten CSS-tiedostojen ketjuttamiseen (jos päätit lisätä useamman kuin yhden). Noudatamme samaa prosessia ja lisäämme build-kommentin.

Voidaan myös minifioida myös ketjutettu CSS-tiedosto. Meidän on käytettävä pakettia nimeltä gulp-cssnano plugin, joka auttaa meitä pienentämisessä.

$ npm install gulp-cssnano

Nyt saisit yhden optimoidun CSS-tiedoston ja yhden optimoidun JavaScript-tiedoston aina, kun suoritat useref tehtävän.

Siirrymme seuraavaksi optimoimaan kuvia.

Kuvien optimointi

Olet varmaan jo arvannutkin; tarvitsemme gulp-imageminin apua kuvien optimoinnissa.

$ npm install gulp-imagemin --save-dev

var imagemin = require('gulp-imagemin');

Voimme minifioida png, jpg, gif ja jopa svg gulp-imageminin avulla. Luodaan images-tehtävä tätä optimointiprosessia varten.

gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|gif|svg)') .pipe(imagemin()) .pipe(gulp.dest('dist/images'))});

Koska eri tiedostotyyppejä voidaan optimoida eri tavalla, kannattaa imagemin:ään lisätä vaihtoehtoja, joilla voidaan mukauttaa kunkin tiedoston optimointia.

Voit esimerkiksi luoda lomitettuja GIF-tiedostoja asettamalla interlaced-valintanäppäimen arvoksi true.

Voit halutessasi leikkiä myös muilla vaihtoehdoilla.

Kuvien optimointi on kuitenkin erittäin hidas prosessi, jota ei kannata toistaa, ellei se ole välttämätöntä. Tähän voimme käyttää gulp-cache-lisäosaa.

$ npm install gulp-cache --save-dev

Optimoinnin kanssa olemme melkein valmiita. On vielä yksi kansio, joka meidän on siirrettävä `app`-hakemistosta `dist`-hakemistoon, fonttien hakemistoon. Tehdään se nyt.

Fonttitiedostojen kopiointi Distiin

Koska fonttitiedostot on jo optimoitu, meidän ei tarvitse tehdä enää mitään. Meidän tarvitsee vain kopioida fontit osoitteeseen dist.

Voimme kopioida tiedostoja Gulpilla yksinkertaisesti määrittämällä gulp.src ja gulp.dest ilman mitään liitännäisiä.

gulp.task('fonts', function() { return gulp.src('app/fonts/**/*') .pipe(gulp.dest('dist/fonts'))})

Nyt Gulp kopioi `fonts`:n `app`:stä `dist`:iin aina, kun suoritat gulp fonts.

Meillä on nyt 6 eri tehtävää gulpfilessä, ja jokaista niistä pitää kutsua erikseen komentorivillä, mikä on aika hankalaa, joten haluamme sitoa kaiken yhteen komentoon.

Katsotaan kuitenkin ennen sitä, miten luodut tiedostot voidaan siivota automaattisesti.

Generoitujen tiedostojen siivoaminen automaattisesti

Koska generoimme tiedostot automaattisesti, haluamme varmistaa, että tiedostot, joita ei enää käytetä, eivät jää minnekään meidän tietämättämme.

Tätä prosessia kutsutaan siivoamiseksi (tai yksinkertaisemmin sanottuna tiedostojen poistamiseksi).

Meidän on käytettävä del-ohjelmaa apunamme siivouksessa.

npm install del --save-dev

var del = require('del');

Funktio del ottaa sisäänsä solmupallojoukon, joka kertoo sille, mitä kansioita se poistaa.

Sen asettaminen Gulp-tehtävällä on melkein kuin ensimmäinen ”hello”-esimerkki, joka meillä oli.

gulp.task('clean:dist', function() { return del.sync('dist');})

Nyt Gulp poistaa `dist`-kansion puolestasi aina kun gulp clean:dist ajetaan.

Huomaa: Meidän ei tarvitse huolehtia dist/images-kansion poistamisesta, koska gulp-cache on jo tallentanut kuvien välimuistit paikalliseen järjestelmään.

Tyhjentääksesi välimuistit paikallisesta järjestelmästäsi voit luoda erillisen tehtävän, jonka nimi on `cache:clear`

gulp.task(’cache:clear’, function (callback) {
return cache.clearAll(callback)
})

Huh, onpa suupaltti. Yhdistetään nyt kaikki tehtävät yhteen!

Gulp-tehtävien yhdistäminen

Kokoamme yhteen, mitä olemme tehneet. Tähän mennessä olemme luoneet kaksi erillistä joukkoa Gulp-tehtäviä.

Ensimmäinen joukko on kehitysprosessia varten, jossa käänsimme Sassin CSS:ksi, tarkkailimme muutoksia ja latasimme selaimen uudelleen sen mukaisesti.

Toinen joukko on optimointiprosessia varten, jossa valmistimme kaikki tiedostot tuotantosivustoa varten. Optimoimme tässä prosessissa CSS:n, JavaScriptin ja kuvien kaltaisia resursseja ja kopioimme fontteja app:sta dist:een.

Olemme jo ryhmitelleet ensimmäisen tehtäväsarjan yksinkertaiseksi työnkuluksi gulp watch-komennolla:

gulp.task('watch', , function (){ // ... watchers})

Toinen joukko koostuu tehtävistä, jotka meidän on suoritettava tuotantosivuston luomiseksi. Tähän kuuluvat clean:dist, sass, useref, images ja fonts.

Jos menisimme samaa ajatuksenjuoksua, voisimme luoda build-tehtävän, joka yhdistää kaiken yhteen.

gulp.task('build', , function (){ console.log('Building files');})

Epäonneksemme emme voisi kirjoittaa build-tehtävää tällä tavalla, koska Gulp aktivoi kaikki toisen argumentin tehtävät samanaikaisesti.

On mahdollista, että useref, images tai jopa fonts valmistuu ennen kuin clean valmistuu, jolloin koko `dist`-kansio poistetaan.

Siten varmistaaksemme, että puhdistukset valmistuvat ennen muita tehtäviä, meidän on käytettävä ylimääräistä lisäosaa nimeltä Run Sequence.

$ npm install run-sequence --save-dev

Tässä on tehtäväsekvenssin syntaksi run sequence:

Kun task-name kutsutaan, Gulp suorittaa ensin task-one. Kun task-one päättyy, Gulp käynnistää automaattisesti task-two. Lopuksi, kun task-two on valmis, Gulp suorittaa task-three.

Run Sequence mahdollistaa myös tehtävien suorittamisen samanaikaisesti, jos sijoitat ne joukkoon:

gulp.task('task-name', function(callback) { runSequence('task-one', , 'task-three', callback);});

Tässä tapauksessa Gulp suorittaa ensin task-one. Kun task-one on valmis, Gulp suorittaa kaikki toisessa argumentissa olevat tehtävät samanaikaisesti. Kaikkien tässä toisessa argumentissa olevien tehtävien on oltava suoritettu ennen kuin task-three ajetaan.

Siten voimme nyt luoda tehtävän, joka varmistaa, että clean:dist ajetaan ensin ja sen jälkeen kaikki muut tehtävät:

gulp.task('build', function (callback) { runSequence('clean:dist', , callback )})

Jotta asiat olisivat johdonmukaisia, voimme rakentaa saman järjestyksen myös ensimmäisen ryhmän kanssa. Käytetään tällä kertaa tehtävän nimenä default:

gulp.task('default', function (callback) { runSequence(, callback )})

Miksi default? Koska kun tehtävä on nimeltään default, voit suorittaa sen yksinkertaisesti kirjoittamalla komennon gulp, mikä säästää muutamia näppäinpainalluksia.

Viimein, tässä on github-repo kaikelle tekemällemme työlle!

Wrapping it up

Olemme käyneet läpi Gulpin ehdottomat perusteet ja luoneet työnkulun, joka pystyy kääntämään Sassin CSS:ksi ja samalla tarkkailemaan HTML- ja JS-tiedostoja muutosten varalta. Voimme suorittaa tämän tehtävän komentorivin gulp-komennolla.

Olemme myös rakentaneet toisen tehtävän, build, joka luo dist-kansion tuotantosivustolle. Kokosimme Sassin CSS:ksi, optimoimme kaikki omaisuutemme ja kopioimme tarvittavat kansiot dist-kansioon. Tämän tehtävän suorittamiseksi meidän tarvitsee vain kirjoittaa komentoriville gulp build.

Viimeiseksi meillä on clean-tehtävä, joka tyhjentää luodusta dist-kansiosta kaikki luodut kuvavälimuistit, jolloin voimme poistaa kaikki vanhat tiedostot, joita oli epähuomiossa säilytetty dist-kansiossa.

Olemme tähän mennessä luoneet vankan työnkulun, joka riittää useimmille web-kehittäjille. Gulpissa ja työnkuluissa on paljon muuta, jota voimme tutkia tehdaksemme tästä prosessista vielä paremman. Tässä on muutamia ideoita sinulle:

Kehitykseen:

• Autoprefixerin käyttäminen myyjättömän CSS-koodin kirjoittamiseen
• Lähdekarttojen lisääminen helpompaan virheenkorjaukseen
• Spritejen luominen sprityn avulla
• Kompilointi vain muuttuneista tiedostoista gulp-changedin avulla
• Es6:n kirjoittaminen Babelin tai Traceurin avulla
• Javaskriptin tiedostojen modularisoiminen Browserifyn avulla, webpack tai jspm
• HTML:n modularisointi template-moottoreilla, kuten Handlebars tai Swig
• Gulpf-tiedoston jakaminen pienempiin tiedostoihin require-dir:llä
• Modernizr-skriptin automaattinen generointi gulp-modernizr:llä

Optimointia varten:

• Käyttämättömän CSS:n poistaminen unCSS:llä
• CSS:n edelleen optimoiminen CSSO:lla
• Suorituskykyä parantavan inline-CSS:n tuottaminen Criticalilla

Kehitys- tai optimointiprosessien lisäksi voit myös lisätä JavaScript-yksikkötestejä gulp-jasmine:lla ja jopa ottaa dist-kansiosi käyttöön tuotantopalvelimellesi automaattisesti gulp-rync:llä.

Kuten huomaat, vaikka luomamme työnkulku tekeekin melko paljon asioita, voidaan tehdä paljon muutakin. Omiin tarpeisiisi sopivan työnkulun luominen voi olla erittäin jännittävää ja antoisaa, mutta se voi olla paljon omaksuttavissa, jos olet uusi tässä asiassa.

Gulpissa on niin paljon muutakin, että sitä on mahdotonta käsitellä tässä blogipostauksessa tai edes postaussarjassa. Siksi kirjoitin kirjan työnkulun automatisoinnista, ja kutsun sinut nappaamaan kymmenen lukua ilmaiseksi, jos olet kiinnostunut kuulemaan lisää 🙂