in English

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:

  1. Lataa ja asenna Node.js , jota käytämme riippuvuutemme hallintaan.
  2. Lataa joko Bootstrapin lähteet tai haarukka Bootstrapin arkisto .
  3. Siirry juurihakemistoon /bootstrapja suorita npm installasentaaksesi 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 distluo /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 runnähdäksesi kaikki npm-skriptit.

Aloita Bootstrapin käyttö npm:n kautta aloitusprojektimme avulla! Siirry twbs/bootstrap-npm-starter-mallivarastoon nähdäksesi, kuinka voit rakentaa ja mukauttaa Bootstrapia omassa npm-projektissasi. Sisältää Sass-kääntäjän, Autoprefixerin, Stylelintin, PurgeCSS- ja Bootstrap-kuvakkeet.

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:

  1. Asenna kaikki riippuvuudet suorittamalla yllä olevat työkaluasetukset .
  2. /bootstrapSuorita juurihakemistosta npm run docs-servekomentorivillä.
  3. 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.