Rakenna työkaluja
Opi käyttämään Bootstrapin mukana tulevia npm-skriptejä dokumentaation rakentamiseen, lähdekoodin kääntämiseen, testien suorittamiseen ja muuhun.
Työkalujen asennus
Bootstrap käyttää npm-skriptejä rakennusjärjestelmässään. Meidän package.json sisältää käteviä menetelmiä kehyksen kanssa työskentelyyn, mukaan lukien koodin kääntäminen, testien suorittaminen ja paljon muuta.
Tarvitset kopion Bootstrapin lähdetiedostoista ja Nodesta, jotta voit käyttää rakennusjärjestelmäämme ja suorittaa dokumentaatiomme paikallisesti. Noudata näitä ohjeita ja sinun pitäisi olla valmis rokkaamaan:
- Lataa ja asenna Node.js , jota käytämme riippuvuutemme hallintaan.
- Lataa joko Bootstrapin lähteet tai haarukka Bootstrapin arkisto .
- Siirry juurihakemistoon
/bootstrap
ja suoritanpm install
asentaaksesi paketti.jsonissa luetellut paikalliset riippuvuutemme .
Kun olet valmis, voit suorittaa erilaisia komentoriviltä annettuja komentoja.
npm-skriptien käyttö
Meidän package.json sisältää seuraavat komennot ja tehtävät:
Tehtävä | Kuvaus |
---|---|
npm run dist |
npm run dist luo /dist/ hakemiston käännetyillä tiedostoilla. Käyttää Sassia , Autoprefixeria ja terseria . |
npm test |
Suorittaa testejä paikallisesti suorituksen jälkeennpm run dist |
npm run docs-serve |
Rakentaa ja suorittaa dokumentaation paikallisesti. |
Suorita npm run
nähdäksesi kaikki npm-skriptit.
Sass
Bootstrap v4 käyttää Node Sassia Sass-lähdetiedostojen kääntämiseen CSS-tiedostoiksi (sisältyy rakennusprosessiimme). Jotta päädyt samaan luotuun CSS:ään, kun käännät Sassia käyttämällä omaa resurssiputkeasi, sinun on käytettävä Sass-kääntäjää, joka tukee ainakin Node Sassin ominaisuuksia. Tämä on tärkeää huomata, koska 26. lokakuuta 2020 alkaen LibSass ja sen päälle rakennetut paketit – mukaan lukien Node Sass – on poistettu käytöstä .
Jos tarvitset uudempia Sass-ominaisuuksia tai yhteensopivuutta uudempien CSS-standardien kanssa, Dart Sass on nyt Sassin ensisijainen toteutus ja tukee JavaScript-sovellusliittymää, joka on täysin yhteensopiva Node Sassin kanssa (muutamia poikkeuksia lukuun ottamatta, jotka on lueteltu Dart Sassin GitHub-sivulla ).
Suurennamme Sassin pyöristystarkkuuden 6:een (oletusarvoisesti se on 5 Node Sassissa) estääksemme selaimen pyöristysongelmia. Jos käytät Dart Sassia, tätä ei tarvitse säätää, koska kääntäjä käyttää pyöristystarkkuutta 10, eikä tehokkuussyistä salli sitä säätää.
Automaattinen etuliite
Bootstrap käyttää Autoprefixeria (sisältyy rakennusprosessiimme) lisätäkseen automaattisesti toimittajan etuliitteet joihinkin CSS-ominaisuuksiin rakennusvaiheessa. Näin säästämme aikaa ja koodia, koska voimme kirjoittaa CSS:n tärkeimmät osat yhdellä kertaa, samalla kun v3:n kaltaisia toimittajasekoituksia ei tarvita.
Ylläpidämme luetteloa Autoprefixerin kautta tuetuista selaimista erillisessä tiedostossa GitHub-arkistossamme. Katso lisätietoja osoitteesta .browserslistrc .
Paikallinen dokumentaatio
Dokumentaation suorittaminen paikallisesti edellyttää Hugon käyttöä, joka asennetaan hugo-bin npm -paketin kautta. Hugo on räjähtävän nopea ja melko laajennettava staattinen sivustogeneraattori, joka tarjoaa meille: perussisällöt, Markdown-pohjaiset tiedostot, mallit ja paljon muuta. Näin pääset alkuun:
- Asenna kaikki riippuvuudet suorittamalla yllä olevat työkaluasetukset .
/bootstrap
Suorita juurihakemistostanpm run docs-serve
komentorivillä.- Avaa
http://localhost:9001/
selaimessasi ja voilà.
Lue lisää Hugon käytöstä lukemalla sen dokumentaatio .
Ongelmien karttoittaminen
Jos sinulla on ongelmia riippuvuuksien asennuksessa, poista kaikki aiemmat riippuvuusversiot (globaalit ja paikalliset). Suorita sitten uudelleen npm install
.