ਟੂਲ ਬਣਾਓ
ਸਾਡੇ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਬਣਾਉਣ, ਸਰੋਤ ਕੋਡ ਨੂੰ ਕੰਪਾਇਲ ਕਰਨ, ਟੈਸਟਾਂ ਨੂੰ ਚਲਾਉਣ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਕਰਨ ਲਈ ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਸ਼ਾਮਲ ਐਨਪੀਐਮ ਸਕ੍ਰਿਪਟਾਂ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ ਬਾਰੇ ਸਿੱਖੋ।
ਟੂਲਿੰਗ ਸੈੱਟਅੱਪ
ਬੂਟਸਟਰੈਪ ਆਪਣੇ ਬਿਲਡ ਸਿਸਟਮ ਲਈ npm ਸਕ੍ਰਿਪਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਸਾਡੇ package.json ਵਿੱਚ ਫਰੇਮਵਰਕ ਦੇ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਸੁਵਿਧਾਜਨਕ ਤਰੀਕੇ ਸ਼ਾਮਲ ਹਨ, ਜਿਸ ਵਿੱਚ ਕੋਡ ਕੰਪਾਇਲ ਕਰਨਾ, ਟੈਸਟਾਂ ਨੂੰ ਚਲਾਉਣਾ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਸ਼ਾਮਲ ਹੈ।
ਸਾਡੇ ਬਿਲਡ ਸਿਸਟਮ ਦੀ ਵਰਤੋਂ ਕਰਨ ਅਤੇ ਸਾਡੇ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਚਲਾਉਣ ਲਈ, ਤੁਹਾਨੂੰ ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਸਰੋਤ ਫਾਈਲਾਂ ਅਤੇ ਨੋਡ ਦੀ ਇੱਕ ਕਾਪੀ ਦੀ ਲੋੜ ਪਵੇਗੀ। ਇਹਨਾਂ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ ਅਤੇ ਤੁਹਾਨੂੰ ਰੌਕ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ:
- Node.js ਨੂੰ ਡਾਉਨਲੋਡ ਅਤੇ ਸਥਾਪਿਤ ਕਰੋ , ਜਿਸਦੀ ਵਰਤੋਂ ਅਸੀਂ ਆਪਣੀਆਂ ਨਿਰਭਰਤਾਵਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਲਈ ਕਰਦੇ ਹਾਂ।
- ਜਾਂ ਤਾਂ ਬੂਟਸਟਰੈਪ ਦੇ ਸਰੋਤਾਂ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰੋ ਜਾਂ ਬੂਟਸਟਰੈਪ ਦੀ ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਫੋਰਕ ਕਰੋ ।
- ਰੂਟ
/bootstrapਡਾਇਰੈਕਟਰੀ 'ਤੇ ਨੈਵੀਗੇਟ ਕਰੋ ਅਤੇ package.jsonnpm installਵਿੱਚ ਸੂਚੀਬੱਧ ਸਾਡੀਆਂ ਸਥਾਨਕ ਨਿਰਭਰਤਾਵਾਂ ਨੂੰ ਸਥਾਪਤ ਕਰਨ ਲਈ ਚਲਾਓ ।
ਪੂਰਾ ਹੋਣ 'ਤੇ, ਤੁਸੀਂ ਕਮਾਂਡ ਲਾਈਨ ਤੋਂ ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਵੱਖ-ਵੱਖ ਕਮਾਂਡਾਂ ਨੂੰ ਚਲਾਉਣ ਦੇ ਯੋਗ ਹੋਵੋਗੇ।
npm ਸਕ੍ਰਿਪਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ
ਸਾਡੇ package.json ਵਿੱਚ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਵਿਕਸਤ ਕਰਨ ਲਈ ਬਹੁਤ ਸਾਰੇ ਕੰਮ ਸ਼ਾਮਲ ਹਨ। npm runਆਪਣੇ ਟਰਮੀਨਲ ਵਿੱਚ ਸਾਰੀਆਂ npm ਸਕ੍ਰਿਪਟਾਂ ਨੂੰ ਦੇਖਣ ਲਈ ਚਲਾਓ । ਪ੍ਰਾਇਮਰੀ ਕੰਮਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:
| ਟਾਸਕ | ਵਰਣਨ |
|---|---|
npm start |
CSS ਅਤੇ JavaScript ਨੂੰ ਕੰਪਾਇਲ ਕਰਦਾ ਹੈ, ਦਸਤਾਵੇਜ਼ ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਇੱਕ ਸਥਾਨਕ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ। |
npm run dist |
dist/ਕੰਪਾਇਲ ਕੀਤੀਆਂ ਫਾਈਲਾਂ ਨਾਲ ਡਾਇਰੈਕਟਰੀ ਬਣਾਉਂਦਾ ਹੈ . Sass , Autoprefixer , ਅਤੇ terser ਦੀ ਲੋੜ ਹੈ । |
npm test |
ਚੱਲਣ ਤੋਂ ਬਾਅਦ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਟੈਸਟ ਚਲਾਉਂਦਾ ਹੈnpm run dist |
npm run docs-serve |
ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਬਣਾਉਂਦਾ ਅਤੇ ਚਲਾਉਂਦਾ ਹੈ। |
ਸੱਸ
ਬੂਟਸਟਰੈਪ ਸਾਡੀ Sass ਸਰੋਤ ਫਾਈਲਾਂ ਨੂੰ CSS ਫਾਈਲਾਂ (ਸਾਡੀ ਬਿਲਡ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਸ਼ਾਮਲ) ਵਿੱਚ ਕੰਪਾਇਲ ਕਰਨ ਲਈ ਡਾਰਟ ਸਾਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਅਤੇ ਅਸੀਂ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦੇ ਹਾਂ ਕਿ ਤੁਸੀਂ ਅਜਿਹਾ ਕਰੋ ਜੇਕਰ ਤੁਸੀਂ ਆਪਣੀ ਖੁਦ ਦੀ ਸੰਪਤੀ ਪਾਈਪਲਾਈਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ Sass ਨੂੰ ਕੰਪਾਇਲ ਕਰ ਰਹੇ ਹੋ। ਅਸੀਂ ਪਹਿਲਾਂ Bootstrap v4 ਲਈ Node Sass ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਸੀ, ਪਰ LibSass ਅਤੇ ਇਸ ਦੇ ਸਿਖਰ 'ਤੇ ਬਣੇ ਪੈਕੇਜ, ਨੋਡ ਸੱਸ ਸਮੇਤ, ਹੁਣ ਬਰਤਰਫ਼ ਕੀਤੇ ਗਏ ਹਨ ।
ਡਾਰਟ ਸਾਸ 10 ਦੀ ਇੱਕ ਰਾਊਂਡਿੰਗ ਸ਼ੁੱਧਤਾ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਅਤੇ ਕੁਸ਼ਲਤਾ ਕਾਰਨਾਂ ਕਰਕੇ ਇਸ ਮੁੱਲ ਦੇ ਸਮਾਯੋਜਨ ਦੀ ਆਗਿਆ ਨਹੀਂ ਦਿੰਦਾ ਹੈ। ਅਸੀਂ ਸਾਡੇ ਤਿਆਰ ਕੀਤੇ CSS ਦੀ ਅਗਲੀ ਪ੍ਰਕਿਰਿਆ ਦੇ ਦੌਰਾਨ ਇਸ ਸ਼ੁੱਧਤਾ ਨੂੰ ਘੱਟ ਨਹੀਂ ਕਰਦੇ, ਜਿਵੇਂ ਕਿ ਮਿਨੀਫਿਕੇਸ਼ਨ ਦੌਰਾਨ, ਪਰ ਜੇਕਰ ਤੁਸੀਂ ਅਜਿਹਾ ਕਰਨ ਦੀ ਚੋਣ ਕਰਦੇ ਹੋ, ਤਾਂ ਅਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਰਾਊਂਡਿੰਗ ਨਾਲ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਰੋਕਣ ਲਈ ਘੱਟੋ-ਘੱਟ 6 ਦੀ ਸ਼ੁੱਧਤਾ ਬਣਾਈ ਰੱਖਣ ਦੀ ਸਿਫ਼ਾਰਸ਼ ਕਰਦੇ ਹਾਂ।
ਆਟੋਪ੍ਰੀਫਿਕਸਰ
ਬੂਟਸਟਰੈਪ ਬਿਲਡ ਸਮੇਂ 'ਤੇ ਕੁਝ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚ ਵਿਕਰੇਤਾ ਪ੍ਰੀਫਿਕਸ ਨੂੰ ਆਪਣੇ ਆਪ ਜੋੜਨ ਲਈ ਆਟੋਪ੍ਰੀਫਿਕਸਰ (ਸਾਡੀ ਬਿਲਡ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਸ਼ਾਮਲ) ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਅਜਿਹਾ ਕਰਨ ਨਾਲ ਸਾਨੂੰ ਸਾਡੇ CSS ਦੇ ਮੁੱਖ ਭਾਗਾਂ ਨੂੰ ਇੱਕ ਵਾਰ ਲਿਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦੇ ਕੇ ਸਾਡੇ ਸਮੇਂ ਅਤੇ ਕੋਡ ਦੀ ਬਚਤ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਕਿ v3 ਵਿੱਚ ਪਾਏ ਗਏ ਵਿਕਰੇਤਾ ਮਿਸ਼ਰਣਾਂ ਦੀ ਲੋੜ ਨੂੰ ਖਤਮ ਕਰਦੇ ਹੋਏ।
ਅਸੀਂ ਸਾਡੀ GitHub ਰਿਪੋਜ਼ਟਰੀ ਦੇ ਅੰਦਰ ਇੱਕ ਵੱਖਰੀ ਫਾਈਲ ਵਿੱਚ ਆਟੋਪ੍ਰੀਫਿਕਸਰ ਦੁਆਰਾ ਸਮਰਥਿਤ ਬ੍ਰਾਉਜ਼ਰਾਂ ਦੀ ਸੂਚੀ ਬਣਾਈ ਰੱਖਦੇ ਹਾਂ। ਵੇਰਵਿਆਂ ਲਈ .browserslistrc ਵੇਖੋ ।
RTLCSS
ਬੂਟਸਟਰੈਪ ਕੰਪਾਇਲ ਕੀਤੇ CSS ਨੂੰ ਪ੍ਰੋਸੈਸ ਕਰਨ ਲਈ RTLCSS ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ RTL ਵਿੱਚ ਬਦਲਦਾ ਹੈ - ਅਸਲ ਵਿੱਚ ਹਰੀਜੱਟਲ ਦਿਸ਼ਾ ਜਾਗਰੂਕ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਉਦਾਹਰਨ ਲਈ padding-left) ਨੂੰ ਉਹਨਾਂ ਦੇ ਉਲਟ ਨਾਲ ਬਦਲਦਾ ਹੈ। ਇਹ ਸਾਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਵਾਰ ਸਾਡੇ CSS ਨੂੰ ਲਿਖਣ ਅਤੇ RTLCSS ਨਿਯੰਤਰਣ ਅਤੇ ਮੁੱਲ ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮਾਮੂਲੀ ਸੁਧਾਰ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
ਸਥਾਨਕ ਦਸਤਾਵੇਜ਼
ਸਾਡੇ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਚਲਾਉਣ ਲਈ ਹਿਊਗੋ ਦੀ ਵਰਤੋਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਜੋ ਕਿ ਹਿਊਗੋ -ਬਿਨ ਐਨਪੀਐਮ ਪੈਕੇਜ ਰਾਹੀਂ ਸਥਾਪਤ ਹੁੰਦਾ ਹੈ। ਹਿਊਗੋ ਇੱਕ ਬਹੁਤ ਤੇਜ਼ ਅਤੇ ਕਾਫ਼ੀ ਵਿਸਤ੍ਰਿਤ ਸਥਿਰ ਸਾਈਟ ਜਨਰੇਟਰ ਹੈ ਜੋ ਸਾਨੂੰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ: ਬੁਨਿਆਦੀ ਸ਼ਾਮਲ ਹਨ, ਮਾਰਕਡਾਊਨ-ਅਧਾਰਿਤ ਫਾਈਲਾਂ, ਟੈਂਪਲੇਟਸ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ। ਇਸਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਦਾ ਤਰੀਕਾ ਇੱਥੇ ਹੈ:
- ਸਾਰੀਆਂ ਨਿਰਭਰਤਾਵਾਂ ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਲਈ ਉੱਪਰ ਦਿੱਤੇ ਟੂਲਿੰਗ ਸੈੱਟਅੱਪ ਰਾਹੀਂ ਚਲਾਓ ।
- ਰੂਟ
/bootstrapਡਾਇਰੈਕਟਰੀ ਤੋਂ,npm run docs-serveਕਮਾਂਡ ਲਾਈਨ ਵਿੱਚ ਚਲਾਓ। - ਆਪਣੇ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ
http://localhost:9001/, ਅਤੇ voilà.
ਹਿਊਗੋ ਦੇ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਪੜ੍ਹ ਕੇ ਇਸ ਬਾਰੇ ਹੋਰ ਜਾਣੋ ।
ਸਮੱਸਿਆ ਨਿਪਟਾਰਾ
ਜੇਕਰ ਤੁਹਾਨੂੰ ਨਿਰਭਰਤਾ ਸਥਾਪਤ ਕਰਨ ਵਿੱਚ ਸਮੱਸਿਆਵਾਂ ਆਉਂਦੀਆਂ ਹਨ, ਤਾਂ ਸਾਰੇ ਪਿਛਲੇ ਨਿਰਭਰਤਾ ਸੰਸਕਰਣਾਂ (ਗਲੋਬਲ ਅਤੇ ਸਥਾਨਕ) ਨੂੰ ਅਣਇੰਸਟੌਲ ਕਰੋ। ਫਿਰ, ਦੁਬਾਰਾ ਚਲਾਓ npm install.