ΠΠΆΠ΅Π½ΡΠ»ΡΠΌΠ΅Π½ΡΠΊΠΈΠΉ Π½Π°Π±ΠΎΡ Front-end ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°. ΠΡΠΈΡΡΠ½Π°Ρ ΡΠ±ΠΎΡΠΊΠ° frontend ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΠ»Π°Π³ΠΈΠ½Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ JavaScript
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Ρ Gulp ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΊΠΎΠΌΡΠΎΡΡΠ½ΠΎΠΉ ΡΡΠΎΠ½ΡΠ΅Π½Π΄ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠ°Π½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠΈΡΠΎΠ²Π°Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ² ΠΈ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π² ΠΎΡΠ½ΠΎΠ²Ρ ΠΊΠΎΡΠΎΡΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Bootstrap 4.
ΠΡΠΎΠ΅ΠΊΡ, ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌΡΠΉ Π² ΡΠ°ΠΌΠΊΠ°Ρ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π° Github ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ: https://github.com/itchief/gulp-project-bootstrap-4
ΠΠΈΠ΄Π΅ΠΎ ΠΊ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅:
ΠΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ Gulp ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠΌΠ΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ:
- "Node.js" (Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΡΠΈΠΊ "Node.js" Π΄Π»Ρ ΡΠ²ΠΎΠ΅ΠΉ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ c ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ ; Π΄Π»Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π²Π΅ΡΡΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Π½Π΅ Π½ΠΈΠΆΠ΅ 10 );
- "Gulp" (ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Gulp ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Ρ: npm install -g gulp-cli).
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΡΡΠ°ΠΏ β ΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° npm ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² ΠΈ ΠΈΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ (Π΄ΠΎΠ»ΠΆΠ½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π² ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°) Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Npm install
ΠΠ°Π½Π½Π°Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡ Π²ΡΠ΅ ΠΏΠ°ΠΊΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½Ρ ΠΊΠ°ΠΊ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ, ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π°. ΠΡΠΏΠΎΠ»Π½ΡΠ΅Ρ npm ΡΡΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡΠΌΠΈ, Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΠΌΠΈ Π² ΡΠ°ΠΉΠ»Π΅ "package.json".
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠ΅ΡΠ²ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ° (1.0.0), Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² Bower, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π΅ΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Bower install
ΠΠ°Π½Π½Π°Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡ ΡΡΠΎΠ½ΡΠ΅Π½Π΄ ΠΏΠ°ΠΊΠ΅ΡΡ, ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π² ΡΠ°ΠΉΠ»Π΅ "bower.json".
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Gulp ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΠ΅?
ΠΡΠΊΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΡΡ ΡΡΡΠΎΠΊΡ (ΠΏΡΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π° ΠΊΠΎΡΠ½Π΅Π²ΡΡ ΠΏΠ°ΠΏΠΊΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°) ΠΈ Π²Π²Π΅ΡΡΠΈ gulp (ΠΎΠ±ΡΡΠ½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌ):
ΠΠΎΡΠ»Π΅ Π²Π²ΠΎΠ΄Π° ΡΡΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π·Π°ΠΏΡΡΡΠΈΡΡΡ Π·Π°Π΄Π°ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Ρ.Π΅. "default". ΠΡΠ° Π·Π°Π΄Π°ΡΠ° Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ Π·Π°ΠΏΡΡΡΠΈΡ ΡΠ΅ΡΠΈΡ Π΄ΡΡΠ³ΠΈΡ Π·Π°Π΄Π°Ρ: "build", "webserver" ΠΈ "watch".
ΠΠ°Π΄Π°ΡΠ° "build" Π²ΡΠΏΠΎΠ»Π½ΠΈΡ ΡΠ±ΠΎΡΠΊΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π΄Π»Ρ ΠΏΡΠΎΠ΄Π°ΠΊΡΠ΅Π½Π° (Ρ.Π΅. ΠΎΠ½Π° Π·Π°ΠΏΡΡΡΠΈΡ "clean:build", "html:build", "css:build", "js:build", "fonts:build" ΠΈ "image:build"). ΠΡΠΈ Π·Π°Π΄Π°ΡΠΈ ΠΏΠΎΠΌΠ΅ΡΡΡΡ Π² ΠΏΠ°ΠΏΠΊΡ "assets/build" ΡΠ΅Π·ΡΠ»ΡΡΠΈΡΡΡΡΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
ΠΠ°Π΄Π°ΡΠ° "webserver" ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ΅ΡΠ²Π΅ΡΠ° Ρ Β«ΠΆΠΈΠ²ΠΎΠΉ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉΒ» ΡΡΡΠ°Π½ΠΈΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΏΡΠΎΠ΅ΠΊΡ ΠΈ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π΅Π³ΠΎ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
ΠΠ°Π΄Π°ΡΠ° "watch" ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² Π² ΠΏΠ°ΠΏΠΊΠ΅ "assets/src" ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΅ΡΠ»ΠΈ ΡΡΠΎ ΠΏΡΠΈΠ·ΠΎΡΠ»ΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π·Π°Π΄Π°Ρ. ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΎΠ½Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π·Π°Π΄Π°ΡΠΈ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠΈΡΡΡΡΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ (ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ°ΠΏΠΊΠΈ "assets/build") Π² Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ.
ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π²ΡΠ±ΠΎΡΠΎΡΠ½ΡΡ (ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΡΡ) ΡΠ±ΠΎΡΠΊΡ ΡΠΎΠΉ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ ΡΠΎΠ»ΡΠΊΠΎ CSS ΡΠ°ΡΡΠΈ ΡΠ°ΠΉΡΠ° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²Π²Π΅ΡΡΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Gulp css:build
Π‘ΠΏΠΈΡΠΎΠΊ Π΄ΡΡΠ³ΠΈΡ Π·Π°Π΄Π°Ρ:
Gulp clean:build // Π΄Π»Ρ ΠΎΡΠΈΡΡΠΊΠΈ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° "assets/build" gulp html:build // Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ HTML ΡΠ°ΠΉΠ»ΠΎΠ² gulp js:build // Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ JS ΡΠ°ΠΉΠ»ΠΎΠ² gulp fonts:build // Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ ΡΡΠΈΡΡΠΎΠ² gulp image:build // Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ Gulp ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ
Π ΡΡΠΎΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ ΡΠ°Π·Π±Π΅ΡΡΠΌ:
- ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΠΈ ΡΠ°ΠΉΠ»ΠΎΠ²ΡΡ ΡΡΡΡΠΊΡΡΡΡ Gulp ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ;
- ΠΊΠ°ΠΊ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΎΠ² Bootstrap ΠΊ ΠΏΡΠΎΠ΅ΠΊΡΡ ΠΈ ΠΈΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°;
- ΠΊΠ°ΠΊ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ (Ρ Π½ΡΠ»Ρ) Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Gulp ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ (Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π³ΠΎΡΠΎΠ²ΠΎΠ³ΠΎ package.json)
- ΠΊΠ°ΠΊ Ρ Π½ΡΠ»Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Bower ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ ΡΡΠΎΠ½ΡΠ΅Π½Π΄ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² (Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π³ΠΎΡΠΎΠ²ΠΎΠ³ΠΎ "bower.json")*;
- ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ°ΠΉΠ»Π° ΡΠ±ΠΎΡΡΠΈΠΊΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ° Gulp (gulpfile.js)
* ΠΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² Bower Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΠΏΡΠΎΠ΅ΠΊΡΠ΅, Π½Π°ΡΠΈΠ½Π°Ρ Ρ Π²Π΅ΡΡΠΈΠΈ 2.0.0.
Π‘ΠΏΠΈΡΠΎΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ²
ΠΠΊΡΡΠΆΠ΅Π½ΠΈΠ΅, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΠΎΠ΅ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΡΠΎΠ½ΡΠ΅Π½Π΄ ΠΏΡΠΎΠ΅ΠΊΡΠ° (ΡΠ°ΠΉΡΠ°), ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΎ Π½Π° Π±Π°Π·Π΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ²:
- Node.js (ΡΡΠ΅Π΄Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΠ΅);
- npm (ΠΏΠ°ΠΊΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠ°, Π²Ρ ΠΎΠ΄ΡΡΠ΅Π³ΠΎ Π² Node.js; Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Gulp, ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΈ ΡΡΠΎΠ½ΡΠ΅Π½Π΄ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ²);
- jQuery, Popover, Bootstrap (ΠΏΠ°ΠΊΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ css ΠΈ js ΡΠ°ΡΡΠ΅ΠΉ ΡΠ°ΠΉΡΠ°);
- Gulp ΠΈ Π΅Π³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Ρ (Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π΄ΡΡΠ³ΠΈΡ Π²Π΅Π± Π·Π°Π΄Π°Ρ).
Π ΠΏΠ΅ΡΠ²ΡΡ Π²Π΅ΡΡΠΈΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΡΡ ΠΏΠ°ΠΊΠ΅ΡΠ½ΡΠΉ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ Bower. ΠΠ½ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ»ΡΡ Π·Π° Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ jQuery, Popover ΠΈ Bootstrap. Π Π²Π΅ΡΡΠΈΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°, Π½Π°ΡΠΈΠ½Π°Ρ Ρ 2.0.0, Π·Π°Π³ΡΡΠ·ΠΊΠ° Π΄Π°Π½Π½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ npm.
Π€Π°ΠΉΠ»ΠΎΠ²Π°Ρ ΡΡΡΡΠΊΡΡΡΠ° Gulp ΠΏΡΠΎΠ΅ΠΊΡΠ°
Π€Π°ΠΉΠ»ΠΎΠ²ΡΡ ΡΡΡΡΠΊΡΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΠΊΠ°ΠΊ ΠΎΡ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΠΉ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°, ΡΠ°ΠΊ ΠΈ ΠΎΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠ½Π° ΡΠΎΠ·Π΄Π°ΡΡΡΡ.
Π Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Π±ΡΠ΄Π΅ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΡΡΠΊΡΡΡΡ:
Π ΠΊΠΎΡΠ½Π΅ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π° ΠΏΠ°ΠΏΠΊΠ° "assets" ΠΈ ΡΠ°ΠΉΠ»Ρ "gulpfile.js", "package.json". Π€Π°ΠΉΠ» "gulpfile.js" Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π·Π°Π΄Π°ΡΠΈ Π΄Π»Ρ ΡΠ±ΠΎΡΡΠΈΠΊΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ° Gulp.
Π ΠΏΠ΅ΡΠ²ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈΡΡ ΡΠ°ΠΉΠ»Ρ ".bowerrc" ΠΈ "bower.json". Π€Π°ΠΉΠ» "bower.json" - ΡΡΠΎ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΠ°ΠΉΠ» ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠ° Bower, Π½Π° ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ»ΠΈΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΠΎΠ½ΡΠ΅Π½Π΄ ΠΏΠ°ΠΊΠ΅ΡΡ. Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΡΡ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Bootstrap, jQuery ΠΈ Popper.
Π ΠΏΠ°ΠΏΠΊΠ΅ "assets" Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π΄Π²Π΅ ΠΏΠ°ΠΏΠΊΠΈ: "src" (Π΄Π»Ρ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ²) ΠΈ "build" (Π΄Π»Ρ Π³ΠΎΡΠΎΠ²ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ²; Π² ΡΡΡ ΠΏΠ°ΠΏΠΊΡ ΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡ ΡΠ±ΠΎΡΡΠΈΠΊ Gulp). Π ΠΏΠ°ΠΏΠΊΠ΅ "src" ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ΠΈ "fonts" (Π΄Π»Ρ ΡΡΠΈΡΡΠΎΠ²), "img" (Π΄Π»Ρ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ), "js" (Π΄Π»Ρ js-ΡΠ°ΠΉΠ»ΠΎΠ²), "style" (Π΄Π»Ρ ΡΡΠΈΠ»Π΅ΠΉ) ΠΈ "template" (Π΄Π»Ρ HTML ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ²) ΠΈ ΡΠ°ΠΉΠ» "index.html".
Π ΠΏΠ΅ΡΠ²ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π² ΠΏΠ°ΠΏΠΊΠ΅ "src" Π΅ΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΠ»Π°ΡΡ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ "bower_components". ΠΠ½Π° ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ°Π»Π°ΡΡ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΊΠΎΡΠΎΡΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΠ»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Bower. Π ΡΠ΅ΠΊΡΡΠ΅ΠΉ Π²Π΅ΡΡΠΈΠΈ Π΅Ρ Π½Π΅Ρ.
Π ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π΅ "js" ΡΠ°ΡΠΏΠΎΠ»ΠΎΠ³Π°ΡΡΡΡ Π΄Π²Π° ΡΠ°ΠΉΠ»Π°: "main.js" ΠΈ "my.js". Π€Π°ΠΉΠ» "my.js" ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠ²ΠΎΠΈΡ ΡΠΊΡΠΈΠΏΡΠΎΠ², Π° "main.js" β Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠ° ΡΠ°ΠΉΠ»ΠΎΠ², ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠΎΡΠΎΡΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π±ΡΠ΄Π΅Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ Π² ΠΈΡΠΎΠ³ΠΎΠ²ΡΠΉ js-ΡΠ°ΠΉΠ». ΠΠΎΠ΄ ΠΈΡΠΎΠ³ΠΎΠ²ΡΠΌ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΡΡ ΡΠ°ΠΉΠ», ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ»ΡΡΠΈΡΡΡΡ Π½Π° Π²ΡΡ ΠΎΠ΄Π΅ (Π² ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π΅ "build").
ΠΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ "style" ΠΎΡΠ²Π΅Π΄Π΅Π½Π° ΠΏΠΎΠ΄ ΡΡΠΈΠ»ΠΈ. Π Π΄Π°Π½Π½ΠΎΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ ΡΡΠΈ ΡΠ°ΠΉΠ»Π°: "main.scss" (ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠΏΠΈΡΠΎΠΊ ΡΠ°ΠΉΠ»ΠΎΠ², ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠΎΡΠΎΡΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ Π² ΠΈΡΠΎΠ³ΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ), "my.scss" (ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠ²ΠΎΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ) ΠΈ "variables.scss" (ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ SCSS ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΡΠΈΠ»ΠΈ Bootstrap 4, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ²ΠΎΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ).
Π€Π°ΠΉΠ» "index.html" - ΡΡΠΎ Π³Π»Π°Π²Π½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΡΠΎΠΌΠ΅ "index.html" Π² Π΄Π°Π½Π½ΡΡ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ html ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ "template" ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² Π½Π΅Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² HTML ΡΡΡΠ°Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² Π΄Π°Π½Π½ΠΎΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΠ»Ρ "head.html" ΠΈ "footer.html", ΠΈ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ (ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ //= ΠΏΡΡΡ_ΠΊ_ΡΠ°ΠΉΠ»Ρ) ΡΡΠ°Π·Ρ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ°Π½ΠΈΡ. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΡΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ html ΡΡΡΠ°Π½ΠΈΡΡ, Ρ.ΠΊ. ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡ ΡΠΆΠ΅ Π±ΡΠ΄ΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ°ΠΉΠ»Π°Ρ .
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΎΠ² Bootstrap 4 ΠΊ ΠΏΡΠΎΠ΅ΠΊΡΡ ΠΈ ΠΈΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Bootstrap 4 ΠΊ ΠΏΡΠΎΠ΅ΠΊΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ°Π±ΠΎΡΡ Ρ Π½ΠΈΠΌ.
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΠΊΠΎΠ΄ΠΎΠ². Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π΄Π΅ΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Bootstrap , Π½ΠΎ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ ΠΊ ΠΏΡΠΎΠ΅ΠΊΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π² Π½ΡΠΌ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ .
ΠΡΡ ΠΎΠ΄Π½ΡΠ΅ ΠΊΠΎΠ΄Ρ CSS ΡΡΠΈΠ»Π΅ΠΉ Bootstrap 4 Π½Π°ΠΏΠΈΡΠ°Π½Ρ Π½Π° ΡΠ·ΡΠΊΠ΅ SCSS ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ².
Π‘ΠΏΠΈΡΠΎΠΊ SCSS ΡΠ°ΠΉΠ»ΠΎΠ² (ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π² ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π΅ "node_modules/bootstrap/scss/"): "functions.scss", "variables.scss", "mixins.scss", "variables.scss", "print.scss", "reboot.scss", "type.scss", "images.scss", "code.scss", "grid.scss", "tables.scss", "forms.scss", "buttons.scss", "transitions.scss", "dropdown.scss" ΠΈ Π΄Ρ.
ΠΠ°ΠΆΠ΄ΠΎΠΉ ΡΠ°ΠΊΠΎΠΉ ΡΠ°ΠΉΠ» Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π»ΠΈΠ±ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ ΡΠ»ΡΠΆΠ΅Π±Π½ΡΡ Π·Π°Π΄Π°ΡΡ, Π»ΠΈΠ±ΠΎ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°. Π€Π°ΠΉΠ»Ρ SCSS ΠΈΠΌΠ΅ΡΡ ΠΊΡΠ°ΡΠΊΠΈΠ΅ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΡΠ΅ ΠΈΠΌΠ΅Π½Π°. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΎΡΠ½ΠΎ ΠΏΠΎΠ½ΡΡΡ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ .
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π΄Π΅ΡΠΎΠ»ΡΠ½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ Bootstrap 4 ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ SCSS . ΠΡΠ΅ SCSS ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π΄Π»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΡΠΎΠ±ΡΠ°Π½Ρ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ (Π² ΡΠ°ΠΉΠ»Π΅ "variables.scss"). ΠΠΎ, ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, Π½Π΅ Π² ΡΡΠΎΠΌ ΡΠ°ΠΉΠ»Π΅, Π° Π² ΡΠ²ΠΎΡΠΌ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠΌΠ΅ΡΡΠΈΠΌ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅ ΠΈΠΌΡ "variables.scss", Π½ΠΎ Π½Π°Ρ ΠΎΠ΄ΡΡΠ΅ΠΌΡΡ Π² "assets/style/variables.scss").
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΡΠ΅ΠΌ success ΠΈ danger , ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ $green ΠΈ $red:
// ΠΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π΄Π΅ΡΠΎΠ»ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Bootstrap 4 $red: #cc2eaa; $green: #2ecc71;
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ , ΡΡΠΎ ΠΏΠΎΡΠ»Π΅ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Bootstrap 4 Π² ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΠ» CSS ("assets/style/variables.scss"), Ρ Π½ΠΈΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ±ΡΠ°ΡΡ ΠΌΠ΅ΡΠΊΡ!default .
ΠΠ΅ΡΠΊΠ°!default ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ SCSS ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡΠ»ΠΈ ΠΆΠ΅ Ρ SCSS ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡΠΆΠ΅ Π΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠΎ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ Ρ ΠΊΠ»ΡΡΠΎΠΌ!default , ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ.
Π£ΠΊΠ°Π·Π°ΡΡ ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΠ΅ SCSS ΡΠ°ΠΉΠ»Ρ Bootstrap 4 Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡΠ°ΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΏΡΠΈ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ Π² CSS, Π° ΠΊΠ°ΠΊΠΈΠ΅ Π½Π΅Ρ, Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ SCSS ΡΠ°ΠΉΠ»Π° "assets/style/main.scss". ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΡΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° ΠΈ Π±ΡΠ΄Π΅ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΎΡ Π½Π°Π±ΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΡΠ»Π΅ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ ΠΊ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ, ΠΊ ΡΡΠΎΠΌΡ ΡΠ°ΠΉΠ»Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΡΠ½Ρ ΡΠ°ΠΉΠ»Ρ "assets/style/variables.scss" (Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Bootstrap) ΠΈ "assets/style/my.scss" (Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ²ΠΎΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ).
Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ°ΠΉΠ»Π° "main.scss" (ΠΏΡΠΈΠΌΠ΅Ρ):
// ΠΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π΄Π΅ΡΠΎΠ»ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Bootstrap 4 ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΈΡ @import "variables"; // ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π½ΡΠΆΠ½ΡΡ SCSS ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΎΠ² Bootstrap 4 @import "../../../node_modules/bootstrap/scss/_functions"; @import "../../../node_modules/bootstrap/scss/_variables"; @import "../../../node_modules/bootstrap/scss/_mixins"; @import "../../../node_modules/bootstrap/scss/_root"; @import "../../../node_modules/bootstrap/scss/_reboot"; @import "../../../node_modules/bootstrap/scss/_type"; @import "../../../node_modules/bootstrap/scss/_images"; @import "../../../node_modules/bootstrap/scss/_code"; @import "../../../node_modules/bootstrap/scss/_grid"; @import "../../../node_modules/bootstrap/scss/_tables"; @import "../../../node_modules/bootstrap/scss/_forms"; @import "../../../node_modules/bootstrap/scss/_buttons"; @import "../../../node_modules/bootstrap/scss/_transitions"; @import "../../../node_modules/bootstrap/scss/_dropdown"; @import "../../../node_modules/bootstrap/scss/_button-group"; @import "../../../node_modules/bootstrap/scss/_input-group"; @import "../../../node_modules/bootstrap/scss/_custom-forms"; @import "../../../node_modules/bootstrap/scss/_nav"; @import "../../../node_modules/bootstrap/scss/_navbar"; @import "../../../node_modules/bootstrap/scss/_card"; @import "../../../node_modules/bootstrap/scss/_breadcrumb"; @import "../../../node_modules/bootstrap/scss/_pagination"; @import "../../../node_modules/bootstrap/scss/_badge"; @import "../../../node_modules/bootstrap/scss/_jumbotron"; @import "../../../node_modules/bootstrap/scss/_alert"; @import "../../../node_modules/bootstrap/scss/_progress"; @import "../../../node_modules/bootstrap/scss/_media"; @import "../../../node_modules/bootstrap/scss/_list-group"; @import "../../../node_modules/bootstrap/scss/_close"; @import "../../../node_modules/bootstrap/scss/_toasts"; @import "../../../node_modules/bootstrap/scss/_modal"; @import "../../../node_modules/bootstrap/scss/_tooltip"; @import "../../../node_modules/bootstrap/scss/_popover"; @import "../../../node_modules/bootstrap/scss/_carousel"; @import "../../../node_modules/bootstrap/scss/_spinners"; @import "../../../node_modules/bootstrap/scss/_utilities"; @import "../../../node_modules/bootstrap/scss/_print"; // ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΈΡ SCSS ΡΠ°ΠΉΠ»ΠΎΠ² @import "my";
ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ, Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Bootstrap 4 Π½ΡΠΆΠ΅Π½ Π΅ΡΡ JavaScript ΠΊΠΎΠ΄.
Π‘ΠΏΠΈΡΠΎΠΊ js-ΡΠ°ΠΉΠ»ΠΎΠ² Bootstrap 4 (Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π΅ "node_modules/bootstrap/js/dist/"): "util.js", "alert.js", "button.js", "carousel.js", "collapse.js", "dropdown.js", "modal.js", "tooltip.js", "popover.js", "scrollspy.js", "tab.js" ΠΈ "toast.js".
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊΠΈΠ΅ js-ΡΠ°ΠΉΠ»Ρ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Bootstrap 4 Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ Π² ΠΈΡΠΎΠ³ΠΎΠ²ΡΠΉ js-ΡΠ°ΠΉΠ» ΠΏΡΠΎΠ΅ΠΊΡΠ°, Π° ΠΊΠ°ΠΊΠΈΠ΅ Π½Π΅Ρ, Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ "main.js".
ΠΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½ΡΠΆΠ½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² Π² ΡΠ΅Π·ΡΠ»ΡΡΠΈΡΡΡΡΠΈΠΉ build/main.js ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠΈ:
//= ΠΏΡΡΡ_ΠΊ_ΡΠ°ΠΉΠ»Ρ
ΠΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ Gulp ΠΏΠ»Π°Π³ΠΈΠ½ "gulp-rigger". ΠΠ°ΠΊ Π΅Π³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π±ΡΠ΄Π΅Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π½ΠΈΠΆΠ΅.
Π Π΄Π°Π½Π½ΡΠΉ ΡΠ°ΠΉΠ» ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ jQuery, Popper (Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Dropdown, Tooltip ΠΈ Popover) ΠΈ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΡΠ²ΠΎΠΈ js-ΡΠ°ΠΉΠ»Ρ.
Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ°ΠΉΠ»Π° "main.js" (ΠΏΡΠΈΠΌΠ΅Ρ):
// ΠΠΌΠΏΠΎΡΡΠΈΡΡΠ΅ΠΌ jQuery //= ../../../node_modules/jquery/dist/jquery.js // ΠΠΌΠΏΠΎΡΡΠΈΡΡΠ΅ΠΌ Popper //= ../../../node_modules/popper.js/dist/umd/popper.js // ΠΠΌΠΏΠΎΡΡΠΈΡΡΠ΅ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ js-ΡΠ°ΠΉΠ»Ρ Bootstrap 4 //= ../../../node_modules/bootstrap/js/dist/util.js //= ../../../node_modules/bootstrap/js/dist/alert.js //= ../../../node_modules/bootstrap/js/dist/button.js //= ../../../node_modules/bootstrap/js/dist/carousel.js //= ../../../node_modules/bootstrap/js/dist/collapse.js //= ../../../node_modules/bootstrap/js/dist/dropdown.js //= ../../../node_modules/bootstrap/js/dist/modal.js //= ../../../node_modules/bootstrap/js/dist/tooltip.js //= ../../../node_modules/bootstrap/js/dist/popover.js //= ../../../node_modules/bootstrap/js/dist/scrollspy.js //= ../../../node_modules/bootstrap/js/dist/tab.js //= ../../../node_modules/bootstrap/js/dist/toast.js // ΠΠΌΠΏΠΎΡΡΠΈΡΡΠ΅ΠΌ Π΄ΡΡΠ³ΠΈΠ΅ js-ΡΠ°ΠΉΠ»Ρ //= my.js
ΠΠ°ΠΊ Ρ Π½ΡΠ»Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Gulp ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ?
ΠΠ°ΡΠΈΠ½Π°Π΅ΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΎΠ±ΡΡΠ½ΠΎ Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΠ»Π° "package.json" (ΠΌΠ°Π½ΠΈΡΠ΅ΡΡΠ°).
Π€Π°ΠΉΠ» "package.json" Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΎΠ±ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ (Π½Π°Π·Π²Π°Π½ΠΈΠ΅, Π²Π΅ΡΡΠΈΡ, ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅, ΠΈΠΌΡ Π°Π²ΡΠΎΡΠ° ΠΈ Π΄Ρ.), Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π°Π½Π½ΡΠ΅ ΠΎ ΠΏΠ°ΠΊΠ΅ΡΠ°Ρ , ΠΎΡ ΠΊΠΎΡΠΎΡΡΡ ΡΡΠΎΡ ΠΏΡΠΎΠ΅ΠΊΡ Π·Π°Π²ΠΈΡΠΈΡ.
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°Π½ΠΈΡΠ΅ΡΡΠ°, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π² ΠΊΠΎΡΠ½Π΅Π²ΡΡ ΠΏΠ°ΠΏΠΊΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈ Π²Π²Π΅ΡΡΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Npm init
ΠΠΎΡΠ»Π΅ Π²Π²ΠΎΠ΄Π° ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΠ²Π΅ΡΠΈΡΡ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
- ΠΈΠΌΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° (name) β "bootstrap-4";
- Π½ΠΎΠΌΠ΅Ρ Π²Π΅ΡΡΠΈΠΈ (version) β "2.0.0";
- ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ (description) β "Start project with use Bootstrap 4";
- Π°Π²ΡΠΎΡ (author) β "ΡΠ°ΠΉΡ";
- git ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ (git repository) - "";
- ΡΠΎΡΠΊΠ° Π²Ρ ΠΎΠ΄Π° (entry point), ΡΠ΅ΡΡΠΎΠ²Π°Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π° (test command), Π»ΠΈΡΠ΅Π½Π·ΠΈΡ (license), ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° (keywords) β Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΠ° Π²ΠΎΠΏΡΠΎΡ Β«Is this ok?Β» ΠΎΡΠ²Π΅ΡΠΈΠΌ "yes" ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΡΠΌ Enter .
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π² ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΏΠΎΡΠ²ΠΈΡΡΡ ΡΠ°ΠΉΠ» "package.json".
Π’Π΅ΠΏΠ΅ΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ ΠΏΠ°ΠΊΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΏΡΠΎΠ΅ΠΊΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Npm install Π½Π°Π·Π²Π°Π½ΠΈΠ΅_ΠΏΠ°ΠΊΠ΅ΡΠ° --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΏΠ°ΠΊΠ΅ΡΠ°, ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π½ΡΠΌ, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΡΠ΅ΠΊΡΠΈΡ "devDependencies" ΡΠ°ΠΉΠ»Π° "package.json" npm install Π½Π°Π·Π²Π°Π½ΠΈΠ΅_ΠΏΠ°ΠΊΠ΅ΡΠ° --save-prod // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΏΠ°ΠΊΠ΅ΡΠ°, ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π½ΡΠΌ, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² ΡΠ΅ΠΊΡΠΈΡ "dependencies" ΡΠ°ΠΉΠ»Π° "package.json"
ΠΠ»ΡΡ "--save-dev" ΠΈΠ»ΠΈ "--save-prod" ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π² ΠΊΠ°ΠΊΡΡ ΡΠ΅ΠΊΡΠΈΡ ΡΠ°ΠΉΠ»Π° "package.json" ΠΏΠΎΠΏΠ°Π΄ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π½ΡΠΌ.
Π‘ΠΏΠΈΡΠΎΠΊ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π² ΠΏΡΠΎΠ΅ΠΊΡΠ΅:
Npm install gulp --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° gulp npm install browser-sync --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° browser-sync npm install gulp-autoprefixer --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° gulp-autoprefixer npm install gulp-cache --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° gulp-cache npm install gulp-clean-css --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° gulp-clean-css npm install gulp-rimraf --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° gulp-clean-css npm install gulp-imagemin --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° gulp-imagemin npm install gulp-plumber --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° gulp-plumber npm install gulp-rigger --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° gulp-rigger npm install gulp-sass --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° gulp-sass npm install gulp-sourcemaps --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° gulp-sourcemaps npm install gulp-uglify --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° gulp-uglify npm install imagemin-jpeg-recompress --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° imagemin-jpeg-recompress npm install imagemin-pngquant --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° imagemin-pngquant npm install gulp-rename --save-dev // ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° imagemin-pngquant npm install jquery --save-prod npm install popper.js --save-prod npm install bootstrap --save-prod
ΠΠΎΡΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π²ΡΠ΅Ρ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ, ΡΠ°ΠΉΠ» package.json Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅:
{ "name": "bootstrap-4", "version": "2.0..com/itchief/gulp-project-bootstrap-4.git" }, "dependencies": { "jquery": "^3.4.1", "popper.js": "^1.14.7", "bootstrap": "^4.3.1" }, "devDependencies": { "browser-sync": "^2.26.7", "gulp": "^4.0.2", "gulp-autoprefixer": "^6.1.0", "gulp-cache": "^1.1.2", "gulp-clean-css": "^4.2.0", "gulp-rimraf": "^0.2.2", "gulp-imagemin": "^6.0.0", "gulp-plumber": "^1.2.1", "gulp-rigger": "^0.5.8", "gulp-sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "gulp-uglify": "^3.0.2", "imagemin-jpeg-recompress": "^6.0.0", "imagemin-pngquant": "^8.0.0", "gulp-rename": "^1.4.0" } }
ΠΠ°ΠΊ Ρ Π½ΡΠ»Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Bower ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ ΡΡΠΎΠ½ΡΠ΅Π½Π΄ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ²?
ΠΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ ΠΏΠ°ΠΏΠΊΡ, Π² ΠΊΠΎΡΠΎΡΡΡ Bower Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΏΠ°ΠΊΠ΅ΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΠ°ΠΉΠ».bowerrc ΠΈ Π²Π²Π΅Π΄ΡΠΌ Π² Π½Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
{ "directory" : "assets/src/bower_components/" }
Π‘ΠΎΡ ΡΠ°Π½ΠΈΠΌ ΡΠ°ΠΉΠ».bowerrc . Π’Π΅ΠΏΠ΅ΡΡ Π²ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π±ΡΠ΄ΡΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Π² ΠΊΠ°ΡΠ°Π»ΠΎΠ³ bower_components , Π½Π°Ρ ΠΎΠ΄ΡΡΠΈΠΉΡΡ Π² assets/src/ .
ΠΡΠΏΠΎΠ»Π½ΠΈΠΌ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Bower (ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΠ°ΠΉΠ»-ΠΌΠ°Π½ΠΈΡΠ΅ΡΡ bower.json). Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΠ»Π° bower.json ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΡΠ΅ΡΡΠ²ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ (Π² ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ°):
Bower init
ΠΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Bower
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΠ²Π΅ΡΠΈΡΡ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
- ΠΈΠΌΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° (name) β bootstrap-4;
- ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ (description) β Start project on Bootstrap 4 - ΡΠ°ΠΉΡ;
- Π°Π²ΡΠΎΡ (author) β ΡΠ°ΠΉΡ;
- ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΊΠ°ΠΊ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ (set currently installed components as dependencies) β Y (ΠΠ°);
- Ρ ΠΎΡΠΈΡΠ΅ Π²Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ ΡΡΠΎΡ ΠΏΠ°ΠΊΠ΅Ρ ΠΊΠ°ΠΊ ΠΏΡΠΈΠ²Π°ΡΠ½ΡΠΉ, ΡΡΠΎ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡ Π΅Π³ΠΎ ΡΠ»ΡΡΠ°ΠΉΠ½ΡΡ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ Π² ΡΠ΅Π΅ΡΡΡΠ΅ Bower (would you like to mark this package as private which prevents it from being accidentally published to the registry) β Y (ΠΠ°);
- Π½Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ ΠΎΡΡΠ°Π²ΠΈΠΌ ΠΎΡΠ²Π΅ΡΡ, ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΡΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΎΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ;
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΡΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ ΡΠ°ΠΉΠ» bower.json .
ΠΠ°Π³ΡΡΠ·ΠΈΠΌ Bootstrap 4 ΠΈ ΠΏΠ°ΠΊΠ΅ΡΡ ΠΎΡ ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ½ Π·Π°Π²ΠΈΡΠΈΡ (Popper ΠΈ jQuery) Π² Π½Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Bower.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²Π²Π΅ΡΡΠΈ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Bower install bootstrap#v4.0.0-beta --save
ΠΠ»ΡΡ -save Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΠΏΠ°ΠΊΠ΅ΡΠ΅ Π·Π°ΠΏΠΈΡΠ°ΡΡ Π² ΡΠ΅ΠΊΡΠΈΡ dependencies ΡΠ°ΠΉΠ»Π° bower.json .
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ bower.json Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅:
{ "name": "bootstrap-4", "description": "Start project on Bootstrap 4 - ΡΠ°ΠΉΡ", "authors": [ "ΡΠ°ΠΉΡ" ], "license": "ISC", "keywords": , "homepage": "", "ignore": [ "**/.*", "node_modules", "bower_components", "assets/src/bower_components/", "test", "tests" ], "dependencies": { "jquery": "^3.2.1", "bootstrap": "^v4.0.0-beta" } }
ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Bower (bower.json) Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ bower init ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΏΠ°ΠΊΠ΅ΡΡ Π²ΡΡΡΠ½ΡΡ, ΡΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΠ» bower.json (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°ΠΉΠ»ΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠ°) ΠΈ Π²ΡΡΠ°Π²ΠΈΡΡ Π² Π½Π΅Π³ΠΎ Π²ΡΡΠ΅ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΠ»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ Π² ΠΏΡΠΎΠ΅ΠΊΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²Π²Π΅ΡΡΠΈ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Bower install
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠ°ΠΉΠ»Π° ΡΠ±ΠΎΡΡΠΈΠΊΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ° Gulp (gulpfile.js)
ΠΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π½ΡΠ΅ Π΄ΠΎ ΡΡΠΎΠ³ΠΎ, Π±ΡΠ»ΠΈ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ. ΠΠ΅ΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π», ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΠΎΠ΅ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΠ΅, Π±ΡΠ΄Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΡΠ°ΠΉΠ»ΠΎΠΌ "gulpfile.js".
Π€Π°ΠΉΠ» "gulpfile.js" ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠΏΠΈΡΠΎΠΊ Π·Π°Π΄Π°Ρ.
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ Π·Π°Π΄Π°ΡΠΈ ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΡΠΎΡ ΡΠ°ΠΉΠ»:
- ΡΠ±ΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΡΡΠΈΠ»Π΅ΠΉ Π² ΠΎΠ΄ΠΈΠ½, ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΡ ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ SCSS Π² CSS, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π²ΡΠΎΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ², ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·Π°ΡΠΈΡ CSS ΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ source map;
- ΠΈΠΌΠΏΠΎΡΡ Π²ΡΠ΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ js-ΡΠ°ΠΉΠ»ΠΎΠ² Π² ΠΎΠ΄ΠΈΠ½, ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° ΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ source map;
- ΡΠ±ΠΎΡ html ΡΠ°ΠΉΠ»Π°, ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΡΠΈΡΡΠΎΠ², ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° (ΡΠΆΠ°ΡΠΈΠ΅) ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ Browser Sync.
ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΡΠΈ Π·Π°Π΄Π°ΡΠΈ Π½Π΅ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² Π²ΡΡΡΠ½ΡΡ, ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π΅ΡΡ ΠΎΠ΄Π½Ρ Π·Π°Π΄Π°ΡΡ "watch". ΠΠ½Π° Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ², ΠΈ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠ΅ Π·Π°Π΄Π°ΡΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ.
ΠΠΎΠ΄ ΡΠ°ΠΉΠ»Π° "gulpfile.js" (ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Gulp 4):
"use strict"; /* ΠΏΡΡΠΈ ΠΊ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΡΠ°ΠΉΠ»Π°ΠΌ (src), ΠΊ Π³ΠΎΡΠΎΠ²ΡΠΌ ΡΠ°ΠΉΠ»Π°ΠΌ (build), Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊ ΡΠ΅ΠΌ, Π·Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ ΠΊΠΎΡΠΎΡΡΡ Π½ΡΠΆΠ½ΠΎ Π½Π°Π±Π»ΡΠ΄Π°ΡΡ (watch) */ var path = { build: { html: "assets/build/", js: "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", fonts: "assets/build/fonts/" }, src: { html: "assets/src/*.html", js: "assets/src/js/main.js", style: "assets/src/style/main.scss", img: "assets/src/img/**/*.*", fonts: "assets/src/fonts/**/*.*" }, watch: { html: "assets/src/**/*.html", js: "assets/src/js/**/*.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", fonts: "assets/srs/fonts/**/*.*" }, clean: "./assets/build/*" }; /* Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ΅ΡΠ²Π΅ΡΠ° */ var config = { server: { baseDir: "./assets/build" }, notify: false }; /* ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ gulp ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ */ var gulp = require("gulp"), // ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Gulp webserver = require("browser-sync"), // ΡΠ΅ΡΠ²Π΅Ρ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡ plumber = require("gulp-plumber"), // ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ rigger = require("gulp-rigger"), // ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ ΠΈΠΌΠΏΠΎΡΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° Π² Π΄ΡΡΠ³ΠΎΠΉ sourcemaps = require("gulp-sourcemaps"), // ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ ΠΊΠ°ΡΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² sass = require("gulp-sass"), // ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ SASS (SCSS) Π² CSS autoprefixer = require("gulp-autoprefixer"), // ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π°Π²ΡΠΎΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ² cleanCSS = require("gulp-clean-css"), // ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ CSS uglify = require("gulp-uglify"), // ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ JavaScript cache = require("gulp-cache"), // ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ ΠΊΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ imagemin = require("gulp-imagemin"), // ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠΆΠ°ΡΠΈΡ PNG, JPEG, GIF ΠΈ SVG ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ jpegrecompress = require("imagemin-jpeg-recompress"), // ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠΆΠ°ΡΠΈΡ jpeg pngquant = require("imagemin-pngquant"), // ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠΆΠ°ΡΠΈΡ png rimraf = require("gulp-rimraf"), // ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ΠΎΠ² rename = require("gulp-rename"); /* Π·Π°Π΄Π°ΡΠΈ */ // Π·Π°ΠΏΡΡΠΊ ΡΠ΅ΡΠ²Π΅ΡΠ° gulp.task("webserver", function () { webserver(config); }); // ΡΠ±ΠΎΡ html gulp.task("html:build", function () { return gulp.src(path.src.html) // Π²ΡΠ±ΠΎΡ Π²ΡΠ΅Ρ html ΡΠ°ΠΉΠ»ΠΎΠ² ΠΏΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡ ΠΏΡΡΠΈ.pipe(plumber()) // ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠΈΠ±ΠΎΠΊ.pipe(rigger()) // ΠΈΠΌΠΏΠΎΡΡ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠΉ.pipe(gulp.dest(path.build.html)) // Π²ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π½ΠΈΠ΅ Π³ΠΎΡΠΎΠ²ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ².pipe(webserver.reload({ stream: true })); // ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΠ΅ΡΠ²Π΅ΡΠ° }); // ΡΠ±ΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ gulp.task("css:build", function () { return gulp.src(path.src.style) // ΠΏΠΎΠ»ΡΡΠΈΠΌ main.scss .pipe(plumber()) // Π΄Π»Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ.pipe(sourcemaps.init()) // ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΠΌ sourcemap .pipe(sass()) // scss -> css .pipe(autoprefixer()) // Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΡΠ΅ΡΠΈΠΊΡΡ.pipe(gulp.dest(path.build.css)) .pipe(rename({ suffix: ".min" })) .pipe(cleanCSS()) // ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡΡΠ΅ΠΌ CSS .pipe(sourcemaps.write("./")) // Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΠΌ sourcemap .pipe(gulp.dest(path.build.css)) // Π²ΡΠ³ΡΡΠΆΠ°Π΅ΠΌ Π² build .pipe(webserver.reload({ stream: true })); // ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΠΌ ΡΠ΅ΡΠ²Π΅Ρ }); // ΡΠ±ΠΎΡ js gulp.task("js:build", function () { return gulp.src(path.src.js) // ΠΏΠΎΠ»ΡΡΠΈΠΌ ΡΠ°ΠΉΠ» main.js .pipe(plumber()) // Π΄Π»Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ.pipe(rigger()) // ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅ΠΌ Π²ΡΠ΅ ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ Π² main.js .pipe(gulp.dest(path.build.js)) .pipe(rename({ suffix: ".min" })) .pipe(sourcemaps.init()) //ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΠΌ sourcemap .pipe(uglify()) // ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡΡΠ΅ΠΌ js .pipe(sourcemaps.write("./")) // Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΠΌ sourcemap .pipe(gulp.dest(path.build.js)) // ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ Π³ΠΎΡΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ».pipe(webserver.reload({ stream: true })); // ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΠΌ ΡΠ΅ΡΠ²Π΅Ρ }); // ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΡΠΈΡΡΠΎΠ² gulp.task("fonts:build", function () { return gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)); }); // ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ gulp.task("image:build", function () { return gulp.src(path.src.img) // ΠΏΡΡΡ Ρ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠ°ΠΌΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ.pipe(cache(imagemin([ // ΡΠΆΠ°ΡΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ imagemin.gifsicle({ interlaced: true }), jpegrecompress({ progressive: true, max: 90, min: 80 }), pngquant(), imagemin.svgo({ plugins: [{ removeViewBox: false }] }) ]))) .pipe(gulp.dest(path.build.img)); // Π²ΡΠ³ΡΡΠ·ΠΊΠ° Π³ΠΎΡΠΎΠ²ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² }); // ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° build gulp.task("clean:build", function () { return gulp.src(path.clean, { read: false }) .pipe(rimraf()); }); // ΠΎΡΠΈΡΡΠΊΠ° ΠΊΡΡΠ° gulp.task("cache:clear", function () { cache.clearAll(); }); // ΡΠ±ΠΎΡΠΊΠ° gulp.task("build", gulp.series("clean:build", gulp.parallel("html:build", "css:build", "js:build", "fonts:build", "image:build"))); // Π·Π°ΠΏΡΡΠΊ Π·Π°Π΄Π°Ρ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°ΠΉΠ»ΠΎΠ² gulp.task("watch", function () { gulp.watch(path.watch.html, gulp.series("html:build")); gulp.watch(path.watch.css, gulp.series("css:build")); gulp.watch(path.watch.js, gulp.series("js:build")); gulp.watch(path.watch.img, gulp.series("image:build")); gulp.watch(path.watch.fonts, gulp.series("fonts:build")); }); // Π·Π°Π΄Π°ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ gulp.task("default", gulp.series("build", gulp.parallel("webserver","watch")));
ΠΠΎΠ΄ ΡΠ°ΠΉΠ»Π° "gulpfile.js" ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π½ΠΈΡ ΠΏΠΎΡΡΠ½ΡΠ΅ΡΡΡ ΡΡΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΠΎΡ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΉ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ Π² Gulp Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ:
// ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ gulp Π·Π°Π΄Π°ΡΠΈ (nametask β Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ) gulp.task("nametask", function() { // Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π·Π°Π΄Π°ΡΠ°... });
ΠΠ°Π΄Π°ΡΠΈ Π² gulp ΠΏΠΎΡΡΡΠΎΠ΅Π½Ρ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ. ΠΡ ΠΊΠ°ΡΠΊΠ°Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΡΠ°ΠΊ:
- ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ²;
- ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ gulp ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²;
- ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ (ΡΠ°ΠΉΠ»Ρ) Π² ΠΊΠ°ΡΠ°Π»ΠΎΠ³ "build".
ΠΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Gulp 3, ΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ°ΠΉΠ»Π° "gulpfile.js" Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ:
"use strict"; /* ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π΄Π»Ρ gulp-autoprefixer */ var autoprefixerList = [ "Chrome >= 45", "Firefox ESR", "Edge >= 12", "Explorer >= 10", "iOS >= 9", "Safari >= 9", "Android >= 4.4", "Opera >= 30" ]; /* ΠΏΡΡΠΈ ΠΊ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΡΠ°ΠΉΠ»Π°ΠΌ (src), ΠΊ Π³ΠΎΡΠΎΠ²ΡΠΌ ΡΠ°ΠΉΠ»Π°ΠΌ (build), Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊ ΡΠ΅ΠΌ, Π·Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ ΠΊΠΎΡΠΎΡΡΡ Π½ΡΠΆΠ½ΠΎ Π½Π°Π±Π»ΡΠ΄Π°ΡΡ (watch) */ var path = { build: { html: "assets/build/", js: "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", fonts: "assets/build/fonts/" }, src: { html: "assets/src/*.html", js: "assets/src/js/main.js", style: "assets/src/style/main.scss", img: "assets/src/img/**/*.*", fonts: "assets/src/fonts/**/*.*" }, watch: { html: "assets/src/**/*.html", js: "assets/src/js/**/*.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", fonts: "assets/srs/fonts/**/*.*" }, clean: "./assets/build/*" }; /* Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ΅ΡΠ²Π΅ΡΠ° */ var config = { server: { baseDir: "./assets/build" }, notify: false }; /* ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ gulp ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ */ var gulp = require("gulp"), // ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Gulp webserver = require("browser-sync"), // ΡΠ΅ΡΠ²Π΅Ρ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡ plumber = require("gulp-plumber"), // ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ rigger = require("gulp-rigger"), // ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ ΠΈΠΌΠΏΠΎΡΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° Π² Π΄ΡΡΠ³ΠΎΠΉ sourcemaps = require("gulp-sourcemaps"), // ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ ΠΊΠ°ΡΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² sass = require("gulp-sass"), // ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ SASS (SCSS) Π² CSS autoprefixer = require("gulp-autoprefixer"), // ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π°Π²ΡΠΎΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ² cleanCSS = require("gulp-clean-css"), // ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ CSS uglify = require("gulp-uglify"), // ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ JavaScript cache = require("gulp-cache"), // ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ ΠΊΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ imagemin = require("gulp-imagemin"), // ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠΆΠ°ΡΠΈΡ PNG, JPEG, GIF ΠΈ SVG ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ jpegrecompress = require("imagemin-jpeg-recompress"), // ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠΆΠ°ΡΠΈΡ jpeg pngquant = require("imagemin-pngquant"), // ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠΆΠ°ΡΠΈΡ png rimraf = require("gulp-rimraf"), // ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ΠΎΠ² rename = require("gulp-rename"); /* Π·Π°Π΄Π°ΡΠΈ */ // Π·Π°ΠΏΡΡΠΊ ΡΠ΅ΡΠ²Π΅ΡΠ° gulp.task("webserver", function () { webserver(config); }); // ΡΠ±ΠΎΡ html gulp.task("html:build", function () { return gulp.src(path.src.html) // Π²ΡΠ±ΠΎΡ Π²ΡΠ΅Ρ html ΡΠ°ΠΉΠ»ΠΎΠ² ΠΏΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡ ΠΏΡΡΠΈ.pipe(plumber()) // ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠΈΠ±ΠΎΠΊ.pipe(rigger()) // ΠΈΠΌΠΏΠΎΡΡ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠΉ.pipe(gulp.dest(path.build.html)) // Π²ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π½ΠΈΠ΅ Π³ΠΎΡΠΎΠ²ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ².pipe(webserver.reload({ stream: true })); // ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΠ΅ΡΠ²Π΅ΡΠ° }); // ΡΠ±ΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ gulp.task("css:build", function () { return gulp.src(path.src.style) // ΠΏΠΎΠ»ΡΡΠΈΠΌ main.scss .pipe(plumber()) // Π΄Π»Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ.pipe(sourcemaps.init()) // ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΠΌ sourcemap .pipe(sass()) // scss -> css .pipe(autoprefixer({ // Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΡΠ΅ΡΠΈΠΊΡΡ browsers: autoprefixerList })) .pipe(gulp.dest(path.build.css)) .pipe(rename({ suffix: ".min" })) .pipe(cleanCSS()) // ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡΡΠ΅ΠΌ CSS .pipe(sourcemaps.write("./")) // Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΠΌ sourcemap .pipe(gulp.dest(path.build.css)) // Π²ΡΠ³ΡΡΠΆΠ°Π΅ΠΌ Π² build .pipe(webserver.reload({ stream: true })); // ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΠΌ ΡΠ΅ΡΠ²Π΅Ρ }); // ΡΠ±ΠΎΡ js gulp.task("js:build", function () { return gulp.src(path.src.js) // ΠΏΠΎΠ»ΡΡΠΈΠΌ ΡΠ°ΠΉΠ» main.js .pipe(plumber()) // Π΄Π»Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ.pipe(rigger()) // ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠ΅ΠΌ Π²ΡΠ΅ ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ Π² main.js .pipe(gulp.dest(path.build.js)) .pipe(rename({ suffix: ".min" })) .pipe(sourcemaps.init()) //ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΠΌ sourcemap .pipe(uglify()) // ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡΡΠ΅ΠΌ js .pipe(sourcemaps.write("./")) // Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΠΌ sourcemap .pipe(gulp.dest(path.build.js)) // ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ Π³ΠΎΡΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ».pipe(webserver.reload({ stream: true })); // ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΠΌ ΡΠ΅ΡΠ²Π΅Ρ }); // ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΡΠΈΡΡΠΎΠ² gulp.task("fonts:build", function () { return gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)); }); // ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ gulp.task("image:build", function () { return gulp.src(path.src.img) // ΠΏΡΡΡ Ρ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠ°ΠΌΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ.pipe(cache(imagemin([ // ΡΠΆΠ°ΡΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ imagemin.gifsicle({ interlaced: true }), jpegrecompress({ progressive: true, max: 90, min: 80 }), pngquant(), imagemin.svgo({ plugins: [{ removeViewBox: false }] }) ]))) .pipe(gulp.dest(path.build.img)); // Π²ΡΠ³ΡΡΠ·ΠΊΠ° Π³ΠΎΡΠΎΠ²ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² }); // ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° build gulp.task("clean:build", function () { return gulp.src(path.clean, { read: false }) .pipe(rimraf()); }); // ΠΎΡΠΈΡΡΠΊΠ° ΠΊΡΡΠ° gulp.task("cache:clear", function () { cache.clearAll(); }); // ΡΠ±ΠΎΡΠΊΠ° gulp.task("build", [ "clean:build", "html:build", "css:build", "js:build", "fonts:build", "image:build" ]); // Π·Π°ΠΏΡΡΠΊ Π·Π°Π΄Π°Ρ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°ΠΉΠ»ΠΎΠ² gulp.task("watch", function () { gulp.watch(path.watch.html, ["html:build"]); gulp.watch(path.watch.css, ["css:build"]); gulp.watch(path.watch.js, ["js:build"]); gulp.watch(path.watch.img, ["image:build"]); gulp.watch(path.watch.fonts, ["fonts:build"]); }); // Π·Π°Π΄Π°ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ gulp.task("default", [ "build", "webserver", "watch" ]);
ΡΠ΅Π½ΡΡΠ±ΡΡ 24 , 2016
ΠΡΠ΄ΡΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Ρ ΡΠ°ΠΊΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ: ΡΠ°Π±ΠΎΡΠ° ΡΠΎ ΡΡΠΈΠ»ΡΠΌΠΈ sass Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ sourcemaps, ΡΠΊΠ»Π΅ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠΆΠ°ΡΠΈΠ΅ js-ΡΠ°ΠΉΠ»ΠΎΠ², ΡΠ±ΠΎΡΠΊΠ° requirejs Ρ ΠΏΠΎΠΌΠΎΡΡΡ rjs, ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΈΠ½Π³ html, ΠΎΡΠΈΡΡΠΊΠ° ΠΈ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΠ»ΠΎΠ², ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΠ΄Π½ΡΡΠΈΠ΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ΅ΡΠ²Π΅ΡΠ° ΠΈ ΡΠ΅ΠΆΠΈΠΌ Π½Π°Π±Π»ΡΠ΄Π΅Π½ΠΈΡ - watch-ΡΠ°ΡΠΊΠΈ.
ΠΠΎΠ±ΡΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°ΡΡ Π² ΡΡΠ°ΡΡΡ, Π±ΡΠ΄Π΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ³ΠΎ!
P.S. ΠΠ°ΡΠ΅ΡΠΈΠ°Π»Π° ΠΌΠ½ΠΎΠ³ΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠ°ΡΡΡ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·Π±ΠΈΡΠ° Π½Π° 3 ΡΠ°ΡΡΠΈ: ΠΎΡΠ½ΠΎΠ²Ρ ΡΠ±ΠΎΡΠΊΠΈ ΠΈ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°, Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠ΅ΡΡΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° Backbone + Require.js ΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ±ΠΎΡΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ gulp.
ΠΠ°ΡΠ΅ΠΌ Π½ΡΠΆΠ½Π° ΡΠ±ΠΎΡΠΊΠ° ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π°.
ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ Π²Π°ΠΆΠ½ΡΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΠΎΠ² Π² ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ - ΡΡΠΎ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΠΎΡΡΡ. Π Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° ΠΏΡΠΎΠ΅ΠΊΡΠ° Π½Π° ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ , Π² ΠΈΠ΄Π΅Π°Π»Π΅ ΡΠ»Π°Π±ΠΎΡΠ²ΡΠ·Π°Π½Π½ΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΠΎΠΉ ΠΊΡΡΠΎΡΠΊΠΎΠ²-ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ. ΠΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ javascript-ΠΊΠΎΠ΄Π°. ΠΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΈ ΠΊ ΡΡΠΈΠ»ΡΠΌ, ΠΈ html-ΡΠ°Π±Π»ΠΎΠ½Π°ΠΌ, ΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°ΠΌ.
ΠΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΡΡΡΠΊΡΡΡΠ° ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π½Π°ΠΏΠΈΡΠ°Π½Π½ΠΎΠ³ΠΎ Π½Π° Backbone + Require.
Π ΡΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ΅ΡΡΠΎΠ²ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ, Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΎΡΠ½ΠΈ ΠΈ ΡΡΡΡΡΠΈ. ΠΠ°ΡΡΠ°Π²Π»ΡΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄Π΅Π»Π°ΡΡ ΡΠΎΡΠ½ΠΈ http-Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΏΠΎ ΠΌΠ΅Π½ΡΡΠ΅ΠΉ ΠΌΠ΅ΡΠ΅ Π½Π΅Π³ΡΠΌΠ°Π½Π½ΠΎ. ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π±ΡΡΡΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ Π½Π°ΠΏΠΈΡΠ°Π½Π½ΠΎΠ³ΠΎ Π½Π°ΠΌΠΈ ΡΠ΅ΡΠ²ΠΈΡΠ°. ΠΠΎΡΡΠΎΠΌΡ ΠΎΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΌΡΡ Π²Π°ΠΆΠ½ΡΡ Π·Π°Π΄Π°Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠ±ΠΎΡΠΊΠΈ - ΡΡΠΎ ΠΌΠΈΠ½ΠΈΡΠΈΠΊΠ°ΡΠΈΡ, ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π½Π° ΠΏΡΠΎΠ΅ΠΊΡΠ΅ ΡΠ°ΠΉΠ»ΠΎΠ², ΡΠΊΠ»Π΅ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΡ Π² Π±Π°Π½Π΄Π»Ρ. ΠΠ° Π²ΡΡ ΠΎΠ΄Π΅ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΠ°ΡΠΊΡΡ ΡΡΡΡΠΊΡΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΠΎΡ ΡΠ°ΠΊΡΡ:
Π Π°Π·Π½ΠΈΡΠ° Ρ ΠΎΡΠΎΡΠΎ Π·Π°ΠΌΠ΅ΡΠ½Π°: Π²ΠΌΠ΅ΡΡΠΎ Π΄Π΅ΡΡΡΠΊΠΎΠ² ΡΠ°ΠΉΠ»ΠΎΠ² ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ ΠΎΠ΄ΠΈΠ½ index.html, ΠΎΠ΄ΠΈΠ½ css-ΡΠ°ΠΉΠ», ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈ ΡΠΆΠ°ΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅, Ρ ΠΎΡΡ Π½Π° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅ ΡΡΠΎΠ³ΠΎ ΠΈ Π½Π΅ Π²ΠΈΠ΄Π½ΠΎ:-)
Π ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅: Π² ΠΏΠ°ΠΏΠΊΠ΅ js ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ Π²ΡΠ΅Π³ΠΎ 3 ΡΠΆΠ°ΡΡΡ
ΡΠ°ΠΉΠ»Π°.
P.S. ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΈ, Π° Π½Π΅ ΠΎΠ΄ΠΈΠ½, ΡΠ°ΡΡΠΊΠ°ΠΆΡ ΠΏΠΎΠ·ΠΆΠ΅.
ΠΠ°ΠΌΠ΅ΡΡ, ΡΡΠΎ ΡΡΠΎ ΡΠ΅Π°Π»ΡΠ½Π°Ρ ΡΡΡΡΠΊΡΡΡΠ° ΡΠ΅ΡΡΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ Π²ΡΠΊΠΎΡΠ΅ Π½Π°ΠΏΠΈΡΠ΅ΠΌ.
Π― ΠΎΠΏΠΈΡΠ°Π» Π»ΠΈΡΡ ΠΎΠ΄Π½Ρ ΠΏΡΠΈΡΠΈΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΡΠ±ΠΎΡΠΊΠΈ, Π½ΠΎ ΠΎΠ½Π° ΡΠΆΠ΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½Π°, ΡΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ gulp, grunt, webpack ΠΈΠ»ΠΈ ΡΡΠΎ-ΡΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ Π² ΡΠ²ΠΎΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ . ΠΡΠΈΡΠ΅ΠΌ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΏΠΈΡΠ΅ΠΌ Π»ΠΈ ΠΌΡ Π³ΡΠΎΠΌΠ°Π΄Π½ΡΠΉ ΡΠ΅ΡΠ²ΠΈΡ, Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ SPA (ΠΊΠ°ΠΊ Π² Π½Π°ΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅) ΠΈΠ»ΠΈ landing page. ΠΡΠΈΠ½ΡΠΈΠΏΡ ΡΠ±ΠΎΡΠΊΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² ΠΈ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΡΡ Π»ΠΈΡΡ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·ΠΈΠ΅ΠΌ Π·Π°Π΄Π°Ρ ΠΈ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠ² ΠΊ ΠΈΡ ΡΠ΅ΡΠ΅Π½ΠΈΡ. Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΠ°ΠΊΡΡ ΡΡΡΡΠΊΡΡΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠΊΠΎΠ»Ρ ΡΠ³ΠΎΠ΄Π½ΠΎ ΡΠ°ΡΡΠΈΡΠΈΡΡΡΡ Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ, Π½ΠΎ Π½Π° Π²ΡΡ ΠΎΠ΄Π΅ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ Π°ΠΊΠΊΡΡΠ°ΡΠ½Π°Ρ ΡΡΠΎΠΏΠΊΠ° ΡΠ°ΠΉΠ»ΠΎΠ², Π³ΠΎΡΠΎΠ²Π°Ρ ΠΊ Π²ΡΠ»ΠΈΠ²ΠΊΠ΅ Π½Π° Π²Π°Ρ ΠΏΡΠΎΠ΄Π°ΠΊΡΠ΅Π½ - Π±ΠΎΠ΅Π²ΠΎΠΉ ΡΠ°ΠΉΡ.
ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΠ΅ΠΊΡ.
ΠΡΠΈΠ½ΡΠΈΠΏ ΡΠ°ΠΊΠΎΠΉ: Π΅ΡΡΡ ΡΠ°Π·Π΄Π΅Π» Ρ Π΄Π΅Π²Π΅Π»ΠΎΠΏΠ΅ΡΡΠΊΠΈΠΌΠΈ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ, Π΅ΡΡΡ Ρ ΡΠΎΠ±ΡΠ°Π½Π½ΡΠΌΠΈ ΠΈ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅, ΡΡΠΎ ΡΡΠΎ Π΄ΠΎΠ±ΡΠΎ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π΅Ρ. Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π² ΠΊΠΎΡΠ½Π΅ ΠΏΡΠΎΠ΅ΠΊΡΠ° 2 ΠΏΠ°ΠΏΠΊΠΈ: src ΠΈ build. Π src ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π² src ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠ°Π±ΠΎΡΠ°ΡΡ, ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΠ°ΠΉΠ»Ρ, ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ ΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ ΡΠ°Π·Π²Π»Π΅ΠΊΠ°ΡΡΡΡ. ΠΠ° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅ Π²ΡΡΠ΅, ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΏΠ°ΡΠ° Π΄Π΅ΡΡΡΠΊΠΎΠ² ΡΠ°ΠΉΠ»ΠΎΠ², ΠΡ Π²ΠΈΠ΄Π΅Π»ΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ°ΠΏΠΊΠΈ src Π½Π°ΡΠ΅Π³ΠΎ ΡΠ΅ΡΡΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°. Π ΡΡΡΡ Π½ΠΈΠΆΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ build. ΠΠ½Π° ΡΠΎΡΠΌΠΈΡΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ, ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠ±ΠΎΡΠΊΠΈ, Π½ΠΈΡΠ΅Π³ΠΎ ΡΠ°ΠΌΠΈΠΌ ΡΠ°ΠΌ ΠΏΡΠ°Π²ΠΈΡΡ Π½Π΅ Π½ΡΠΆΠ½ΠΎ. ΠΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΏΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΠ±ΠΎΡΠΊΠ΅ Π΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π·Π°ΡΠΈΡΠ°Π΅ΡΡΡ Π½ΠΎΠ²ΡΠΌΠΈ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ (Π° Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ development ΠΏΠ°ΠΏΠΊΠΈ build Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅Ρ - ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ, Π΄Π°Π±Ρ Π½Π΅ ΠΌΠΎΠ·ΠΎΠ»ΠΈΡΡ Π³Π»Π°Π·Π°)
ΠΡΠΎΠΌΠ΅ src ΠΈ build Π² ΠΊΠΎΡΠ½Π΅ Π±ΡΠ΄ΡΡ Π»Π΅ΠΆΠ°ΡΡ ΡΠ°ΠΉΠ»Ρ package.json, gulpfile.js, ΠΏΠ°ΠΏΠΊΠ° node_modules ΠΈ ΠΎΠΏΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ, .gitignore (Π΅ΡΠ»ΠΈ ΠΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ Π³ΠΈΡΠΎΠΌ). Π£ ΠΌΠ΅Π½Ρ Π΅ΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅ΡΠΈΡΡ ΠΏΠ°ΠΏΠΊΡ logs - ΡΡΠΎ ΠΏΠΎΡΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ apache ΠΈ Π΄Π°Π²Π½ΡΡ ΠΏΡΠΈΠ²ΡΡΠΊΠ° Π΄Π΅ΡΠΆΠ°ΡΡ Π»ΠΎΠ³ΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π² Π΅Π³ΠΎ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΈΡΠΊΠ»ΡΡΠΈΠ² Π΅Π΅ ΠΈΠ· ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ Π³ΠΈΡΠ°:-)
ΠΠΎΡ ΡΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΡΡΠΊΡΡΡΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ° ΡΠ΅Π»ΠΈΠΊΠΎΠΌ:
ΠΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ build, Π΄ΡΠΌΠ°Ρ, Π²ΠΎΠΏΡΠΎΡΠΎΠ² Π½Π΅Ρ, ΠΏΠΎ src ΠΏΠΎΡΡΠ½Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅:
- 1. html - index.html, ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΠΈΠ½Π΄Π΅ΠΊΡΠ½ΡΠΉ ΡΠ°ΠΉΠ» ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠΎΡΠ΅ΠΌΡ Π½Π΅ ΡΡΠ°Π·Ρ Π² ΠΊΠΎΡΠ½Π΅ src? ΠΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΡΡΡ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡΡΡ gulp-ΠΎΠΌ. ΠΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠ·Π½Π°Π΅ΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΆΠ΅, ΠΊΠΎΠ³Π΄Π° Π²ΠΏΠ»ΠΎΡΠ½ΡΡ Π·Π°ΠΉΠΌΠ΅ΠΌΡΡ ΡΠ±ΠΎΡΠΊΠΎΠΉ.
- 2. img - ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π΅ ΡΠΆΠ°ΡΡΠ΅, ΠΎΠ±ΡΡΠ½ΡΠ΅
- 3. js - Π²ΡΡ javascript-Π΄Π²ΠΈΠΆΡΡ Π° ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Backbone
- 4. lib - ΡΡΠΎΡΠΎΠ½Π½ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, Π²ΡΠΎΠ΄Π΅ backbone.js, require.js, lodash.js ΠΈ ΠΏΡΠΎΡΠΈΡ
- 5. scripts - js-ΡΠΊΡΠΈΠΏΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡ Π½Π° Π±ΠΎΠ΅Π²ΠΎΠΌ ΡΠ°ΠΉΡΠ΅, Π½ΠΎ Π½Π΅ Π½ΡΠΆΠ½Ρ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. ΠΠΌΠ΅ΡΡΡΡ Π² Π²ΠΈΠ΄Ρ ΠΊΠΎΠ΄Ρ Π΄Π»Ρ Π°Π½Π°Π»ΠΈΡΠΈΠΊΠΈ, ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΏΡΠΎΡΠΈΡ ΠΌΠ°ΡΠΊΠ΅ΡΠΈΠ½Π³ΠΎΠ²ΡΡ ΡΡΡΠΊ.
- 6. styles - sass-ΡΠ°ΠΉΠ»Ρ ΡΠΎ ΡΡΠΈΠ»ΡΠΌΠΈ. Π ΡΡΡ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΡ Π±ΡΠ΄Π΅Ρ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ ΡΠΎΠ±ΡΠ°Π½Π½ΡΠΉ css-ΡΠ°ΠΉΠ» (ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ΅ΠΆΠΈΠΌΠ° Π΄Π΅Π²Π΅Π»ΠΎΠΏΠΌΠ΅Π½ΡΠ°)
- 7. tpl - html-ΡΠ°Π±Π»ΠΎΠ½Ρ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡΠΌΠΈ Backbone Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Π° require.js text
ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΡΠ΅ΡΡΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π½Π΅ΠΊΠ°Π·ΠΈΡΡΡΠΉ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½Π°Ρ Ρ
ΡΠ΅Π½Ρ Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΏΠ°ΡΠΎΠΉ ΡΡΡΠΎΠΊ html ΠΈ css-ΠΊΠΎΠ΄Π° Π±Π΅Π· Π΅Π΄ΠΈΠ½ΠΎΠ³ΠΎ js-ΡΠ°ΠΉΠ»Π°.
ΠΠΎ ΠΌΡ ΠΏΡΠ΅ΡΠ»Π΅Π΄ΡΠ΅ΠΌ ΡΠ΅Π»Ρ Π½Π΅ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ,
Π° ΡΠΎΠ·Π΄Π°ΡΡ Π½Π°Π΄Π΅ΠΆΠ½ΡΡ ΡΡΡΡΠΊΡΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π°ΡΠΏΠ΅ΠΊΡΠΎΠ² ΡΠ±ΠΎΡΠΊΠΈ.
ΠΠΎΠ³Π΄Π° ΠΏΡΠΎΠ΅ΠΊΡ ΡΠ°Π·ΡΠ°ΡΡΠ΅ΡΡΡ Π΄ΠΎ ΡΠΎΡΠ½ΠΈ ΡΠ°ΠΉΠ»ΠΎΠ², ΠΌΡ ΡΠΆΠ΅ Π±ΡΠ΄Π΅ΠΌ Π³ΠΎΡΠΎΠ²Ρ ΠΊ ΡΡΠΎΠΉ Π½Π°ΠΏΠ°ΡΡΠΈ ΠΈ Π»Π΅Π³ΠΊΠΎ ΡΠΏΡΠ°Π²ΠΈΠΌΡΡ Ρ Π²ΠΎΠ·ΡΠΎΡΡΠΈΠΌΠΈ ΠΎΠ±ΡΠ΅ΠΌΠ°ΠΌΠΈ.
ΠΠΎΡΡΠΎΠΌΡ Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΠΌΠ°Π»ΠΎΡΡΡ ΠΈ Π²Π½Π΅ΡΠ½ΡΡ ΡΠ±ΠΎΠ³ΠΎΡΡΡ ΡΠ΅ΡΡΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΌΡ ΡΠ·Π½Π°Π΅ΠΌ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ ΡΠ±ΠΎΡΠΊΠΈ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ
ΠΈ ΡΠ»ΠΎΠΆΠ½ΡΡ
ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ².
ΠΠ°ΠΊΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ ΡΠ±ΠΎΡΠΊΠΈ ΠΌΡ ΡΠ΅ΡΠΈΠΌ.
ΠΠ°ΠΏΠΎΠΌΠ½Ρ, ΡΡΠΎ ΠΌΡ Π΄ΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈΡΡ ΠΎ Π΄Π²ΡΡ ΡΠ΅ΠΆΠΈΠΌΠ°Ρ ΡΠ±ΠΎΡΠΊΠΈ: development ΠΈ production. ΠΡΠ΅ Π½Π°ΡΠΈ Π·Π°Π΄Π°ΡΠΈ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΏΠΈΡΠ°ΡΡ, ΠΏΠΎΠΌΠ½Ρ ΠΎΠ± ΡΡΠΈΡ Π΄Π²ΡΡ ΡΠ΅ΠΆΠΈΠΌΠ°Ρ . ΠΠ΅ Π²ΡΠ΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ Π½Π°ΠΌ Π½ΡΠΆΠ½Ρ Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ, ΠΈ Π½Π΅ Π²ΡΠ΅ Π² ΡΠ±ΠΎΡΠΊΠ΅ Π΄Π»Ρ ΠΏΡΠΎΠ΄Π°ΠΊΡΠ΅Π½Π°.
ΠΠΎΡ ΡΠΏΠΈΡΠΎΠΊ ΡΠΎΠ³ΠΎ, ΡΠ΅ΠΌ ΠΌΡ Π·Π°ΠΉΠΌΠ΅ΠΌΡΡ ΠΏΠΎΡΠ»Π΅ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠ΅ΡΡΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ:
- 1. ΠΡΠΈΡΡΠΊΠ° ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈ ΠΏΠ°ΠΏΠΎΠΊ ΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΡΠ±ΠΎΡΠΊΠΈ
- 2. Π‘Π±ΠΎΡΠΊΠ° css ΠΈΠ· sass-ΡΠ°ΠΉΠ»ΠΎΠ², ΡΠΎ ΡΠΆΠ°ΡΠΈΠ΅ΠΌ ΠΈ Π±Π΅Π·
- 3. ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ sourcemaps ΠΊ ΡΡΠΈΠ»ΡΠΌ, Π·Π°ΠΎΠ΄Π½ΠΎ ΠΏΠΎΠΊΠ°ΠΆΡ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅, Π·Π°ΡΠ΅ΠΌ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ
- 4. Π‘Π±ΠΎΡΠΊΠ° js-Π±Π°Π½Π΄Π»Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ requirejs
- 5. Π‘ΠΊΠ»Π΅ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠΆΠ°ΡΠΈΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ js-ΡΠ°ΠΉΠ»ΠΎΠ² (Π°Π½Π°Π»ΠΈΡΠΈΠΊΠΈ)
- 6. ΠΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΈΠ½Π³ html
- 7. ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΠΈ ΡΠΆΠ°ΡΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
- 8. ΠΠΎΠ΄Π½ΡΡΠΈΠ΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ΅ΡΠ²Π΅ΡΠ°
- 9. ΠΠ°Π΄Π°ΡΠΈ Π½Π°Π±Π»ΡΠ΄Π΅Π½ΠΈΡ Π·Π° ΡΠ°ΠΉΠ»Π°ΠΌΠΈ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ Π΄Π΅Π²Π΅Π»ΠΎΠΏΠΌΠ΅Π½ΡΠ° - watch-ΡΠ°ΡΠΊΠΈ
- 10. Π‘Π±ΠΎΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ Π·Π°Π΄Π°Ρ Π² ΠΊΡΡΡ - ΠΈΡΠΎΠ³ΠΎΠ²ΡΠ΅ ΡΠ°ΡΠΊΠΈ Π΄Π»Ρ production-ΡΠ±ΠΎΡΠΊΠΈ ΠΈ development-ΡΠ°Π±ΠΎΡΡ
ΠΡΠ°ΠΊ, ΠΌΡ ΠΏΠΎΡΠ°ΡΡΡΠΆΠ΄Π°Π»ΠΈ, Π·Π°ΡΠ΅ΠΌ Π²ΠΎΠΎΠ±ΡΠ΅ Π½ΡΠΆΠ½Π° ΡΠ±ΠΎΡΠΊΠ° ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π°, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ»ΠΈΡΡ ΡΠΎ ΡΡΡΡΠΊΡΡΡΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΠΈ, ΡΡΠΎ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΎΡ ΡΠ±ΠΎΡΠΊΠΈ ΠΈ Π² ΠΎΠ±ΡΠΈΡ ΡΠ΅ΡΡΠ°Ρ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ ΠΏΡΠΎ ΡΠ΅ΡΡΠΎΠ²ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΠ°ΡΡΠΈ ΠΌΡ Π·Π°ΠΉΠΌΠ΅ΠΌΡΡ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΡΡΠ΅Π½ΡΠΊΠΎΠ³ΠΎ Backbone-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΡΠ²ΡΠ·ΠΊΠ΅ Ρ Require.js. ΠΡΠ»ΠΈ ΠΡ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ Backbone ΠΈ/ΠΈΠ»ΠΈ Require.js, ΡΠΎ Π½ΠΈΡΠ΅Π³ΠΎ ΡΡΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π½Π΅Ρ. Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ Backbone-ΠΎΠ²ΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΌΠ°Π»ΠΎ. ΠΡ Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΌΠ΅ΡΡΠΎ Π½Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΈΠΌΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ Π½Π° javascript/jquery ΠΈ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ ΡΠ°Π·Π΄Π΅Π» Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ requirejs.
ΠΠ°Π½Π½ΡΠΉ ΠΌΠ°Π½ΡΠ°Π» ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ front-end ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ². ΠΡ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ ΠΏΡΠΎΡΠ΅ΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡ ΡΠ°Π±ΠΎΡΡ Ρ Π½ΠΈΠΌΠΈ.
NPM
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
Π ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΡΠ°ΡΡΠΎ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΡΠΎΡΠΎΠ½Π½ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΡΡ ΠΏΠΎΠΈΡΠΊ Π½ΡΠΆΠ½ΠΎΠΉ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ, ΡΠΊΠ°ΡΠΈΠ²Π°ΡΡ, ΡΠ°ΡΠΏΠ°ΠΊΠΎΠ²ΡΠ²Π°ΡΡ Π°ΡΡ ΠΈΠ² ΠΈ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΉΠ»Ρ Π² ΠΏΡΠΎΠ΅ΠΊΡ. ΠΠ°ΠΊΠ΅ΡΠ½ΡΠ΅ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΡ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π΄Π°Π½Π½ΡΡ ΡΡΡΠΈΠ½Π½ΡΡ ΡΠ°Π±ΠΎΡΡ.
ΠΠ°ΠΊΠ΅ΡΠ½ΡΠΉ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ β ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ΅Π΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΏΡΠΎΡΠ΅ΡΡΠΎΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ, ΡΠ΄Π°Π»Π΅Π½ΠΈΡ, Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ².
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠ°ΠΊΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠ° Π·Π°ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΠ°ΡΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ Π² ΡΠ΅ΡΠΌΠΈΠ½Π°Π»Π΅.
ΠΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΏΠ°ΠΊΠ΅ΡΠ½ΡΡ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π²ΠΎ frontend-ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ NPM.
npm (Node.js Package Manager) - ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ², Π²Ρ ΠΎΠ΄ΡΡΠΈΠΉ Π² ΡΠΎΡΡΠ°Π² Node.js. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² ΠΈΠ· ΠΎΠ±Π»Π°ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΡΠ²Π΅ΡΠ° npm, Π»ΠΈΠ±ΠΎ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² Π½Π° ΡΡΠΎΡ ΡΠ΅ΡΠ²Π΅Ρ.
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΡ
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ
ΠΠ»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ npm Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°ΡΠ°ΡΡ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ NodeJS (npm Π±ΡΠ΄Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½): https://nodejs.org/en/.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΏΠ°ΠΊΠ΅ΡΠΎΠ²
ΠΠ°ΠΊΠ΅ΡΠΎΠΌ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ JavaScript-ΡΠ°ΠΉΠ»ΠΎΠ², ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠΈΡ ΡΠΎΠ±ΠΎΠΉ ΠΊΠ°ΠΊΡΡ-ΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΈΠ»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ. ΠΠ»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠ°ΠΊΠ΅ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ npm Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Npm install <Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅ΡΠ°>
ΠΠ»Ρ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠ°ΠΊΠ΅ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ»ΡΡ -g. ΠΠΎΡΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠ°ΠΊΠ΅Ρ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠ°ΠΌΠΈ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ node_modules/.
ΠΡΠΎΠ²Π΅ΡΠΊΠ° Π²Π΅ΡΡΠΈΠΈ
Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΠ΅ΠΊΡΡΡΡ Π²Π΅ΡΡΠΈΡ npm, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΡΠ°ΠΉΠ»Π° ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ
Π€Π°ΠΉΠ» package.json ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π² ΡΠ΅Π±Π΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ: Π½Π°Π·Π²Π°Π½ΠΈΠ΅, Π²Π΅ΡΡΠΈΡ, Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΈ ΡΠΎΠΌΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅. ΠΡΠ±Π°Ρ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Π΅ΡΡΡ ΡΡΠΎΡ ΡΠ°ΠΉΠ», ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ Node.js-ΠΏΠ°ΠΊΠ΅Ρ.
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΠ»Π° package.json Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Npm init
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ΅.
Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ Π±ΡΠ΄ΡΡ Ρ ΡΠ°Π½ΠΈΡΡΡΡ Π½Π°ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΡ ΠΈ Π²Π΅ΡΡΠΈΠΈ Π²ΡΠ΅Ρ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ² Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ Π² ΠΏΡΠΎΠ΅ΠΊΡΠ΅. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ npm install ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π³ΡΡΠ·ΠΈΡΡ Π²ΡΠ΅ ΠΏΠ°ΠΊΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² package.json .
ΠΠ»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΠ°ΠΊΠ΅ΡΠ° ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ΠΌ Π² ΡΠ°ΠΉΠ»Π΅ package.json ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π°:
Npm install<Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅ΡΠ°> --save-dev
ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ
Yarn
ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²Π΅Π±-ΡΠ΅ΡΠ²Π΅ΡΠ° ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΏΡΠΈ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠΈ ΠΊΠΎΠ΄Π°, ΡΠ»Π΅ΠΆΠ΅Π½ΠΈΠ΅ Π·Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ Π² ΡΠ°ΠΉΠ»Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ JavaScript, CSS ΠΈ HTML ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΠΎΠ² (CoffeeScript, Less, Sass, Stylus, Jade ΠΈ Ρ.Π΄.).
- ΠΠΈΠ½ΠΈΡΠΈΠΊΠ°ΡΠΈΡ CSS ΠΈ JS ΠΊΠΎΠ΄Π°, Π° ΡΠ°ΠΊΠΆΠ΅, ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΠΈ ΠΊΠΎΠ½ΠΊΠ°ΡΠ΅Π½Π°ΡΠΈΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΏΡΠΎΠ΅ΠΊΡΠ° Π² ΠΎΠ΄ΠΈΠ½.
- ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²Π΅Π½Π΄ΠΎΡΠ½ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ² (ΠΏΡΠΈΡΡΠ°Π²ΠΎΠΊ ΠΊ Π½Π°Π·Π²Π°Π½ΠΈΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π΄Π»Ρ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²) Π΄Π»Ρ CSS.
- Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ ΠΈ ΠΏΠ°ΠΏΠΊΠ°ΠΌΠΈ Π² ΡΠ°ΠΌΠΊΠ°Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° β ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅, ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅, ΠΏΠ΅ΡΠ΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅.
- ΠΠ°ΠΏΡΡΠΊ ΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π²Π½Π΅ΡΠ½ΠΈΡ
ΠΊΠΎΠΌΠ°Π½Π΄ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ.
Π Π°Π±ΠΎΡΠ° Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ β ΡΠΆΠ°ΡΠΈΠ΅, ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ², ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² (png, jpg, svg ΠΈ Π΄Ρ.). - ΠΠ΅ΠΏΠ»ΠΎΠΉ (ΠΎΡΠΏΡΠ°Π²ΠΊΠ° Π½Π° Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΠ΅ΡΠ²Π΅Ρ) ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΏΠΎ FTP, SFTP ΠΈ Ρ. Π΄.
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π² ΠΏΡΠΎΠ΅ΠΊΡΠ΅ Π±Π΅Π·Π³ΡΠ°Π½ΠΈΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° Node.js ΠΈ Gulp ΡΡΠΈΠ»ΠΈΡ, ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ². - Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΊΠ°ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΠ·Π°ΡΠΈΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΡΡΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΄Π°.
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ
Π ΡΠΈΡΡΠ΅ΠΌΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ NodeJS ΠΈ npm.
Π¨Π°Π³ 1: ΠΠ»Ρ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ GulpJS Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ°ΠΊΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠ° npm Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ:
Npm install gulp -g
Π¨Π°Π³ 2: ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΅Π³ΠΎ Π΄Π»Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ:
Npm install --save-dev gulp
ΠΠΎΠ΄Π³ΡΡΠ·ΠΊΠ° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ ΠΏΡΠΈ ΡΠ±ΠΎΡΠΊΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ c ΠΏΠΎΠΌΠΎΡΡΡ npm ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ:
Npm install <Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Π°> --save-dev
ΠΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ node_modules/ .
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
Π¨Π°Π³ 1: Π‘ΠΏΠ΅ΡΠ²Π° Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ gulp ΠΊ ΠΏΡΠΎΠ΅ΠΊΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π² ΡΠ°ΠΉΠ»Π΅ gulpfile.js ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΡΡΡΠΎΡΠΊΡ:
Var gulp = require("gulp");
Π€ΡΠ½ΠΊΡΠΈΡ require() ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Ρ ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ node_modules/.
Π¨Π°Π³ 2: Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ gulp ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°ΡΠΊΠΈ Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°:
Gulp.task("exampleTask", function() {});
ΠΠ΅ΡΠΎΠ΄ task
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π΄Π²Π° ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°: Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΈ ΡΡΠ½ΠΊΡΠΈΡ Ρ ΡΠ΅Π»ΠΎΠΌ ΡΠ°ΡΠΊΠΈ.
ΠΠ°Π½Π½ΡΡ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ ΡΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ:
Gulp exampleTask
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ
ΠΠΈΠΆΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ:
Gulp.task("exampleTask", function () { return gulp.src("source-files") .pipe(plugin()) .pipe(gulp.dest("folder")); });
Π Π°Π·Π±Π΅ΡΠ΅ΠΌ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ Π² Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅:
- gulp.src β Π²ΡΠ±ΠΎΡΠΊΠ° ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΏΡΠΎΠ΅ΠΊΡΠ° Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ;
- .pipe(plugin()) β Π²ΡΠ·ΠΎΠ² Gulp ΠΏΠ»Π°Π³ΠΈΠ½Π° Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠ°ΠΉΠ»Π°;
- .pipe(gulp.dest(βfolderβ)) β Π²ΡΠ²ΠΎΠ΄ ΡΠ΅Π·ΡΠ»ΡΡΠΈΡΡΡΡΠ΅Π³ΠΎ ΡΠ°ΠΉΠ»Π° Π² ΠΏΠ°ΠΏΠΊΡ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΠ°ΡΠΊΠΈ ΡΠ°ΠΉΠ»ΠΎΠ²
Π€ΡΠ½ΠΊΡΠΈΡ gulp.src ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° ΠΌΠ°ΡΠΊΡ ΡΠ°ΠΉΠ»ΠΎΠ². ΠΡΠΈΠΌΠ΅ΡΡ ΠΌΠ°ΡΠΎΠΊ:
- ./ β ΡΠ΅ΠΊΡΡΠ°Ρ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ;
- ../ β ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠ°Ρ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ;
- js/index.js β ΡΠ°ΠΉΠ» index.js Π² ΠΏΠ°ΠΏΠΊΠ΅ js;
- js/*.js β Π²ΡΠ΅ ΡΠ°ΠΉΠ»Ρ Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ js Π² ΠΏΠ°ΠΏΠΊΠ΅ js;
- js/**/*.js β Π²ΡΠ΅ ΡΠ°ΠΉΠ»Ρ Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ js Π² ΠΏΠ°ΠΏΠΊΠ΅ js ΠΈ Π² Π΅Π΅ ΠΏΠΎΠ΄ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π°Ρ ;
- !js/*.js β ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΉΠ»ΠΎΠ² Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ js Π² ΠΏΠ°ΠΏΠΊΠ΅ js.
ΠΠΎΡΠΎΠΊΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΡΠΎΠΊΠΎΠ² ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡΠΈΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ² GulpJS.
ΠΠΎΡΠΎΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΊ Π΄ΡΡΠ³ΠΎΠΉ, ΠΊΠ°ΠΆΠ΄Π°Ρ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΡΡΠΈΠΌΠΈ Π΄Π°Π½Π½ΡΠΌΠΈ.
Π€ΡΠ½ΠΊΡΠΈΡ gulp.src() ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΏΠΎΡΠΎΠΊ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ², ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠΈΡ ΡΠ°ΠΉΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π°Π½Ρ Π΅ΠΉ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°. ΠΠ°Π»Π΅Π΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ pipe Π²ΡΡΡΡΠ°ΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠΎΠ½Π²Π΅ΠΉΠ΅Ρ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ ΠΏΠΎΡΠΎΠΊ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ². ΠΠ°Π½Π½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΠΏΠΎΡΠΎΠΊ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ².
ΠΠΈΠΆΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΡΠΎΠΊΠΎΠ². Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ ΡΡΠΎΡΠΎΠ½Π½ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ gulp-jshint ΠΈ gulp-concat, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π² gulpfile.js.
Π€ΡΠ½ΠΊΡΠΈΡ gulp.src Π±Π΅ΡΠ΅Ρ ΡΠ°ΠΉΠ»Ρ ΠΏΠΎ ΠΌΠ°ΡΠΊΠ΅ js/*.js . ΠΠ°ΠΏΡΡΠΊΠ°Π΅Ρ JSHint ΠΈ Π²ΡΠ²ΠΎΠ΄ΠΈΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ. ΠΠ°ΡΠ΅ΠΌ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ ΠΊΠΎΠ½ΠΊΠ°ΡΠ΅Π½Π°ΡΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΡΠ°ΠΉΠ» ΠΏΠΎΡΠ»Π΅ ΠΊΠΎΠ½ΠΊΠ°ΡΠ΅Π½Π°ΡΠΈΠΈ Π² Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ dist/ .
Gulp.task("example", function () { return gulp.src("js/*.js") .pipe(jshint()) .pipe(concat("index.js")) .pipe(gulp.dest("dist")); });
Π‘ΡΠΎΡΠΎΠ½Π½ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ². ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΊΠΎΠ½ΠΊΠ°ΡΠ΅Π½Π°ΡΠΈΠΈ ΡΠ°ΠΉΠ»ΠΎΠ² js:
Π¨Π°Π³ 1: Π‘ΠΏΠ΅ΡΠ²Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ require:
Var concat = require("gulp-concat");
Π¨Π°Π³ 2: ΠΠ°ΡΠ΅ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΡΠΊ Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΠ°ΡΠ΅Π½Π°ΡΠΈΠΈ ΡΠ°ΠΉΠ»ΠΎΠ² Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ js Π½Π°Ρ ΠΎΠ΄ΡΡΠΈΡ ΡΡ Π² Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ js/ . Π ΠΊΠΎΠ½ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΠ²ΡΠΈΠΉΡΡ ΡΠ°ΠΉΠ» ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ dist/js:
Gulp.task("concat", function () { return gulp.src("js/*.js") .pipe(concat("index.js")) .pipe(gulp.dest("dist/js")); });
Gulp concat
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ°ΡΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π²ΡΠ·ΡΠ²Π°ΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΄ΡΡΠ³ΠΈΡ ΡΠ°ΡΠΊΠΎΠ².
Gulp.task("build", ["html", "css"]);
ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ΅ΡΠΎΠ΄ watch Π΄Π»Ρ Π½Π°Π±Π»ΡΠ΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΡΠ°ΠΉΠ»Π°Ρ :
Gulp.watch("ΠΌΠ°ΡΠΊΠ° ΡΠ°ΠΉΠ»ΠΎΠ² Π΄Π»Ρ Π½Π°Π±Π»ΡΠ΄Π΅Π½ΠΈΡ", ["Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ°ΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°ΠΉΠ»ΠΎΠ²"]);
Π gulpfile.js ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π΄Π΅ΡΠΎΠ»ΡΠ½ΡΠΉ ΡΠ°ΡΠΊ:
Gulp.task("default", ["task1", "task2"]);
ΠΠ°Π½Π½ΡΠΉ ΡΠ°ΡΠΊ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΈΠ· ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ:
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ
- gulp-autoprefixer β Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ°ΡΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΡ ΠΊ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ;
- gulp-browser-sync β ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ Π°Π²ΡΠΎΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΈΡ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΡΠ΅ΡΠ²Π΅ΡΠ½ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ²;
- gulp-uncss β ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ CSS ΡΠ°ΠΉΠ»ΠΎΠ². ΠΠ»Π°Π³ΠΈΠ½ Π°Π½Π°Π»ΠΈΠ·ΠΈΡΡΠ΅Ρ HTML ΠΊΠΎΠ΄ ΠΈ Π½Π°Ρ ΠΎΠ΄ΠΈΡ Π²ΡΠ΅ Π½Π΅ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ ΠΈ ΠΏΡΠΎΠ΄ΡΠ±Π»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ;
- gulp-csso β CSS ΠΌΠΈΠ½ΠΈΡΠΈΠΊΠ°ΡΠΎΡ;
- gulp-htmlmin β ΠΏΡΠΎΡΡΠΎΠΉ HTML ΠΌΠΈΠ½ΠΈΡΠΈΠΊΠ°ΡΠΎΡ;
- gulp-htmlhint β HTML Π²Π°Π»ΠΈΠ΄Π°ΡΠΎΡ;
- gulp-uglify β JavaScript ΠΌΠΈΠ½ΠΈΡΠΈΠΊΠ°ΡΠΎΡ;
- gulp-concat β ΠΊΠΎΠ½ΠΊΠ°ΡΠ΅Π½Π°ΡΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ²;
- gulp-webserver β ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΈ Π·Π°ΠΏΡΡΡΠΈΡΡ ΡΠ΅ΡΠ²Π΅Ρ;
- gulp-jshint β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° ΠΊΠ°ΡΠ΅ΡΡΠ²Π° JS ΠΊΠΎΠ΄Π°;
- gulp-jasmine β Π·Π°ΠΏΡΡΠΊ jasmine ΡΠ΅ΡΡΠΎΠ²;
- gulp-jsdoc β Π³Π΅Π½Π΅ΡΠ°ΡΠΈΡ JSDoc Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ.
Π‘ ΠΏΠΎΠ»Π½ΡΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ Gulp-ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅:
http://gulpjs.com/plugins/
ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ
GruntJS
ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠ³ΠΎ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
- ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π²ΡΡΡΠ°Π²Π»ΡΡΡ Π½Π°Π±Π»ΡΠ΄Π°ΡΠ΅Π»Π΅ΠΉ (observer) Π½Π° ΡΠ°Π·Π½ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ.
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ
ΠΠ»Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Jasmine ΠΊ ΡΠ²ΠΎΠ΅ΠΌΡ ΠΏΡΠΎΠ΅ΠΊΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°ΡΠ°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ Π½Π° Π³Π»Π°Π²Π½ΡΡ HTML-ΡΡΡΠ°Π½ΠΈΡΡ:
- lib/jasmine-*/jasmine.js - ΡΠ°ΠΌ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ;
- lib/jasmine-*/jasmine-html.js - ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² Π² Π²ΠΈΠ΄Π΅ HTML;
- lib/jasmine-*/jasmine.css - Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ° Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ΅ΡΡΠΎΠ²;
- SpecRunner.html - ΡΠ°ΠΉΠ», ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΊΡΡΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° ΡΠ΅ΡΡΠΎΠ².
Π‘ΠΈΠ½Ρ ΡΠΎΠ½ΠΈΠ·Π°ΡΠΈΡ Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
GulpJS
Jasmine ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π² ΡΠ±ΠΎΡΠΊΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π½Π° GulpJS:
Π¨Π°Π³ 1: ΠΠ½Π°ΡΠ°Π»Π΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ gulp-jasmine:
Npm install gulp-jasmine --save-dev
Π¨Π°Π³ 2: ΠΠ°ΡΠ΅ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ Π² ΡΠ°ΠΉΠ»Π΅ ΡΠ±ΠΎΡΠΊΠΈ ΠΈ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΡΠΊΡ Π·Π°ΠΏΡΡΠΊΠ° ΡΠ΅ΡΡΠΎΠ²:
Var jasmine = require("gulp-jasmine"); gulp.task("jasmine", function() { gulp.src("ΡΠ°ΠΉΠ»Ρ ΡΠ΅ΡΡΠΎΠ²") .pipe(jasmine()); });
KarmaJS
(Π² ΠΊΠΎΠ½ΡΠ΅ ΡΡΠ°ΡΡΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎΠΏΠΈΡΠ°Π½Π° ΡΠ°Π±ΠΎΡΠ° Ρ ΡΡΠΈΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ)
ΠΠ»Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Jasmine Π² KarmaJS Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ:
Π¨Π°Π³ 1: Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ KarmaJS:
Npm install -g karma-cli
Π¨Π°Π³ 2: Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° ΡΠ΅ΡΡΠΎΠ² Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΡ Π½Π° Jasmine Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Chrome ΠΈ PhantomJS:
Npm install karma-jasmine karma-chrome-launcher karma-phantomjs-launcher
Π¨Π°Π³ 3: Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ°ΠΌ Jasmine:
Npm install -g jasmine
Π¨Π°Π³ 4: Π ΡΠ°ΠΉΠ»Π΅ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ karma ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Ρ ΠΈ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΠΏΡΡΡ ΠΊ ΡΠ΅ΡΡΠ°ΠΌ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π°
- describe β ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π½Π°Π±ΠΎΡΠ° ΡΠ΅ΡΡΠΎΠ²;
- it β ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΡΡΠ°;
- expect β ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΡΡΡΡΡ Π² ΡΠ΅ΡΡΠ΅.
Π€ΡΠ½ΠΊΡΠΈΠΈ describe ΠΈ it ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π΄Π²Π° ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°: ΠΏΠ΅ΡΠ²ΡΠΉ β Π½Π°Π·Π²Π°Π½ΠΈΠ΅, Π²ΡΠΎΡΠΎΠΉ β ΡΡΠ½ΠΊΡΠΈΡ Ρ ΠΊΠΎΠ΄ΠΎΠΌ.
ΠΡΠΈΠΌΠ΅Ρ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ΅ΡΡΠ°
describe(βΠ½Π°Π·Π²Π°Π½ΠΈΠ΅ Π½Π°Π±ΠΎΡΠ° ΡΠ΅ΡΡΠΎΠ²β, function () { it(βΠ½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ΅ΡΡΠ°β, function () { expect(2+2).toBe(4); }); });ΠΠ΅ΡΠΎΠ΄Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ²
- expect().toBe() β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π½Π° ΡΠ°Π²Π΅Π½ΡΡΠ²ΠΎ (β===β);
- expect().not.toBe() β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π½Π° ΡΠ°Π²Π΅Π½ΡΡΠ²ΠΎ (β!==β);
- expect().toEqual() β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π½Π° ΡΠ°Π²Π΅Π½ΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ², Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅;
- expect().toBeDefined() β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π½Π° ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π½ΠΈΠ΅;
- expect().toBeUndefined() β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π½Π° Π½Π΅ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π½ΠΈΠ΅;
- expect().toBeNull() β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π½Π° null;
- expect().toBeTruthy() β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π½Π° ΠΈΡΡΠΈΠ½Π½ΠΎΡΡΡ;
- expect().toBeFalsy() β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π½Π° Π»ΠΎΠΆΠ½ΠΎΡΡΡ;
- expect().toBeLessThan() β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π½Π° ΡΠΎ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ΅ΠΌ;
- expect().toBeGreaterThan() β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π½Π° ΡΠΎ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ΅ΠΌ;
- expect().toBeCloseTo() β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π½Π° ΡΠΎ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π±Π»ΠΈΠ·ΠΊΠΎ ΠΊ ΡΠΈΡΠ»Ρ;
- expect().toMatch() β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΡΠ΅Π³ΡΠ»ΡΡΠ½ΠΎΠΌΡ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡ;
- expect().toContain() β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π½Π° ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅;
- expect().toThrow() β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π²ΡΠ·ΠΎΠ²Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ;
- expect().toHaveBeenCalled() β ΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π²ΡΠ·ΠΎΠ²Π° ΡΡΠ½ΠΊΡΠΈΠΈ.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ
ΠΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΠ΅ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Π»ΠΎΠ³ΠΈΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠΉ Π² ΡΠ΅ΡΡΠ°Ρ , ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ beforeEach/afterEach . ΠΠ½ΠΈ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ΅Π΄/ΠΏΠΎΡΠ»Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ΅ΡΡΠ°.
ΠΠ»Ρ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΡ Π²ΡΠ·ΠΎΠ²ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ runs ΠΈ waitsFor .
- runs β ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΡ Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ;
- waitsFor β ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΡΡΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°: ΠΏΠ΅ΡΠ²ΡΠΉ β ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄ΠΎΠ»ΠΆΠ½Π° Π²Π΅ΡΠ½ΡΡΡ true, Π΅ΡΠ»ΠΈ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠΉ Π²ΡΠ·ΠΎΠ² Π² ΡΡΠ½ΠΊΡΠΈΠΈ runs Π±ΡΠ» Π²ΡΠΏΠΎΠ»Π½Π΅Π½, Π²ΡΠΎΡΠΎΠΉ β ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ± ΠΎΡΠΈΠ±ΠΊΠ΅, ΡΡΠ΅ΡΠΈΠΉ β ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΠ΅ Π² ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ .
ΠΠ°Π±Π»ΡΠ΄Π°ΡΠ΅Π»ΠΈ
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ Π²ΡΠ·ΠΎΠ²Π° ΡΡΠ½ΠΊΡΠΈΠΉ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ spyOn . ΠΠ°Π½Π½Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π΄Π²Π° ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°: ΠΏΠ΅ΡΠ²ΡΠΉ β ΠΎΠ±ΡΠ΅ΠΊΡ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΠ·ΠΎΠ² ΡΡΠ½ΠΊΡΠΈΠΈ, Π²ΡΠΎΡΠΎΠΉ β ΠΈΠΌΡ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΡΡ.
If(βΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π²ΡΠ·ΠΎΠ²Π° ΡΡΠ½ΠΊΡΠΈΠΈβ, function () { spyOn(exampleObject, "exampleFunction"); exampleObject.exampleFunction(); expect(exampleObject.exampleFunction).toHaveBeenCalled(); });
ΠΡΠΈ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ spyOn ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π²ΡΠ·ΠΎΠ²ΠΎΠ², ΠΈΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΈ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π²ΡΠ·ΠΎΠ² Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΡΡΠΈ.
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΈ Π±Π΅Π· ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ createSpy . Π€ΡΠ½ΠΊΡΠΈΡ createSpy ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΈΠΌΡ ΡΡΠ½ΠΊΡΠΈΠΈ Π΄Π»Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.
If(βΠΏΡΠΎΠ²Π΅ΡΠΊΠ° Π²ΡΠ·ΠΎΠ²Π° ΡΡΠ½ΠΊΡΠΈΠΈβ, function () { var example = createSpy("EXAMPLE"); example(βparam1β, βparam2β); expect(example.identify).toHaveBeenCalledWith(βparam1β, βparam2β); expect(example.calls.length).toEqual(1); });
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠ° Π·Π°Π³Π»ΡΡΠΊΠΈ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ createSpyObj . Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² createSpyObj ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΈΠΌΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΠΈ ΠΌΠ°ΡΡΠΈΠ² ΡΡΡΠΎΠΊ, ΡΠ²Π»ΡΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΊΠΎΠΌ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΠΎΠ±ΡΠ΅ΠΊΡΠ° Π·Π°Π³Π»ΡΡΠΊΠΈ.
ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ
Mocha
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ΅Π½Π΅ΡΠ°ΡΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ ΠΈΠ· ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°.
Π Π½Π°ΡΠ΅ Π²ΡΠ΅ΠΌΡ ΡΠ±ΠΎΡΠΊΠ° front-endβa ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΆΠ΅ Π½Π΅ΠΊΠΈΠΌ ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠΌ Π² ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠ°ΠΉΡΠΎΠ² ΠΈ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠ±ΠΎΡΠΊΠΈ ΡΠ΅ΡΡΡΡΠΎΠ² ΡΠ°ΠΉΡΠ° ΠΈ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ Π΄Π»Ρ ΡΠ΅Π±Ρ ΡΠ°ΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. Π― ΠΆΠ΅ Ρ ΠΎΡΡ ΠΏΠΎΠ²Π΅Π΄Π°ΡΡ ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΡΠ±ΠΎΡΠΊΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠ° Π·Π°Π΄Π°Ρ, ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΎΡΠ΄Π°Π» ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΠ΅, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ GULP.
Π Π΄Π²ΡΡ ΡΠ»ΠΎΠ²Π° ΠΎ Gulp
Gulp β ΡΡΠΎ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ Π·Π°Π΄Π°Ρ (ΠΊΠ°ΠΊ grunt) Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΡΡΠΈΠ½Π½ΡΡ Π·Π°Π΄Π°Ρ. ΠΠ½ ΠΏΡΠΎΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ. ΠΡΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΡΠ²Π΅ΠΉΡΠ°ΡΡΠΊΠΈΠΉ Π½ΠΎΠΆ ΠΈ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΡΠ½ΠΊΡΠΈΠΉ. Π ΡΠ°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΎΠ½ Π±ΡΡΡΡ.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Gulp
ΠΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ gulp Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ node.js
ΠΠ°Ρ ΠΎΠ΄ΡΡΡ Π² ΠΊΠΎΡΠ½Π΅ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡ Π΄Π»Ρ npm.
Npm init
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ gulp ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅Π³ΠΎ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°
Npm install --save-dev gulp
Π’Π΅ΠΏΠ΅ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΠ» Π² ΠΊΠΎΡΠ½Π΅ ΠΏΡΠΎΠ΅ΠΊΡΠ° gulpfile.js ΠΈ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΏΡΡΡΡΡ Π·Π°Π΄Π°ΡΡ Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°.
Var gulp = require("gulp"); gulp.task("default", function() { // ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ Π² Π·Π°Π΄Π°ΡΠ΅ });
Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ°ΠΊ ΠΈ Π±ΡΠ΄ΡΡ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π·Π°Π΄Π°ΡΠΈ Π² gulp. ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ, ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ Π²Π°ΡΠ΅Π³ΠΎ front-endβa Π΅ΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Ρ. ΠΠ± ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π΄Π°Π»Π΅Π΅.
Π‘Π±ΠΎΡΠΊΠ° css
ΠΡΠΌΠ°Ρ Π² Π½Π°ΡΠΈ Π΄Π½ΠΈ ΡΠΆΠ΅ Π²ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ css ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΡ. ΠΡΠ»ΠΈ Π²Ρ Π΅ΡΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ css ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡ, Π²Π°ΠΌ ΡΡΠΎΡΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ ΠΈΠ»ΠΈ ΠΈ Π½Π°ΡΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ sass ΠΈΠ»ΠΈ less Π² ΡΠ°Π±ΠΎΡΠ΅.
Π― ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ sass, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΡ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Π° sass.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΏΠ»Π°Π³ΠΈΠ½Π°
Npm install gulp-sass --save-dev
ΠΠ²Π΅ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠΈΡ Π·Π°Π΄Π°ΡΠΈ Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ ΠΈ live ΡΠ±ΠΎΡΠΊΠΈ sass ΡΠ°ΠΉΠ»ΠΎΠ² ΠΏΡΠΈ ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ.
Var gulp = require("gulp"); var sass = require("gulp-sass"); //ΠΠ°Π΄Π°ΡΠ° Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ gulp.task("sass", function () { return gulp.src("./sass/**/*.scss") .pipe(sass().on("error", sass.logError)) .pipe(gulp.dest("./css")); }); //ΠΠ°Π΄Π°ΡΠ°, ΠΏΠΎΡΠ»Π΅ Π·Π°ΠΏΡΡΠΊΠ° ΠΊΠΎΡΠΎΡΠΎΠΉ, gulp Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΠΈΡΡ Π·Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌΠΈ ΡΠ°ΠΉΠ»ΠΎΠ² gulp.task("watch", function () { gulp.watch("./sass/**/*.scss", ["sass"]); });
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π² Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ gulp sass , gulp ΡΠΎΠ±Π΅ΡΠ΅Ρ Π²ΡΠ΅ Π²Π°ΡΠΈ sass ΡΠ°ΠΉΠ»Ρ Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ.
Π Π²ΡΠΏΠΎΠ»Π½ΠΈΠ² gulp watch Π·Π°ΠΏΡΡΡΠΈΡΡΡ ΠΏΡΠΎΡΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΠΈΡΡ Π·Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ sass ΡΠ°ΠΉΠ»ΠΎΠ², ΠΈ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΡΠ°Π·Ρ ΠΈΡ
ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°ΡΡ.
ΠΠ»Ρ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΡΠΎΡΠ΅ΡΡΠ° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ΅ Ctrl + C.
ΠΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ JavaScript ΡΠ°ΠΉΠ»ΠΎΠ²
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ gulp-concat .
Npm install --save-dev gulp-concat
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π·Π°Π΄Π°ΡΡ Π² Π½Π°Ρ gulpfile.js .
Var gulp = require("gulp"); var sass = require("gulp-sass"); var concat = require("gulp-concat"); gulp.task("sass", function () { return gulp.src("./sass/**/*.scss") .pipe(sass().on("error", sass.logError)) .pipe(gulp.dest("dist/css")); }); gulp.task("scripts", function() { return gulp.src("src/**/*.js") .pipe(concat("app.js")) .pipe(gulp.dest("dist/js")); }); gulp.task("watch", ["sass", "scripts"], function() { gulp.watch("css/**/*.sass", ["sass"]); gulp.watch("src/**/*.js", ["scripts"]); });
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π·Π°Π΄Π°ΡΠΈ sass ΠΈ scripts Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡΡ Ρ Π·Π°Π΄Π°ΡΠΈ watch.
Π’Π΅ΠΏΠ΅ΡΡ ΡΠΊΡΠΈΠΏΡΡ Π±ΡΠ΄ΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΡΡ ΠΏΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π΅ gulp scripts ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΏΡΠΈ gulp watch .
ΠΠΈΠ½ΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ²
ΠΠ»Ρ ΠΌΠΈΠ½ΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ JavaScript ΡΠ°ΠΉΠ»ΠΎΠ² Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ uglify , Π° Π΄Π»Ρ ΠΌΠΈΠ½ΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ sass ΡΠ°ΠΉΠ»ΠΎΠ² Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΎΠΏΡΠΈΡ {outputStyle: "compressed"} .
Var gulp = require("gulp"); var sass = require("gulp-sass"); var concat = require("gulp-concat"); var uglify = require("gulp-uglify"); gulp.task("sass", function () { return gulp.src("./sass/**/*.scss") .pipe(sass({outputStyle: "compressed"}).on("error", sass.logError)) .pipe(gulp.dest("dist/css")); }); gulp.task("scripts", function() { return gulp.src("src/**/*.js") .pipe(concat("app.js")) .pipe(uglify()) .pipe(gulp.dest("dist/js")); }); gulp.task("watch", ["sass", "scripts"], function() { gulp.watch("css/**/*.sass", ["sass"]); gulp.watch("src/**/*.js", ["scripts"]); });
ΠΠ΅ΡΡΠΈΠΎΠ½Π½ΠΎΡΡΡ ΡΠ΅ΡΡΡΡΠΎΠ²
ΠΠ΅ΡΡΠΈΠΎΠ½Π½ΠΎΡΡΡ ΡΠ΅ΡΡΡΡΠΎΠ² Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠ° Π΄Π»Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ ΠΊΠ΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ°ΠΉΠ»ΠΎΠ² Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ. ΠΡΠ»ΠΈ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅ Ρ html ΡΠ°ΠΉΠ»Π°ΠΌΠΈ, ΡΠΎ ΠΈΠΌΠ΅Π½Π° ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΡΠΌ ΡΠ°ΠΉΠ»Π°ΠΌ ΠΈ ΠΏΡΡΠΈ ΠΊ Π½ΠΈΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Π° gulp-rev ΠΈΠ»ΠΈ gulp-rev-all . Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π½ΠΈΡ
Π²ΡΡ
ΠΎΠ΄ΡΡ ΡΠ°ΠΉΠ»Ρ ΡΠ°ΠΉΠ»Ρ Ρ ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠΈΠΏΠ°: app-ef62e7.js .
ΠΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅ Ρ Π΄Π²ΠΈΠΆΠΊΠ°ΠΌΠΈ ΡΠ°ΠΉΡΠΎΠ² ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ (Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ°), Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠ΅ ΠΏΡΡΠΈ, ΡΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΠΊΠΈΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ.
Π ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ ΠΏΠ»Π°Π³ΠΈΠ½Ρ gulp-html-replace ΠΈ gulp-rename .
Npm install gulp-html-replace --save-dev npm install gulp-rename --save-dev
gulp-rename β Π±ΡΠ΄Π΅Ρ Π½Π°Π·ΡΠ²Π°ΡΡ ΡΠ°ΠΉΠ»Ρ, Π° gulp-html-replace Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΠΏΡΡΠΈ Π² ΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΡΠ°ΠΉΠ»Π°Ρ .
ΠΠΌΠ΅Π½Π° ΡΠ°ΠΉΠ»ΠΎΠ²
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΠΌ Π½Π°Ρ gulpfile Π½ΠΎΠ²ΡΠΌΠΈ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ:
Var gulp = require("gulp"); var sass = require("gulp-sass"); var concat = require("gulp-concat"); var uglify = require("gulp-uglify"); var htmlreplace = require("gulp-html-replace"); var rename = require("gulp-rename"); var time = Date.now(); gulp.task("path", function () { gulp.src("/assets_tpl.php") .pipe(htmlreplace({ "js": [ "/dist/js/app-"+time+".js" ], "css": [ "/dist/css/bundle-"+time+".css" ] })) .pipe(rename("assets.php")) .pipe(gulp.dest("/")); }); gulp.task("sass",["path"], function () { return gulp.src("./sass/**/*.scss") .pipe(sass({outputStyle: "compressed"}).on("error", sass.logError)) .pipe(concat("bundle-"+time+".css")) .pipe(gulp.dest("dist/css")); }); gulp.task("scripts",["path"], function() { return gulp.src("src/**/*.js") .pipe(concat("app-"+time+".js")) .pipe(uglify()) .pipe(gulp.dest("dist/js")); }); gulp.task("watch", ["sass", "scripts"], function() { gulp.watch("css/**/*.sass", ["sass"]); gulp.watch("src/**/*.js", ["scripts"]); });
ΠΠ΅ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ time ΡΠΎΠ·Π΄Π°Π½Π° Π΄Π»Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΡΠ»Π° Π² ΠΌΠΎΠΌΠ΅Π½Ρ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ gulp ΡΠΊΡΠΈΠΏΡΠ°. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ timestamp. ΠΠ½ ΠΈ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π² ΠΈΠΌΡ ΡΠ°ΠΉΠ»Π°.
ΠΡΡΠΈ ΠΊ ΡΠ°ΠΉΠ»Π°ΠΌ
Π’Π°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π½Π° Π½ΠΎΠ²Π°Ρ Π·Π°Π΄Π°ΡΠ° path , ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎ ΡΠ°ΠΉΠ»Ρ-ΡΠ°Π±Π»ΠΎΠ½Ρ assets_tpl.php ΡΠ³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΡΠ°ΠΉΠ» assets.php Ρ Π±ΠΎΠ΅Π²ΡΠΌΠΈ ΠΏΡΡΡΠΌΠΈ ΠΊ ΡΠ°ΠΉΠ»Π°ΠΌ.
ΠΠΎΡ ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΉΠ»-ΡΠ°Π±Π»ΠΎΠ½ assets_tpl.php:
ΠΠΌΠ΅ΡΡΠΎ ΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΡΠ΅Π³ΠΎΠ² Π² ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ Π±ΡΠ΄ΡΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Ρ ΠΏΡΡΠΈ ΠΊ ΡΠ°ΠΉΠ»Ρ.
Π’Π°ΠΊ ΠΆΠ΅ ΡΡΠΎΠΈΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π·Π°Π΄Π°ΡΠ° path Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° ΠΊΠ°ΠΊ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ Π΄Π»Ρ Π·Π°Π΄Π°Ρ sass ΠΈ scripts .
ΠΠΎ ΡΠ΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ ΠΏΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ Π»ΡΠ±ΠΎΠΉ ΠΈΠ· Π·Π°Π΄Π°Ρ Π±ΡΠ΄ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΠ°ΠΉΠ»Ρ, Π° ΡΡΠ°ΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ. ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π±Ρ Ρ ΡΠ°Π½ΠΈΠ»ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ²Π΅ΠΆΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΈΡΡΠΈΡΡ ΠΏΠ°ΠΏΠΊΡ Ρ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠ΅ΡΡΡΡΠ°ΠΌΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ gulp-clean .
Npm install --save-dev gulp-clean
ΠΠ°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π·Π°Π΄Π°ΡΡ Ρ ΡΠ»Π°Π³ΠΎΠΌ {read: false} , Π΄Π»Ρ ΡΡΠΊΠΎΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ.
Var clean = require("gulp-clean"); gulp.task("clean", function () { return gulp.src("dist", {read: false}) .pipe(clean()); });
Π ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π·Π°Π΄Π°ΡΡ build , ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΠΈΡΡΠΊΡ, Π° Π·Π°ΡΠ΅ΠΌ ΡΠΎΠ±ΠΈΡΠ°ΡΡ Π²ΡΠ΅ Π½Π°ΡΠΈ ΡΠ΅ΡΡΡΡΡ.
Gulp.task("build",["clean","sass","scripts","path"], function () {});
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π²ΡΠΏΠΎΠ»Π½ΠΈΠ² Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Ρ gulp build , gulp ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠ±Π΅ΡΠ΅Ρ Π²Π΅ΡΡ front-end Π΄Π»Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠ°Π½Π½ΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ²Π΅ΡΠΈΡΡ Π½Π° Ρ ΡΠΊ ΠΏΠΎΡΠ»Π΅ Π΄Π΅ΠΏΠ»ΠΎΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π½Π° ΡΠ΅ΡΠ²Π΅Ρ / Ρ ΠΎΡΡΠΈΠ½Π³.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΏΡΠΈΠΌΠ΅Ρ Π΄Π»Ρ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠ»Π΅Π½ΠΈΡ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ±ΠΈΡΠ°ΡΡ ΡΠ°ΠΉΠ»Ρ ΡΡΠΈΠ»Π΅ΠΉ ΠΈ ΡΠΊΡΠΈΠΏΡΠΎΠ² Π΄Π»Ρ Π²Π°ΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ². ΠΠ°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΈ Π²ΡΠ±ΡΠ°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ΄ ΡΠ΅Π±Ρ ΡΠ°ΠΌ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ ΠΏΠΎΠ»Π΅Π·Π΅Π½ Π΄Π°Π½Π½ΡΠΉ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π», ΠΏΠΎΠ΄ΠΏΠΈΡΡΠ²Π°ΠΉΡΠ΅ΡΡ Π½Π° ΠΌΠΎΠΉ Π±Π»ΠΎΠ³, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΡ ΠΎ Π½ΠΎΠ²ΡΡ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡΡ Π½Π° ΡΠ΅ΠΌΡ: Π²Π΅ΡΡΡΠΊΠΈ, javascript ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΊΡΠΎΡΡΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅Π½Π½ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.