Yapı araçları
Belgelerimizi oluşturmak, kaynak kodu derlemek, testleri çalıştırmak ve daha fazlası için Bootstrap'in içerdiği npm komut dosyalarını nasıl kullanacağınızı öğrenin.
Takım kurulumu
Bootstrap , derleme sistemi için npm komut dosyalarını kullanır. package.json'umuz , kod derleme, testler çalıştırma ve daha fazlası dahil olmak üzere çerçeveyle çalışmak için uygun yöntemler içerir.
Yapı sistemimizi kullanmak ve belgelerimizi yerel olarak çalıştırmak için Bootstrap'in kaynak dosyalarının ve Node.js dosyasının bir kopyasına ihtiyacınız olacak. Bu adımları izleyin ve sallanmaya hazır olmalısınız:
- Bağımlılıklarımızı yönetmek için kullandığımız Node.js'yi indirip yükleyin .
- Ya Bootstrap'in kaynaklarını indirin ya da Bootstrap deposunu çatallayın .
/bootstrapKök dizine gidin ve package.jsonnpm installiçinde listelenen yerel bağımlılıklarımızı yüklemek için çalıştırın .
Tamamlandığında, komut satırından sağlanan çeşitli komutları çalıştırabileceksiniz.
npm komut dosyalarını kullanma
Paketimiz.json , projeyi geliştirmek için çok sayıda görev içerir. npm runTerminalinizdeki tüm npm komut dosyalarını görmek için çalıştırın . Birincil görevler şunları içerir:
| Görev | Tanım |
|---|---|
npm start |
CSS ve JavaScript'i derler, belgeleri oluşturur ve yerel bir sunucu başlatır. |
npm run dist |
dist/Derlenmiş dosyalarla dizini oluşturur . Sass , Autoprefixer ve terser gerektirir . |
npm test |
Çalıştırdıktan sonra testleri yerel olarak çalıştırırnpm run dist |
npm run docs-serve |
Belgeleri yerel olarak oluşturur ve çalıştırır. |
küstah
Bootstrap, Sass kaynak dosyalarımızı CSS dosyalarına derlemek için Dart Sass'ı kullanır (oluşturma sürecimize dahildir) ve kendi varlık işlem hattınızı kullanarak Sass'ı derliyorsanız aynısını yapmanızı öneririz. Daha önce Bootstrap v4 için Node Sass'ı kullandık, ancak LibSass ve Node Sass dahil bunun üzerine inşa edilen paketler artık kullanımdan kaldırıldı .
Dart Sass, 10 yuvarlama hassasiyeti kullanır ve verimlilik nedeniyle bu değerin ayarlanmasına izin vermez. Bu hassasiyeti, örneğin küçültme sırasında olduğu gibi, oluşturulan CSS'nin sonraki işlemleri sırasında düşürmeyiz, ancak bunu yapmayı seçtiyseniz, tarayıcı yuvarlama ile ilgili sorunları önlemek için hassasiyeti en az 6 olarak korumanızı öneririz.
otomatik ön ek
Bootstrap, derleme sırasında bazı CSS özelliklerine satıcı öneklerini otomatik olarak eklemek için Autoprefixer'ı (yapı sürecimize dahildir) kullanır. Bunu yapmak, v3'te bulunanlar gibi satıcı karışımlarına olan ihtiyacı ortadan kaldırırken CSS'mizin önemli kısımlarını tek seferde yazmamıza izin vererek zamandan ve koddan tasarruf etmemizi sağlar.
Autoprefixer aracılığıyla desteklenen tarayıcıların listesini GitHub depomuzdaki ayrı bir dosyada tutuyoruz. Ayrıntılar için .browserslistrc'ye bakın .
RTLCSS
Bootstrap, derlenmiş CSS'yi işlemek ve bunları RTL'ye dönüştürmek için RTLCSS'yipadding-left kullanır – temel olarak yatay yöne duyarlı özellikleri (örn. ) zıtlarıyla değiştirir. CSS'imizi yalnızca bir defa yazmamıza ve RTLCSS kontrol ve değer yönergelerini kullanarak küçük değişiklikler yapmamıza izin verir.
Yerel belgeler
Belgelerimizi yerel olarak çalıştırmak, hugo-bin npm paketi aracılığıyla yüklenen Hugo'nun kullanılmasını gerektirir . Hugo, bize temel içerikler, Markdown tabanlı dosyalar, şablonlar ve daha fazlasını sağlayan son derece hızlı ve oldukça genişletilebilir bir statik site oluşturucudur. Nasıl başlayacağınız aşağıda açıklanmıştır:
- Tüm bağımlılıkları yüklemek için yukarıdaki araç kurulumunu çalıştırın .
- Kök dizinden komut satırında
/bootstrapçalıştırın .npm run docs-serve http://localhost:9001/Tarayıcınızda açın ve voilà.
Belgelerini okuyarak Hugo'yu kullanma hakkında daha fazla bilgi edinin .
Sorun giderme
Bağımlılıkları yüklemeyle ilgili sorunlarla karşılaşırsanız, önceki tüm bağımlılık sürümlerini (genel ve yerel) kaldırın. Ardından, yeniden çalıştırın npm install.