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 install iç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

package.json'umuz aşağıdaki komutları ve görevleri içerir :

Görev	Tanım
`npm run dist`	`npm run dist/dist/`derlenmiş dosyalarla dizini oluşturur . Sass , Autoprefixer ve terser kullanır .
`npm test`	Çalıştırdıktan sonra testleri yerel olarak çalıştırır`npm run dist`
`npm run docs-serve`	Belgeleri yerel olarak oluşturur ve çalıştırır.

npm runTüm npm komut dosyalarını görmek için çalıştırın .

Başlangıç projemizle npm üzerinden Bootstrap ile başlayın! Bootstrap'i kendi npm projenizde nasıl oluşturacağınızı ve özelleştireceğinizi görmek için twbs/bootstrap-npm-starter şablon deposuna gidin. Sass derleyicisi, Autoprefixer, Stylelint, PurgeCSS ve Bootstrap Simgelerini içerir.

küstah

Bootstrap v4, Sass kaynak dosyalarımızı CSS dosyalarına derlemek için Node Sass'ı kullanır (oluşturma sürecimize dahildir). Sass'ı kendi varlık ardışık düzeninizi kullanarak derlerken aynı oluşturulan CSS'yi elde etmek için, en azından Node Sass'ın yaptığı özellikleri destekleyen bir Sass derleyicisi kullanmanız gerekir. 26 Ekim 2020'den itibaren LibSass ve bunun üzerine inşa edilen paketler (Node Sass dahil) kullanımdan kaldırıldığı için bunu not etmek önemlidir .

Daha yeni Sass özelliklerine veya daha yeni CSS standartlarıyla uyumluluğa ihtiyacınız varsa, Dart Sass artık Sass'ın birincil uygulamasıdır ve Node Sass ile tam uyumlu bir JavaScript API'sini destekler (Dart Sass'ın GitHub sayfasında listelenen birkaç istisna dışında ).

Tarayıcı yuvarlamayla ilgili sorunları önlemek için Sass yuvarlama hassasiyetini 6'ya yükselttik (varsayılan olarak, Node Sass'ta 5'tir). Dart Sass kullanıyorsanız, bu derleyici 10 yuvarlama hassasiyeti kullandığından ve verimlilik nedenleriyle ayarlanmasına izin vermediğinden, bu ayarlamanız gereken bir şey olmayacaktır.

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 .

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.