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