Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn iwe aṣẹ
in English

Ṣe alabapin

Ṣe iranlọwọ lati ṣe agbekalẹ Bootstrap pẹlu awọn iwe afọwọkọ ati awọn idanwo kikọ iwe wa.

Lori iwe yi

Eto irinṣẹ

Bootstrap nlo awọn iwe afọwọkọ npm lati kọ iwe ati ṣajọ awọn faili orisun. Package.json wa ni awọn iwe afọwọkọ wọnyi fun iṣakojọpọ koodu, ṣiṣe awọn idanwo, ati diẹ sii. Iwọnyi kii ṣe ipinnu fun lilo ni ita ibi ipamọ ati iwe.

Lati lo eto kikọ wa ati ṣiṣe awọn iwe aṣẹ wa ni agbegbe, iwọ yoo nilo ẹda kan ti awọn faili orisun Bootstrap ati Node. Tẹle awọn igbesẹ wọnyi ati pe o yẹ ki o ṣetan lati rọ:

  1. Ṣe igbasilẹ ati fi Node.js sori ẹrọ , eyiti a lo lati ṣakoso awọn igbẹkẹle wa.
  2. Boya ṣe igbasilẹ awọn orisun Bootstrap tabi ibi ipamọ Bootstrap orita .
  3. Lilö kiri si itọsọna root /bootstrapati ṣiṣe npm installlati fi sori ẹrọ awọn igbẹkẹle agbegbe wa ti a ṣe akojọ si ni package.json .

Nigbati o ba pari, iwọ yoo ni anfani lati ṣiṣe awọn oriṣiriṣi awọn aṣẹ ti a pese lati laini aṣẹ.

Lilo awọn iwe afọwọkọ npm

package.json wa pẹlu ọpọlọpọ awọn iṣẹ ṣiṣe fun idagbasoke iṣẹ naa. Ṣiṣe npm runlati wo gbogbo awọn iwe afọwọkọ npm ni ebute rẹ. Awọn iṣẹ akọkọ pẹlu:

Iṣẹ-ṣiṣe Apejuwe
npm start Ṣe akopọ CSS ati JavaScript, kọ iwe naa, o si bẹrẹ olupin agbegbe kan.
npm run dist Ṣẹda dist/liana pẹlu akojọpọ awọn faili. Nilo Sass , Autoprefixer , ati terser .
npm test Ṣiṣe awọn idanwo ni agbegbe lẹhin ṣiṣenpm run dist
npm run docs-serve Kọ ati ṣiṣe awọn iwe aṣẹ ni agbegbe.
Bẹrẹ pẹlu Bootstrap nipasẹ npm pẹlu iṣẹ ibẹrẹ wa! Ori si ibi ipamọ awoṣe twbs/bootstrap-npm-starter lati wo bi o ṣe le kọ ati ṣe akanṣe Bootstrap ninu iṣẹ akanṣe npm tirẹ. Pẹlu alakojo Sass, Autoprefixer, Stylelint, PurgeCSS, ati Awọn aami Bootstrap.

Sass

Bootstrap nlo Dart Sass fun iṣakojọpọ awọn faili orisun Sass wa sinu awọn faili CSS (ti o wa ninu ilana kikọ wa), ati pe a ṣeduro pe ki o ṣe kanna ti o ba n ṣajọ Sass ni lilo opo gigun ti epo dukia tirẹ. A ti lo Node Sass tẹlẹ fun Bootstrap v4, ṣugbọn LibSass ati awọn idii ti a ṣe si oke rẹ, pẹlu Node Sass, ti wa ni idaduro bayi .

Dart Sass nlo konge iyipo ti 10 ati fun awọn idi ṣiṣe ko gba laaye atunṣe iye yii. A ko sokale yi konge nigba siwaju processing ti wa ti ipilẹṣẹ CSS, gẹgẹ bi awọn nigba miniification, ṣugbọn ti o ba ti o yan lati ṣe bẹ a so mimu kan konge ti o kere 6 lati se awon oran pẹlu kiri kiri.

Asọtẹlẹ adaṣe

Bootstrap nlo Autoprefixer (ti o wa ninu ilana kikọ wa) lati ṣafikun awọn ami-iṣaaju ataja si diẹ ninu awọn ohun-ini CSS ni akoko kikọ. Ṣiṣe bẹ ṣafipamọ akoko ati koodu wa nipa gbigba wa laaye lati kọ awọn apakan pataki ti CSS wa ni akoko kan lakoko imukuro iwulo fun awọn apopọ ataja bii awọn ti a rii ni v3.

A ṣetọju atokọ ti awọn aṣawakiri ti o ni atilẹyin nipasẹ Autoprefixer ni faili lọtọ laarin ibi ipamọ GitHub wa. Wo .browserslistrc fun awọn alaye.

RTLCSS

Bootstrap nlo RTLCSS lati ṣe ilana CSS ti a ṣajọpọ ati yi wọn pada si RTL - ni ipilẹ rọpo awọn ohun-ini mọ itọnisọna petele (fun apẹẹrẹ padding-left) pẹlu idakeji wọn. O gba wa laaye lati kọ CSS wa ni akoko kan ati ṣe awọn tweaks kekere nipa lilo iṣakoso RTLCSS ati awọn itọsọna iye .

Awọn iwe aṣẹ agbegbe

Ṣiṣe awọn iwe aṣẹ wa ni agbegbe nilo lilo Hugo, eyiti o fi sii nipasẹ package hugo -bin npm. Hugo jẹ iyara gbigbona ati olupilẹṣẹ aaye aimi pupọ ti o pese wa: ipilẹ pẹlu, awọn faili ti o da lori Markdown, awọn awoṣe, ati diẹ sii. Eyi ni bii o ṣe le bẹrẹ:

  1. Ṣiṣe nipasẹ iṣeto irinṣẹ loke lati fi sori ẹrọ gbogbo awọn igbẹkẹle.
  2. Lati awọn root /bootstrapliana, ṣiṣe npm run docs-serveawọn ni awọn pipaṣẹ ila.
  3. Ṣii http://localhost:9001/ninu ẹrọ aṣawakiri rẹ, ati voil.

Kọ ẹkọ diẹ sii nipa lilo Hugo nipa kika iwe rẹ .

Laasigbotitusita

Ti o ba pade awọn iṣoro pẹlu fifi sori ẹrọ awọn igbẹkẹle, aifi si gbogbo awọn ẹya igbẹkẹle iṣaaju (agbaye ati agbegbe). Lẹhinna, tun ṣe npm install.