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.

Tällä sivulla

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 /bootstrapja suorita npm installasentaaksesi paketti.jsonissa luetellut paikalliset riippuvuutemme .

Kun olet valmis, voit suorittaa erilaisia komentoriviltä annettuja komentoja.

npm-skriptien käyttö

Paketti.json sisältää lukuisia tehtäviä projektin kehittämiseen . Suorita npm runnähdäksesi kaikki terminaalissasi olevat npm-skriptit. Päätehtäviin kuuluvat:

Tehtävä	Kuvaus
`npm start`	Kääntää CSS:n ja JavaScriptin, rakentaa dokumentaation ja käynnistää paikallisen palvelimen.
`npm run dist`	Luo `dist/`hakemiston käännetyillä tiedostoilla. Vaatii Sassin , Autoprefixerin ja terserin .
`npm test`	Suorittaa testejä paikallisesti suorituksen jälkeen`npm run dist`
`npm run docs-serve`	Rakentaa ja suorittaa dokumentaation paikallisesti.

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 käyttää Dart Sassia Sass-lähdetiedostojemme kääntämiseen CSS-tiedostoiksi (sisältyy rakennusprosessiimme), ja suosittelemme, että teet saman, jos käännät Sassia käyttämällä omaa resurssiputkeasi. Käytimme aiemmin Node Sassia Bootstrap v4:lle, mutta LibSass ja sen päälle rakennetut paketit, mukaan lukien Node Sass, ovat nyt vanhentuneet .

Dart Sass käyttää pyöristystarkkuutta 10, eikä tehokkuussyistä salli tämän arvon säätämistä. Emme alenna tätä tarkkuutta luodun CSS:n jatkokäsittelyn aikana, kuten pienentämisen aikana, mutta jos päätit tehdä niin, suosittelemme säilyttämään tarkkuuden vähintään 6 estääksesi selaimen pyöristämiseen liittyvät ongelmat.

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 .

RTLCSS

Bootstrap käyttää RTLCSS :ää käännetyn CSS:n prosessoimiseen ja niiden muuntamiseen RTL:ksi – periaatteessa korvaamalla vaakasuuntaiset ominaisuudet (esim. padding-left) niiden vastakkaisilla ominaisuuksilla. Sen avulla voimme kirjoittaa CSS:n vain kerran ja tehdä pieniä muutoksia käyttämällä RTLCSS- ohjaus- ja arvodirektiivejä .

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ökalut .
/bootstrapSuorita juurihakemistosta npm run docs-servekomentorivillä.
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.