{"id":2022,"date":"2021-06-19T16:43:10","date_gmt":"2021-06-19T16:43:10","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2022"},"modified":"2021-06-19T16:43:10","modified_gmt":"2021-06-19T16:43:10","slug":"%d0%ba%d0%b0%d0%ba-%d1%8f-%d1%81%d0%b4%d0%b5%d0%bb%d0%b0%d0%bb-%d1%81%d0%b2%d0%be%d1%8e-%d1%81%d0%b1%d0%be%d1%80%d0%ba%d1%83-gulp-%d0%b4%d0%bb%d1%8f-%d0%b1%d1%8b%d1%81%d1%82%d1%80%d0%be%d0%b9-%d0%bb","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2022","title":{"rendered":"\u041a\u0430\u043a \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u0432\u043e\u044e \u0441\u0431\u043e\u0440\u043a\u0443 Gulp \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0439, \u043b\u0451\u0433\u043a\u043e\u0439 \u0438 \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0438"},"content":{"rendered":"\n<p>\u0421\u0435\u0440\u044c\u0451\u0437\u043d\u043e \u0438 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u044f \u043d\u0430\u0447\u0430\u043b \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u043e\u0439 \u0432 2019 \u0433\u043e\u0434\u0443, \u0445\u043e\u0442\u044f \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u0435\u0449\u0451 \u0441\u043e \u0448\u043a\u043e\u043b\u044b \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u0441\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u043e\u0439 \u043a\u0430\u043a \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u044c. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u043c \u043c\u043d\u0435 \u0441\u0435\u0431\u044f \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e, \u043d\u043e \u0438 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u043e\u043c \u0441 \u043e\u043f\u044b\u0442\u043e\u043c 5+ \u043b\u0435\u0442 \u044f \u0442\u043e\u0436\u0435 \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0441\u044c. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u044f \u0443\u0441\u043f\u0435\u043b \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u043c Gulp, \u0435\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438 \u0438 \u0441\u0434\u0435\u043b\u0430\u043b \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0445\u043e\u0440\u043e\u0448\u0443\u044e, \u043a\u0430\u043a \u043f\u043e \u043c\u043d\u0435, \u0441\u0431\u043e\u0440\u043a\u0443 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b. \u041e \u0435\u0451 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443.<\/p>\n\n\n\n<p><strong>\u0412\u0410\u0416\u041d\u041e!<\/strong>&nbsp;\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0451\u0442 \u043e \u0441\u0430\u043c\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438 \u0441\u0431\u043e\u0440\u043a\u0438, \u0432\u044b\u0448\u0435\u0434\u0448\u0438\u043c\u0438 \u0434\u043e \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0434\u043b\u044f \u0432\u0430\u0441 \u043d\u0435 \u0440\u0435\u043b\u0435\u0432\u0430\u043d\u0442\u043d\u0430, \u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u0430.<\/p>\n\n\n\n<h2>\u041a\u0430\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0440\u0435\u0448\u0430\u0435\u0442 \u044d\u0442\u0430 \u0441\u0431\u043e\u0440\u043a\u0430?<\/h2>\n\n\n\n<ul><li>\u0432\u0451\u0440\u0441\u0442\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 (\u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432 \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c head, header, footer \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u043a\u043d\u043e\u043f\u043e\u043a \u0438\u043b\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u0432);<\/li><li>\u0432\u0451\u0440\u0441\u0442\u043a\u0430 \u0441 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430\u043c\u0438 (SASS\/SCSS);<\/li><li>\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438\u0437 ttf \u0432 eot, woff, woff2;<\/li><li>\u043b\u0451\u0433\u043a\u043e\u0435 (\u043f\u043e\u0447\u0442\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435) \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u043e\u0432;<\/li><li>\u043b\u0451\u0433\u043a\u043e\u0435 (\u043f\u043e\u0447\u0442\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435) \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432-\u0438\u043a\u043e\u043d\u043e\u043a;<\/li><li>\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 &#8220;\u043d\u0430 \u043b\u0435\u0442\u0443&#8221;;<\/li><li>\u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f html\/css\/js \u0444\u0430\u0439\u043b\u043e\u0432;<\/li><li>\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c php;<\/li><li>\u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u043f\u043e FTP;<\/li><li>\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u043b\u043a\u0438\u0445 \u0437\u0430\u0434\u0430\u0447 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432.<\/li><\/ul>\n\n\n\n<p>\u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u043e\u043c\u0443 \u043b\u0435\u043d\u044c \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0451 \u0440\u0443\u043a\u0430\u043c\u0438 &#8211; \u0441\u0440\u0430\u0437\u0443 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0441\u0431\u043e\u0440\u043a\u0443.<\/p>\n\n\n\n<h2>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0431\u043e\u0440\u043a\u0438<\/h2>\n\n\n\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0441\u0431\u043e\u0440\u043a\u0443 (\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u0435 \u0437\u0430 \u0442\u0430\u0432\u0442\u043e\u043b\u043e\u0433\u0438\u044e). \u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435&nbsp;<strong>LTS-\u0432\u0435\u0440\u0441\u0438\u044f<\/strong>&nbsp;<a href=\"https:\/\/nodejs.org\/dist\/v14.16.1\/node-v14.16.1-x64.msi\">Node.js<\/a>&nbsp;\u0438 NPM (\u0432\u0445\u043e\u0434\u0438\u0442 \u0432 \u043f\u0430\u043a\u0435\u0442 Node.js) \u043b\u0438\u0431\u043e&nbsp;<a href=\"https:\/\/yarnpkg.com\/getting-started\/install\">Yarn<\/a>. \u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u0430\u043a\u043e\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043f\u0430\u043a\u0435\u0442\u043d\u044b\u0445 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043e\u0434\u043d\u0430\u043a\u043e \u044f \u0431\u0443\u0434\u0443 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0442\u044c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 NPM, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0434\u043b\u044f Yarn \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u0433\u0443\u0433\u043b\u0438\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438 NPM-\u043a\u043e\u043c\u0430\u043d\u0434.<\/p>\n\n\n\n<p>\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c &#8211; \u044d\u0442\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442. \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 (\u043e\u0447\u0435\u043d\u044c \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f) \u0438 \u0432\u0432\u043e\u0434\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443&nbsp;<code>npm init.<\/code><\/p>\n\n\n\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e npm \u0437\u0430\u0434\u0430\u0441\u0442 \u043d\u0430\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u043e \u0442\u0438\u043f\u0443 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0430\u0432\u0442\u043e\u0440\u0430, \u0432\u0435\u0440\u0441\u0438\u0438 \u0438 \u0442.\u0434&#8230; \u041e\u0442\u0432\u0435\u0447\u0430\u0435\u043c \u043d\u0430 \u043d\u0438\u0445 \u043a\u0430\u043a \u0434\u0443\u0448\u0435 \u0443\u0433\u043e\u0434\u043d\u043e. \u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u044d\u0442\u043e \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n\n\n\n<p>\u0414\u0430\u043b\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437&nbsp;<a href=\"https:\/\/code.visualstudio.com\/\">Visual Studio Code<\/a>&nbsp;(\u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b) \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0432\u0430\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 + \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b.<\/p>\n\n\n\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0430\u043c&nbsp;<a href=\"https:\/\/gulpjs.com\/\">Gulp.<\/a>&nbsp;\u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0434\u0432\u0443\u043c\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438&nbsp;<code>npm i gulp -global<\/code>&nbsp;&#8211; \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c Gulp \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u043d\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0438&nbsp;<code>npm i gulp --save-dev<\/code>&nbsp;&#8211; \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c Gulp \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0432 \u043f\u0440\u043e\u0435\u043a\u0442. \u041a\u043b\u044e\u0447&nbsp;<code>--save<\/code>&nbsp;\u0437\u0434\u0435\u0441\u044c \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u043f\u0440\u0438 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 (\u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u0432\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043d\u043e\u0432\u0443\u044e, \u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u0443\u044e \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438 \u0432\u0435\u0440\u0441\u0438\u044e), \u0430 \u043a\u043b\u044e\u0447&nbsp;<code>-dev<\/code>&nbsp;\u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043f\u0430\u043a\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0430 \u043d\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u0430\u043a\u0435\u0442 Swiper, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430 \u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0431\u0435\u0437 \u043a\u043b\u044e\u0447\u0430&nbsp;<code>-dev<\/code>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0430 \u043d\u0435 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n\n\n\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a Gulp \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f, \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0444\u0430\u0439\u043b gulpfile.js, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0438 \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430.<\/p>\n\n\n\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c Gulp \u0432 \u043d\u0430\u0448\u0435\u043c \u0444\u0430\u0439\u043b\u0435, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u043b\u0441\u044f. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e require:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const gulp = require('gulp');<\/code><\/pre>\n\n\n\n<p>\u0414\u0430\u043b\u0435\u0435, \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/require-dir\">require-dir<\/a>. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u043d \u0432\u0441\u0451 \u0442\u043e\u0439 \u0436\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 (\u043a\u0430\u043a \u0438 \u0432\u0441\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u043b\u0435\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0443, \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u043d\u0430\u0439\u0442\u0435, \u0447\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c &#8211; \u044d\u0442\u043e&nbsp;<code>npm i $PLUGIN-NAME$ --save-dev<\/code>). \u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0435\u0433\u043e \u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043f\u0443\u0442\u044c \u043a \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u043c \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438 (\u0443 \u043c\u0435\u043d\u044f \u044d\u0442\u043e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f tasks):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const gulp = require('gulp');\n\nconst requireDir = require('require-dir');\nconst tasks = requireDir('.\/tasks');<\/code><\/pre>\n\n\n\n<h3>\u041f\u0435\u0440\u0432\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430<\/h3>\n\n\n\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c, \u0432\u0441\u0451 \u043b\u0438 \u043c\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u043b\u0438. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438&nbsp;<strong>tasks<\/strong>&nbsp;\u0444\u0430\u0439\u043b \u043c\u043e\u0434\u0443\u043b\u044f \u0441 \u0438\u043c\u0435\u043d\u0435\u043c&nbsp;<strong>hello.js<\/strong>. \u0412 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0441\u0442\u0440\u043e\u043a\u0443 &#8220;Hello Gulp!&#8221; (\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043c\u0435\u043d\u0435\u0435 \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e\u0435, \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>module.exports = function hello () {\n\tconsole.log(\"Hello Gulp!\");\n}<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u0432 gulpfile.js \u0438 \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0442\u0430\u043c \u0437\u0430\u0434\u0430\u0447\u0443 hello:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const gulp = require('gulp');\n\nconst requireDir = require('require-dir');\nconst tasks = requireDir('.\/tasks');\n\nexports.hello = tasks.hello;<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439&nbsp;<code>gulp hello<\/code>&nbsp;\u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043d\u0430\u0448\u0443 \u0437\u0430\u0434\u0430\u0447\u0443. \u0415\u0441\u043b\u0438 \u0432\u0441\u0451 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e &#8211; \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u044b\u0432\u0435\u0441\u0442\u0438\u0441\u044c \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0442\u0430\u043a\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;13:17:15] Using gulpfile D:\\Web projects\\Easy-webdev-startpack-new\\gulpfile.js\n&#91;13:17:15] Starting 'hello'...\nHello Gulp!\n&#91;13:17:15] The following tasks did not complete: hello\n&#91;13:17:15] Did you forget to signal async completion?<\/code><\/pre>\n\n\n\n<p>\u0422\u0430\u043a \u0436\u0435, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c&nbsp;<strong>\u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447<\/strong>&nbsp;\u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439&nbsp;<code>gulp --tasks<\/code>.<\/p>\n\n\n\n<h2>\u0424\u0430\u0439\u043b\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430<\/h2>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u0435\u0440\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0443 \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. \u042f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e (\u043f\u0430\u043f\u043a\u0443)&nbsp;<strong>\/src<\/strong>&nbsp;\u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e&nbsp;<strong>\/build<\/strong>&nbsp;\u0434\u043b\u044f \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.\u0412 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 src\/ \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u043e\u0434\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438:<\/p>\n\n\n\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0432 \u0438\u0442\u043e\u0433\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/466\/7e9\/f2c\/4667e9f2c7128c3bd517fddd0904e2cb.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>\u0412\u0410\u0416\u041d\u041e:<\/strong>&nbsp;\u0432 \u043f\u0443\u0441\u0442\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f\u0445, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a&nbsp;<code>img\/<\/code>,&nbsp;<code>fonts\/<\/code>&nbsp;\u0438 \u0442.\u043f. \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043f\u0443\u0448\u0438\u0442\u044c \u0432 \u0443\u0434\u0430\u043b\u0451\u043d\u043d\u044b\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 Github) \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0443\u0441\u0442\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0441 \u0438\u043c\u0435\u043d\u0435\u043c .gitkeep. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b Github \u043d\u0435 \u0443\u0434\u0430\u043b\u0438\u043b \u043f\u0443\u0441\u0442\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0438\u0437 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n\n\n\n<h2>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432<\/h2>\n\n\n\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0435\u043b\u044c\u044e Gulp \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0443\u0442\u0438\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0437\u0430\u0434\u0430\u0447 \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432. \u041f\u0435\u0440\u0432\u0443\u044e \u0442\u0435\u0441\u0442\u043e\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0443\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0433\u0430\u0442\u044c \u0432 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2>\u0417\u0430\u0434\u0430\u0447\u0438 \u0441\u0442\u0438\u043b\u0435\u0439<\/h2>\n\n\n\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 scss \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 scss \u043a\u043e\u0434 \u0432 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 css. \u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0441\u0430\u043c \u043f\u043b\u0430\u0433\u0438\u043d&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-sass\">Gulp-sass<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c scss \u0444\u0430\u0439\u043b\u044b \u0432 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 css, \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443. \u0422\u0430\u043a \u0436\u0435, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b scss-\u0444\u0430\u0439\u043b\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443, \u0430 \u0446\u0435\u043b\u044b\u043c\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f\u043c\u0438 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-sass-bulk-importer\">gulp-sass-bulk-importer<\/a>, \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0430\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432 &#8211;&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-autoprefixer\">gulp-autoprefixer<\/a>, \u0434\u043b\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u043b\u0438\u0448\u043d\u0435\u0433\u043e css &#8211;&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-clean-css\">gulp-clean-css<\/a>&nbsp;\u0438 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0430\u0442\u0438\u043d\u0430\u0446\u0438\u0438 (&#8220;\u0441\u043a\u043b\u0435\u0438\u0432\u0430\u043d\u0438\u044f&#8221; \u0444\u0430\u0439\u043b\u043e\u0432 \u0432\u043c\u0435\u0441\u0442\u0435) &#8211;&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-concat\">gulp-concat.<\/a>&nbsp;\u0422\u0430\u043a \u0436\u0435, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432 DevTools \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0438\u0437 \u043a\u0430\u043a\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0432\u0437\u044f\u043b\u0438\u0441\u044c \u0441\u0442\u0438\u043b\u0438, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-sourcemaps\">gulp-sourcemaps<\/a>. \u041c\u043e\u0436\u043d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043d\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 npm i \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435, \u0430 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0447\u0435\u043d\u044c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b, \u043d\u043e \u043a\u043b\u044e\u0447\u0438 \u0442\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432:&nbsp;<code>npm i --save-dev gulp-sass gulp-sass-bulk-importer gulp-autoprefixer gulp-clean-css gulp-concat gulp-sourcemaps<\/code><\/p>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 tasks\/ \u0444\u0430\u0439\u043b \u043c\u043e\u0434\u0443\u043b\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043f\u0438\u0448\u0435\u043c, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0433\u0430\u043b\u043f\u0443 \u0441 scss-\u0444\u0430\u0439\u043b\u0430\u043c\u0438. \u041e\u0442 gulp \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f src \u0438 dest, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const {\n\tsrc,\n\tdest\n} = require('gulp');\nconst sass = require('gulp-sass');\nconst bulk = require('gulp-sass-bulk-importer');\nconst prefixer = require('gulp-autoprefixer');\nconst clean = require('gulp-clean-css');\nconst concat = require('gulp-concat');\nconst map = require('gulp-sourcemaps');<\/code><\/pre>\n\n\n\n<p>\u0414\u0430\u043b\u0435\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>module.exports&nbsp;=&nbsp;function&nbsp;style()&nbsp;{\n\treturn\n}<\/code><\/pre>\n\n\n\n<p>\u0412 \u043d\u0435\u0439-\u0442\u043e \u043c\u044b \u0438 \u0431\u0443\u0434\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 scss \u0444\u0430\u0439\u043b\u044b. Gulp \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439&nbsp;<code>.pipe<\/code>&nbsp;\u043d\u0430\u0434 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 \u043c\u043e\u0434\u0443\u043b\u0435&nbsp;<code>src<\/code>. \u042d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u043a\u043e\u043d\u0432\u0435\u0439\u0435\u0440, \u043f\u0440\u043e\u0445\u043e\u0434\u044f \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443, \u043a\u043e\u0434 \u0438\u043b\u0438 \u0444\u0430\u0439\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 src\/, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u0438\u0442\u043e\u0433\u0435 \u0438 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e build\/.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/97f\/ff3\/057\/97fff30574c7d36097f92dba1a3cf32e.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439:<\/p>\n\n\n\n<ol><li>\u0412\u0437\u044f\u0442\u044c \u0444\u0430\u0439\u043b\u044b scss \u0438\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439 scss\/<\/li><li>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0443 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 (sourcepams)<\/li><li>\u0421\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 css<\/li><li>\u0420\u0430\u0441\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u0435\u043d\u0434\u043e\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b<\/li><li>\u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u043e\u0442 \u043b\u0438\u0448\u043d\u0435\u0433\u043e<\/li><li>\u0421\u043a\u043b\u0435\u0438\u0442\u044c \u0432 \u0435\u0434\u0438\u043d\u044b\u0439 \u0444\u0430\u0439\u043b style.css<\/li><li>\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0443 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0435\u043c\u0441\u044f \u0444\u0430\u0439\u043b\u0435<\/li><li>\u041f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0435\u0433\u043e \u0432 build<\/li><\/ol>\n\n\n\n<p>\u0418\u0442\u043e\u0433\u043e\u043c (return) \u043d\u0430\u0448\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u0441\u0435\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438. \u042d\u0442\u043e \u0438 \u0437\u0430\u043f\u0438\u0448\u0435\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\treturn src('src\/scss\/**\/*.scss')\n\t\t.pipe(map.init())\n\t\t.pipe(bulk())\n\t\t.pipe(sass())\n\t\t.pipe(prefixer())\n\t\t.pipe(clean())\n\t\t.pipe(concat('style.min.css'))\n\t\t.pipe(map.write('..\/sourcemaps\/'))\n\t\t.pipe(dest('build\/css\/'))<\/code><\/pre>\n\n\n\n<p>\u041f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u043a\u043e\u0434\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e<\/p>\n\n\n\n<p>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0435\u0433\u043e \u043d\u0430\u043c \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 &#8211; \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u0430. \u0417\u0432\u0443\u0447\u0438\u0442 \u0441\u0442\u0440\u0430\u0448\u043d\u043e, \u0430 \u043d\u0430 \u0434\u0435\u043b\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:&nbsp;<code>.pipe(sass({outputStyle:&nbsp;'compressed'})<\/code>. \u0414\u043b\u044f sass \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e \u0441\u0442\u0435\u043f\u0435\u043d\u044c \u0441\u0436\u0430\u0442\u0438\u044f \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0433\u043e css \u043a\u0430\u043a compressed, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 error \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u043d\u0435 \u0442\u0430\u043a (\u0435\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433). \u0418 \u0442\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0430\u043a\u043e\u0439 \u043f\u0430\u0439\u043f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.pipe(sass({\n  outputStyle: 'compressed'\n}).on('error', sass.logError))<\/code><\/pre>\n\n\n\n<p>\u0414\u043b\u044f \u0430\u0432\u0442\u043e\u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0435\u0440\u0430 \u0432\u043e\u0437\u044c\u043c\u0443 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d\u044b\u0435 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a &#8211; \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0438 \u0447\u0438\u0442\u0430\u0439\u0442\u0435, \u0437\u0430 \u0447\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0442\u0430 \u0438\u043b\u0438 \u0438\u043d\u0430\u044f \u043e\u043f\u0446\u0438\u044f.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.pipe(prefixer({\n  overrideBrowserslist: &#91;'last 8 versions'],\n  browsers: &#91;\n    'Android &gt;= 4',\n    'Chrome &gt;= 20',\n    'Firefox &gt;= 24',\n    'Explorer &gt;= 11',\n    'iOS &gt;= 6',\n    'Opera &gt;= 12',\n    'Safari &gt;= 6',\n  ],\n}))<\/code><\/pre>\n\n\n\n<p>\u0421 \u043a\u043b\u0438\u043d\u0435\u0440\u043e\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u043e: \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043e\u0447\u0438\u0441\u0442\u043a\u0438 (level) \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 2 \u0438 \u0433\u043e\u0442\u043e\u0432\u043e.<\/p>\n\n\n\n<p><strong>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 bs \u0438 \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d \u043d\u0443\u0436\u0435\u043d \u044f \u043e\u043f\u0438\u0448\u0443 \u043d\u0438\u0436\u0435, \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435.<\/strong>\u041a\u0430\u043a \u0438\u0442\u043e\u0433, \u0432 \u0444\u0430\u0439\u043b\u0435 tasks\/style.js \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043a\u043b\u044c\u043d\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043a \u0431\u0443\u0434\u0443\u0449\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c. \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 plugins, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0444\u0430\u0439\u043b\u043e\u0432-\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u0438\u0437 node_modules&nbsp;<code>const&nbsp;plugins&nbsp;=&nbsp;[];<\/code>&nbsp;. \u041f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0430\u043c \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043a\u0430\u0432\u044b\u0447\u043a\u0430\u0445 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e &#8211; \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0442\u0440\u043e\u043a \u0441 \u043f\u0443\u0442\u044f\u043c\u0438 \u043a \u0444\u0430\u0439\u043b\u0430\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432 \u0444\u0430\u0439\u043b gulp.src \u0438 gulp.dest, \u043f\u043b\u0430\u0433\u0438\u043d\u044b gulp-concat \u0438 gulp-sourcemaps \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0435 \u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448 &#8220;\u043a\u043e\u043d\u0432\u0435\u0439\u0435\u0440&#8221;:<\/p>\n\n\n\n<ol><li>\u0412\u0437\u044f\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0438\u0437 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 &#8211; \u0438\u0437 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b)<\/li><li>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u043f\u043f\u0438\u043d\u0433<\/li><li>\u041f\u0440\u043e\u0433\u043d\u0430\u0442\u044c \u0432\u0441\u0451 \u0447\u0435\u0440\u0435\u0437 sass<\/li><li>\u041f\u043e\u0434\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 css (\u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u044d\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u0430\u0436\u043d\u043e)<\/li><li>\u0421\u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0432 \u043e\u0434\u0438\u043d<\/li><li>\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043c\u0430\u043f\u043f\u0438\u043d\u0433<\/li><li>\u0421\u043b\u043e\u0436\u0438\u0442\u044c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e build\/css<\/li><\/ol>\n\n\n\n<p>\u041d\u043e \u0442\u0443\u0442 \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c &#8211; \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0435, \u0435\u0441\u043b\u0438 \u0434\u043b\u0438\u043d\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 plugins \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u043d\u0430 \u043d\u0443\u043b\u044e &#8211; \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438 \u0432\u0435\u0440\u043d\u0451\u0442 \u043a\u043e\u043b\u043b\u0431\u044d\u043a&nbsp;<code>done()<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0434\u0430\u0441\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b, \u0447\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u043d\u0435\u0442 \u0431\u0435\u0437 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u0411\u0435\u0437 \u044d\u0442\u043e\u0433\u043e, \u043d\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0440\u0443\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432. \u0410 \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430.<\/p>\n\n\n\n<p>\u0410 \u0442\u0430\u043a \u0436\u0435 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/chalk\">chalk<\/a>&nbsp;\u0434\u043b\u044f \u0440\u0430\u0441\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0438 \u043d\u0430 \u043d\u0435\u0451 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435. \u041f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e \u044d\u0442\u043e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0438, \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u0443\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8ef\/cd7\/475\/8efcd74755034031cd116a781226f867.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u0444\u0430\u0439\u043b tasks\/libs_style.js \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n\n\n\n<h2>\u0417\u0430\u0434\u0430\u0447\u0438 \u0434\u043b\u044f JavaScript<\/h2>\n\n\n\n<p>C JavaScript \u0432\u0441\u0451 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0447\u0438\u0441\u0442\u044b\u0439, \u043d\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0438 \u043d\u0435 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0432 \u0433\u043e\u0442\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u0433\u043e\u043d\u044f\u0442\u044c \u043a\u043e\u0434 \u0447\u0435\u0440\u0435\u0437 babel, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a\u043e\u0434 \u043a \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443 ES5, \u043d\u043e \u0438 \u0441\u043a\u043e\u0440\u0430\u0449\u0430\u0435\u0442 \u0435\u0433\u043e, \u043f\u0443\u0442\u0451\u043c \u0437\u0430\u043c\u0435\u043d\u044b \u0438\u043c\u0451\u043d \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0435 (\u043e\u0434\u043d\u043e-\u0434\u0432\u0443\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u044c\u043d\u044b\u0435). \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0442\u0440\u0438 \u0440\u0430\u0437\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438: \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e JS-\u043a\u043e\u0434\u0430, \u0434\u043b\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432\/\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0434\u043b\u044f \u0431\u0438\u043b\u0434\u0430.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 JS \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-uglify-es\">gulp-uglify-es<\/a>&nbsp;&#8211; \u0434\u043b\u044f \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 JS-\u043a\u043e\u0434\u0430 \u0438&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-babel\">gulp-babel<\/a>&nbsp;\u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438. \u0421 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u0434 \u0432\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u043e\u043f\u0438\u0448\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u0434\u043e\u043c:<\/p>\n\n\n\n<ol><li>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 (sources)<\/li><li>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u043f\u043f\u0438\u043d\u0433<\/li><li>\u0421\u043a\u043b\u0435\u0438\u0442\u044c \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b<\/li><li>\u041c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b \u0444\u0430\u0439\u043b<\/li><li>\u0417\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0432 \u0444\u0430\u0439\u043b<\/li><li>\u041f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b \u0432 build\/js\/<\/li><\/ol>\n\n\n\n<p>\u0414\u043b\u044f \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0439 (\u0431\u0438\u043b\u0434\u043e\u0432\u043e\u0439) \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u043e\u0441\u043b\u0435 4 \u043f\u0443\u043d\u043a\u0442\u0430 \u043c\u044b \u0435\u0449\u0451 \u043f\u0440\u043e\u0433\u043e\u043d\u0438\u043c \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 babel \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438. \u0418 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/@babel\/core\">@babel\/core<\/a>&nbsp;, \u0430 \u0442\u0430\u043a \u0436\u0435&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/@babel\/preset-env\">@babel\/preset-env<\/a>. \u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438, \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b&nbsp;<code>.babelrc<\/code>&nbsp;, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u043f\u0440\u0435\u0441\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a Babel \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"presets\": &#91;\"@babel\/preset-env\"]\n}<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0444\u0430\u0439\u043b\u043e\u0432 \u0437\u0430\u0434\u0430\u0447. \u041e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0445\u043e\u0436\u0438 \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u043b\u0438\u0448\u044c \u0432 \u0437\u0430\u0434\u0430\u0447\u0435 build, \u043a\u0430\u043a \u044f \u0443\u0436\u0435 \u043f\u0438\u0441\u0430\u043b \u0432\u044b\u0448\u0435.\u0424\u0430\u0439\u043b tasks\/dev_js.js\u0424\u0430\u0439\u043b tasks\/libs_js.js\u0424\u0430\u0439\u043b tasks\/build__js.js<\/p>\n\n\n\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c, \u0442\u0443\u0442 \u0435\u0441\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0444\u0430\u0439\u043b&nbsp;<code>src\/js\/01_main.js<\/code>&nbsp;\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0435\u0433\u043e \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438&nbsp;<code>src\/js<\/code>.<\/p>\n\n\n\n<p>\u0422\u0430\u043a \u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u0435\u0449\u0451 \u043f\u0430\u0440\u0443 \u043c\u0435\u043b\u043a\u0438\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439.&nbsp;<em>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445,<\/em>&nbsp;\u043a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 gulp-uglify-es \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u0440\u0430\u0437\u0443 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c) default:&nbsp;<code>const&nbsp;uglify&nbsp;=&nbsp;require('gulp-uglify-es').default<\/code>&nbsp;&#8211; \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435 \u043a\u0430\u043a\u043e\u0433\u043e-\u043b\u0438\u0431\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043b\u0430\u0433\u0438\u043d\u0430. \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443. \u0412\u044b-\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0440\u044b\u0442\u044c\u0441\u044f \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043a \u043f\u043b\u0430\u0433\u0438\u043d\u0443 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435.&nbsp;<em>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445<\/em>, \u0432 build-\u0437\u0430\u0434\u0430\u0447\u0435 \u044f \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b sourcemaps, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u0438 \u0442\u0430\u043c \u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b. \u042d\u0442\u0430 \u043a\u0430\u0440\u0442\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u043a\u043e\u0434\u0430 \u0432 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u043c \u0444\u0430\u0439\u043b\u0435.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2>\u0417\u0430\u0434\u0430\u0447\u0438 \u0434\u043b\u044f HTML\/PHP<\/h2>\n\n\n\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u044d\u0442\u0430\u043f\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 HTML \u0438\u043b\u0438 PHP, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043d\u0430 \u0447\u0451\u043c \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435. \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a&nbsp;<a href=\"https:\/\/pugjs.org\/api\/getting-started.html\">Pug<\/a>&nbsp;\u0438\u043b\u0438&nbsp;<a href=\"https:\/\/mozilla.github.io\/nunjucks\/\">Nunjucks<\/a>&nbsp;\u043f\u043e \u0442\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435, \u0447\u0442\u043e \u0441 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c Emmet \u043e\u043d\u0438 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b\u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u044f\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 HTML, \u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u043c\u044b \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c:&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-file-include\">gulp-file-include<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043c\u0435\u0435\u0442, \u043a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u043d\u0435\u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0435 &#8211; \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435&nbsp;<strong>\u043b\u044e\u0431\u044b\u0445<\/strong>&nbsp;\u0444\u0430\u0439\u043b\u043e\u0432 \u0432&nbsp;<strong>\u043b\u044e\u0431\u044b\u0435<\/strong>&nbsp;\u0444\u0430\u0439\u043b\u044b. \u0414\u0430\u043b\u0435\u0435, \u0432\u044b \u043f\u043e\u0439\u043c\u0451\u0442\u0435, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u0441\u0447\u0438\u0442\u0430\u044e \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u044b\u043c. \u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 PHP \u044d\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0422\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c require \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 PHP \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0432\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430\u043c\u0438 &#8211; \u0432\u044b \u043b\u0435\u0433\u043a\u043e \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Gulp \u0434\u043b\u044f \u0438\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u044f \u0441\u0447\u0438\u0442\u0430\u044e.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 HTML \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-htmlmin\">gulp-htmlmin<\/a>, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0435\u0433\u043e \u0432 \u0432\u0438\u0434\u0435&nbsp;<code>.pipe(htmlmin({&nbsp;collapseWhitespace:&nbsp;true&nbsp;}))<\/code>&nbsp;\u0432 \u0441\u0432\u043e\u044e \u0437\u0430\u0434\u0430\u0447\u0443 html. \u041e\u0434\u043d\u0430\u043a\u043e, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430, \u0432\u0451\u0440\u0441\u0442\u043a\u0430 &#8211; \u043d\u0435 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u044d\u0442\u0430\u043f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 90% \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0435\u0433\u043e \u0432 \u0441\u0431\u043e\u0440\u043a\u0443 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443. \u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0437\u0430\u0434\u0430\u0447\u0443 \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0435\u0439 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438.<\/p>\n\n\n\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c gulp-file-include \u0438 \u043f\u0438\u0448\u0435\u043c \u0437\u0430\u0434\u0430\u0447\u0443 \u0434\u043b\u044f html:\u0424\u0430\u0439\u043b tasks\/html.js<\/p>\n\n\n\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u044b \u0443\u0432\u0438\u0434\u0435\u043b\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u043e\u0432\u0443\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e. \u0412 src \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u043b \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0434\u0438\u043d \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438 \u0432\u043e\u0441\u043a\u043b\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0437\u043d\u0430\u043a\u043e\u043c(!) \u0432 \u043d\u0430\u0447\u0430\u043b\u0435. \u042d\u0442\u043e \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 JavaScript \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 &#8220;<strong>\u043d\u0435<\/strong>&#8220;. \u0422\u043e \u0435\u0441\u0442\u044c \u043c\u044b \u0431\u0435\u0440\u0451\u043c \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b html&nbsp;<code>'src\/**\/*.html'<\/code>, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435&nbsp;<code>'<\/code>!src\/components\/**\/*.html<code>'<\/code>&nbsp;\u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 src\/components. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0432 build \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e, \u0430 \u0441\u043b\u0443\u0436\u0430\u0442, \u0442\u0430\u043a \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u043c\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438. \u041e\u0431 \u044d\u0442\u0438\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043d\u0438\u0436\u0435.<\/p>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0434\u043b\u044f php. \u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0442\u0430\u043a\u0443\u044e \u0436\u0435, \u043e\u0434\u0438\u043d \u0432 \u043e\u0434\u0438\u043d., \u043a\u0440\u043e\u043c\u0435 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0439. \u041e\u043d\u0438 \u043d\u0430\u043c \u0432 \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f.\u0424\u0430\u0439\u043b tasks\/php.js<\/p>\n\n\n\n<h2>\u0417\u0430\u0434\u0430\u0447\u0438 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/h2>\n\n\n\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0451 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u041d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0434\u0432\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u043b\u044f svg, \u0434\u0432\u0435 \u0434\u043b\u044f \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0427\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e:<\/p>\n\n\n\n<ol><li>\u0421\u0436\u0438\u043c\u0430\u0442\u044c \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/li><li>\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 webp.<\/li><li>\u041e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c svg \u0432 \u0441\u043f\u0440\u0430\u0439\u0442.<\/li><li>\u0412\u043a\u043b\u044e\u0447\u0430\u0442\u044c svg \u0432 \u0432\u0438\u0434\u0435 \u043a\u043b\u0430\u0441\u0430 \u0441 \u0444\u043e\u043d\u043e\u043c \u0432 CSS \u0438 c\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u043b\u044f svg \u043a\u043b\u0430\u0441\u0441 \u0441 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438&nbsp;<code>::after<\/code>&nbsp;\u0438&nbsp;<code>::before<\/code><\/li><\/ol>\n\n\n\n<p>\u042d\u0442\u043e \u0432\u0441\u0451 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438 \u0438 \u0442\u0443\u0442 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u043e\u043d\u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432! \u0418\u0445 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e, \u0447\u0442\u043e \u044f \u0440\u0435\u0448\u0438\u043b \u043e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0438\u0445 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0438 \u0443\u0431\u0440\u0430\u0442\u044c \u043f\u043e\u0434 \u0441\u043f\u043e\u0439\u043b\u0435\u0440.\u041f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/p>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u0434 \u0432\u0441\u0451 \u044d\u0442\u043e \u0444\u0430\u0439\u043b\u044b \u0437\u0430\u0434\u0430\u0447:&nbsp;<code>tasks\/rastr.js<\/code>,&nbsp;<code>tasks\/webp.js<\/code>,&nbsp;<code>tasks\/svg_css.js<\/code>&nbsp;\u0438&nbsp;<code>tasks\/svg_sprite.js<\/code>. \u0421\u0430\u043c\u0430\u044f \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u043b\u044f \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0432\u0432\u0438\u0434\u0443 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0442\u0430\u043c \u043c\u043d\u043e\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u0434\u043b\u044f \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0430\u043d\u0438\u0439 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0443\u0436\u043d\u0430&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/422531\/\">\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f<\/a>. \u0417\u0434\u0435\u0441\u044c \u044f \u0434\u0435\u0442\u0430\u043b\u0438 \u0432\u0441\u0435\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443.&nbsp;<em>Just belive me<\/em>, \u0447\u0442\u043e \u044f \u0434\u043e\u043b\u0433\u043e \u0441\u0438\u0434\u0435\u043b \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u043b \u044d\u0442\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0441\u0438\u043b\u044c\u043d\u043e \u0441\u043d\u0438\u0436\u0430\u043b\u043e \u0442\u0440\u0430\u0444\u0438\u043a \u0438 \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0440\u0435\u0437\u0430\u043b\u043e \u0433\u043b\u0430\u0437. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043c\u043e\u043d\u0441\u0442\u0440:tasks\/rastr.js<\/p>\n\n\n\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435 \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b\u0438 \u0444\u0438\u043b\u044c\u0442\u0440 \u043f\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f\u043c \u0444\u0430\u0439\u043b\u043e\u0432 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f:&nbsp;<code>src('src\/img\/**\/*.+(png|jpg|jpeg|gif|svg|ico)')<\/code>. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u044f\u043c\u043e\u0439 \u0441\u043b\u0435\u0448 (\u0437\u043d\u0430\u043a&nbsp;<code>|<\/code>) \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e &#8220;\u0438\u043b\u0438&#8221;. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u0440\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0431\u0435\u0440\u0435\u0442 \u0444\u0430\u0439\u043b\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f\u043c\u0438, \u0430 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442. \u0422\u0430\u043a \u0436\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e gulp-changed \u043c\u044b \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u0442\u0430\u0440\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 &#8211; \u044d\u0442\u043e \u0443\u0441\u043a\u043e\u0440\u0438\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0436\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u043e \u043e\u0448\u0438\u0431\u043a\u0443, \u0435\u0441\u043b\u0438 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u043d\u0435\u0442 &#8211; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-plumber\">gulp-plumber<\/a>.<\/p>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c webp-\u0434\u0443\u0431\u043b\u0438\u043a\u0430\u0442\u044b \u044d\u0442\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u042d\u0442\u0438 \u0434\u0443\u0431\u043b\u0438\u043a\u0430\u0442\u044b \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e src, \u0438 \u0432 build, \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b path-intellisense \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u043d\u0430\u043c \u043f\u0443\u0442\u0438 \u043a \u043d\u0438\u043c.tasks\/webp.js<\/p>\n\n\n\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u044d\u0442\u0430\u043f &#8211; \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 SVG. \u0417\u0434\u0435\u0441\u044c \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0435 \u0437\u0430\u0434\u0430\u0447\u0438: \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 svg \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0444\u043e\u043d\u043e\u043c \u043f\u0440\u044f\u043c\u043e \u0432 css \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 svg-\u0441\u043f\u0440\u0430\u0439\u0442\u0430. \u0423 \u044d\u0442\u0438\u0445 \u0437\u0430\u0434\u0430\u0447, \u0445\u043e\u0442\u044c \u0438 \u043f\u043e\u0445\u043e\u0436\u0435\u0435, \u043d\u043e \u0432\u0441\u0451-\u0436\u0435 \u0440\u0430\u0437\u043d\u043e\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u042f \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435 \u0431\u0443\u0434\u0443 \u0432\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u0438 \u043d\u0435 \u043f\u0440\u0435\u0434\u043c\u0435\u0442 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0437\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u043d\u044b svg-\u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0438 \u043a\u0430\u043a \u044d\u0442\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0442\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u0438\u0441\u0430\u043b\u0438&nbsp;<a href=\"https:\/\/habr.com\/ru\/sandbox\/125438\/\">\u0442\u0443\u0442<\/a>&nbsp;\u0438&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/272505\/\">\u0442\u0443\u0442<\/a>. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u043d\u0443\u0436\u043d\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0437\u0430\u0434\u0430\u0447.<\/p>\n\n\n\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448 svg \u043e\u0442 \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u043d\u0435\u0433\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-svgmin\">gulp-svgmin<\/a>.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f svg \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 background-image \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-svg-css-pseudo\">gulp-svg-css-pseudo<\/a>. \u0422\u043e\u0447\u043d\u0435\u0435 \u044d\u0442\u043e \u0444\u043e\u0440\u043a \u043f\u043b\u0430\u0433\u0438\u043d\u0430&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-svg-css\">gulp-svg-css<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0430\u0432\u0442\u043e\u0440\u044b \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043c\u043e\u0439 \u043f\u0440\u043e\u043f\u043e\u0443\u0437 \u0432 \u0441\u0432\u043e\u0439 \u043f\u043b\u0430\u0433\u0438\u043d. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b&nbsp;<code>::before<\/code>&nbsp;\u0438&nbsp;<code>::after.<\/code>&nbsp;\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d, \u043d\u043e \u043e\u043d \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u041d\u0430 \u0432\u0445\u043e\u0434\u0435 \u043c\u044b \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043a\u043b\u0430\u0434\u0451\u043c \u0444\u0430\u0439\u043b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 myicon.svg, \u0430 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u044b&nbsp;<code>--svg__myicon<\/code>,&nbsp;<code>--svg__myicon-before<\/code>&nbsp;\u0438&nbsp;<code>--svg__myicon-after<\/code>, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 background-image \u0443\u0436\u0435 \u0437\u0430\u0434\u0430\u043d \u0432 \u0432\u0438\u0434\u0435 \u043d\u0430\u0448\u0435\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u0443\u0434\u043e\u0431\u043d\u043e, \u0435\u0441\u043b\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c (\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0432\u0435\u0442):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.--svg__myicon,.--svg__myicon-before::before,.--svg__myicon-after::after{\n    background-image: url(\"data:image\/svg+xml;charset=utf8, %3Csvg width='8' height='6' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M.228 1.635A1 1 0 011 0h6a1 1 0 01.772 1.635L4.808 5.589a.999.999 0 01-1.616 0L.228 1.635z' fill='%232C2D2E'\/%3E%3C\/svg%3E\");\n}\n.--svg__myicon-before::before {\n    content:'';\n}\n.--svg__myicon-after::after {\n    content:'';\n}<\/code><\/pre>\n\n\n\n<p>\u0418 \u0442\u0430\u043a, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0431\u0440\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0438\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 src\/svg\/css \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438\u043c\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438, \u043f\u043e\u043b\u0443\u0447\u0430\u044f \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0444\u0430\u0439\u043b svg.scss \u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u043c \u0435\u0433\u043e \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e src\/scss\/base. \u041f\u043e\u043b\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:tasks\/svg_css.js<\/p>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0437\u0430\u0434\u0430\u0447\u0443 \u0434\u043b\u044f svg-\u0441\u043f\u0440\u0430\u0439\u0442\u0430. \u0421\u043c\u044b\u0441\u043b \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 svg \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0430\u0431\u043e\u0440 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. \u041a \u044d\u0442\u0438\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043f\u043e ID \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u0432 \u043d\u0443\u0436\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0446\u0432\u0435\u0442) \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 css. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u043b\u0430\u0433\u0438\u043d&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-svg-sprite\">gulp-svg-sprite<\/a>&nbsp;\u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u0434 \u043d\u0435\u0433\u043e \u0432\u043e\u0442 \u0442\u0430\u043a\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443:tasks\/svg_sprite.js<\/p>\n\n\n\n<p>\u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0444\u0430\u0439\u043b src\/img\/sprite.svg \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 svg. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u043d\u0438\u043c \u0432 html \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a:&nbsp;<code>&lt;img src=\"sprite.svg#myIconFileName\"&gt;<\/code>&nbsp;\u0438\u043b\u0438 \u0442\u0430\u043a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg class=\"img\"&gt;\n    &lt;use xlink:href=\"sprite.svg#myIconFileName\"&gt;&lt;\/use&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0436\u0435 \u0438\u043a\u043e\u043d\u043a\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u0432\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u043a \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 css), \u0442\u043e \u043f\u0435\u0440\u0435\u0434 \u0438\u043c\u0435\u043d\u0435\u043c \u0444\u0430\u0439\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0438\u043c\u044f \u044d\u0442\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0438 \u0434\u0432\u0430 \u0434\u0435\u0444\u0438\u0441\u0430. \u0412\u043e\u0442 \u0442\u0430\u043a:&nbsp;<code>&lt;img src=\"sprite.svg#css--myIconFileName\"&gt;<\/code><\/p>\n\n\n\n<p>\u0427\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u043f\u043e\u043a\u0430\u0436\u0443 \u0435\u0449\u0451 \u0438 \u0442\u0440\u0435\u0442\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c svg \u0432 html \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0431\u043e\u0440\u043a\u0438. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0438\u043b\u0438 \u0438\u0445 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0437\u0430\u0434\u0430\u0447, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2>\u0417\u0430\u0434\u0430\u0447\u0438 \u0434\u043b\u044f \u0448\u0440\u0438\u0444\u0442\u043e\u0432<\/h2>\n\n\n\n<p>\u0417\u0434\u0435\u0441\u044c \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0435 \u0437\u0430\u0434\u0430\u0447\u0438. \u041f\u0435\u0440\u0432\u0430\u044f \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u043d\u0430 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044e \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438\u0437 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 ttf \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u044b woff \u0438 woff2. \u0412\u043e \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445 \u0432 2021 \u0433\u043e\u0434\u0443 \u043d\u0435 \u0432\u0438\u0436\u0443 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 woff \u043f\u0440\u043e\u0441\u0442\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0430\u0436 \u0434\u043e Internet Explorer 9. \u0414\u0430\u0432\u043d\u043e \u043b\u0438 \u0432\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u044b \u0441 IE9 \u043d\u0430 \u0431\u043e\u0440\u0442\u0443? \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u043b\u0432\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0432\u0443\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432:&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-ttftowoff2\">gulp-ttftowoff2<\/a>&nbsp;\u0438&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/gulp-ttf2woff\">gulp-ttf2woff<\/a>, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u0424\u0430\u0439\u043b \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u043b\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:tasks\/ttf.js<\/p>\n\n\n\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0448\u0440\u0438\u0444\u0442\u044b \u0441\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0445 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c. \u042f \u0442\u0430\u043a \u0438 \u043d\u0435 \u0441\u043c\u043e\u0433 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0438\u0445 \u043f\u043e \u0436\u0438\u0440\u043d\u043e\u0441\u0442\u0438 \u0438 \u0441\u0442\u0438\u043b\u044e \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0438\u043c\u0435\u043d\u0438 \u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u043c\u0435\u043d\u0438. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u0432\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u043e\u0438\u0438&nbsp;<code>src\/scss\/base<\/code>&nbsp;\u0444\u0430\u0439\u043b&nbsp;<code>_mixins.scss<\/code>. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c, \u043e\u043d \u043d\u0430\u043c \u0435\u0449\u0451 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0438 \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0432 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u0438\u043a\u0441\u0438\u043d:src\/scss\/base\/_mixins.scss<\/p>\n\n\n\n<p>\u0412 \u044d\u0442\u043e\u0442 \u043c\u0438\u043a\u0441\u0438\u043d \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b:<\/p>\n\n\n\n<ul><li><code>$name<\/code>&nbsp;&#8211; \u0438\u043c\u044f \u0448\u0440\u0438\u0444\u0442\u043e\u0432\u043e\u0433\u043e \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u0430;<\/li><li><code>$file<\/code>&nbsp;&#8211; \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430;<\/li><li><code>$weight<\/code>&nbsp;&#8211; \u0436\u0438\u0440\u043d\u043e\u0441\u0442\u044c \u0448\u0440\u0438\u0444\u0442\u0430 (\u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 400, \u043d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e)<\/li><li><code>$style<\/code>&nbsp;&#8211; \u0441\u0442\u0438\u043b\u044c \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f (\u0442\u043e\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e normal)<\/li><\/ul>\n\n\n\n<p>\u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0443\u0436\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0448\u0440\u0438\u0444\u0442\u0430, \u043d\u043e \u0441 \u043d\u0438\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043e\u043f\u0438\u0448\u0443 \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435.<\/p>\n\n\n\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u0448\u0440\u0438\u0444\u0442\u044b. \u041f\u043e \u0441\u0443\u0442\u0438 \u044d\u0442\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0431\u0443\u0434\u0435\u0442 \u0446\u0438\u043a\u043b\u043e\u043c \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043f\u043e \u0444\u0430\u0439\u043b\u0430\u043c, \u0431\u0440\u0430\u0442\u044c \u0438\u043c\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430, \u043e\u0442\u0441\u0435\u043a\u0430\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u043c\u0435\u043d\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0434\u043b\u044f \u0435\u0433\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 \u043c\u0438\u043a\u0441\u0438\u043d. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0443\u043b\u044c nodeJS \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f fs. \u041e\u043d \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 nodejs, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 &#8211; \u043d\u0443\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c:&nbsp;<code>const&nbsp;fs&nbsp;=&nbsp;require('fs');<\/code><\/p>\n\n\n\n<p>\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u0437\u0430\u043f\u0438\u0448\u0435\u043c, \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435, \u0430 \u0432\u043e \u0432\u0442\u043e\u0440\u0443\u044e &#8211; \u043f\u0443\u0442\u044c \u043a \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u043b\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let srcFonts = 'src\/scss\/_local-fonts.scss';\nlet appFonts = 'build\/fonts\/';<\/code><\/pre>\n\n\n\n<p>\u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0439 \u043a\u043e\u0434 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u044f \u0447\u0435\u0441\u0442\u043d\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043b \u0443&nbsp;<a href=\"https:\/\/www.youtube.com\/c\/maxgraph\/featured\">\u041c\u0430\u043a\u0441\u0438\u043c\u0430 \u0412\u0430\u0441\u044f\u043d\u043e\u0432\u0438\u0447\u0430<\/a>&nbsp;(&nbsp;<a href=\"https:\/\/habr.com\/users\/maxgraph\">@MaxGraph<\/a>&nbsp;), \u0441 \u0435\u0433\u043e&nbsp;<a href=\"https:\/\/github.com\/maxdenaro\/maxgraph-youtube-source\/tree\/master\/Gulp%204.%20%D0%9F%D0%BE%D0%B4%D1%80%D0%BE%D0%B1%D0%BD%D0%BE%D0%B5%20%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE\">\u0443\u0440\u043e\u043a\u0430 \u043f\u0440\u043e Gulp<\/a>&nbsp;\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043b. \u0412 \u0438\u0442\u043e\u0433\u0435, \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f:tasks\/fonts.js<\/p>\n\n\n\n<p>\u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043d\u0430\u043c \u0444\u0430\u0439\u043b&nbsp;<code>src\/scss\/_local-fonts.scss<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u0432\u044b\u0437\u043e\u0432 \u043c\u0438\u043a\u0441\u0438\u043d\u0430 \u0434\u043b\u044f \u0435\u0433\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f. \u0422\u0430\u043a \u0436\u0435, \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Added new font: YoyrFont.\n----------------------------------------------------------------------------------\nPlease, move mixin call from src\/scss\/_local-fonts.scss to src\/scss\/_fonts.scss and then change it.\n----------------------------------------------------------------------------------<\/code><\/pre>\n\n\n\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435: &#8220;\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043d\u043e\u0432\u044b\u0439 \u0448\u0440\u0438\u0444\u0442:&nbsp;<em>\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u0448\u0440\u0438\u0444\u0442\u0430.&nbsp;<\/em>\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u0435 \u0432\u044b\u0437\u043e\u0432 \u043c\u0438\u043a\u0441\u0438\u043d\u0430 \u0438\u0437&nbsp;<code>src\/scss\/_local-fonts.scss<\/code>&nbsp;\u0432&nbsp;<code>src\/scss\/_fonts.scss<\/code>\u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u0435\u0433\u043e<em>&#8220;.&nbsp;<\/em>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f, \u0447\u0442\u043e \u043a\u0443\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0438 \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c. \u041d\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u0444\u0430\u0439\u043b&nbsp;<code>src\/scss\/_fonts.scss<\/code>&nbsp;&#8211; \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0443\u0436\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u043c\u0438\u043a\u0441\u0438\u043d\u0430 \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0438 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n\n\n\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0448\u0440\u0438\u0444\u0442\u044b, \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u043e\u0439 \u0436\u0438\u0440\u043d\u043e\u0441\u0442\u0438 \u0448\u0440\u0438\u0444\u0442\u0430 \u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f (\u043d\u0430\u043a\u043b\u043e\u043d\u043d\u044b\u0435 \u0438 \u043f\u0440\u044f\u043c\u044b\u0435, \u0442\u043e\u043d\u043a\u0438\u0435 \u0438 \u0436\u0438\u0440\u043d\u044b\u0435 \u0438 \u0442.\u043f.). \u041a\u0430\u0436\u0434\u044b\u0439 \u0442\u0430\u043a\u043e\u0439 \u0444\u0430\u0439\u043b \u0448\u0440\u0438\u0444\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u043c\u0438\u043a\u0441\u0438\u043d\u0430 \u0438 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0444\u0430\u0439\u043b&nbsp;<code>src\/scss\/_local-fonts.scss<\/code>\u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@include font-face(\"Arial\", \"Arial\", 400);\n@include font-face(\"ArialBold\", \"ArialBold\", 400);\n@include font-face(\"ArialItalic\", \"ArialItalic\", 400);<\/code><\/pre>\n\n\n\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c, \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0448\u0440\u0438\u0444\u0442\u044b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438. \u042d\u0442\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0448\u0440\u0438\u0444\u0442\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c font-weight: 700, \u043d\u0430\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c font-family: &#8220;ArialBold&#8221;. \u042d\u0442\u043e \u043f\u043b\u043e\u0445\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u0438 \u0432\u044b\u0437\u043e\u0432\u044b. \u041a\u0430\u043a \u043f\u043e\u043c\u043d\u0438\u043c \u0438\u0437 \u043c\u0438\u043a\u0441\u0438\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438, \u043f\u0435\u0440\u0432\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0438\u043c\u044f \u0448\u0440\u0438\u0444\u0442\u043e\u0432\u043e\u0433\u043e \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u0430. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e &#8220;Arial&#8221;. \u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043c\u044b \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u043c &#8211; \u044d\u0442\u043e \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0431\u0435\u0437 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f (\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u0442 \u043c\u0438\u043a\u0441\u0438\u043d). \u0422\u0440\u0435\u0442\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0436\u0438\u0440\u043d\u043e\u0441\u0442\u044c. \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 400 \u043d\u0430 700. \u0427\u0435\u0442\u0432\u0451\u0440\u0442\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d, \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u0442\u0438\u043b\u044c \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f. \u0412 \u0442\u0440\u0435\u0442\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u043c\u0438\u043a\u0441\u0438\u043d \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043d\u0430\u043a\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0447\u0435\u0442\u0432\u0451\u0440\u0442\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u044d\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@include font-face(\"Arial\", \"Arial\", 400);\n@include font-face(\"Arial\", \"ArialBold\", 700);\n@include font-face(\"Arial\", \"ArialItalic\", 400, italic);<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u043e \u0432\u0441\u0451 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u0444\u0430\u0439\u043b&nbsp;<code>src\/scss\/_fonts.scss<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e,&nbsp;<strong>\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c<\/strong>. \u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u043e \u0432 \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b \u043f\u043e \u0442\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435, \u0447\u0442\u043e \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0448\u0435\u0442 \u0444\u0430\u0439\u043b&nbsp;<code>src\/scss\/_local-fonts.scss<\/code>&nbsp;\u0438 \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0442\u0440\u0443\u0442\u0441\u044f.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432<\/h2>\n\n\n\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Gulp \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u043b \u0435\u0433\u043e \u043f\u0440\u0438 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445. \u042f \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/browser-sync\">browser-sync<\/a>. \u042d\u0442\u043e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 nodejs \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043a \u043d\u0435\u043c\u0443 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b. \u0414\u043b\u044f \u043d\u0435\u0433\u043e \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 &#8211; \u0434\u043b\u044f html-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0434\u043b\u044f php \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u044d\u0442\u043e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0432\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0444\u0430\u0439\u043b\u0430 \u0437\u0430\u0434\u0430\u0447. \u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043c\u044b \u0443\u043a\u0430\u0436\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 html.tasks\/bs_html.js<\/p>\n\n\n\n<p>\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 host \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 IP-\u0430\u0434\u0440\u0435\u0441 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u0430\u0439\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u0441\u0435\u0442\u0438. \u0412\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0442\u0430\u043c \u0431\u044b\u043b \u0443\u043a\u0430\u0437\u0430\u043d \u0438\u043c\u0435\u043d\u043d\u043e&nbsp;<strong>IP-\u0430\u0434\u0440\u0435\u0441 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430<\/strong>&nbsp;\u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0435\u0442\u0438, \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u043c\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c\u043e\u043c\u0443 \u0441\u0430\u0439\u0442\u0443 \u0441\u043e \u0432\u0441\u0435\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. \u041a\u043e\u043b\u043b\u0431\u044d\u043a-\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b 404, \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0435\u0441\u0442\u044c \u0438 \u0435\u0441\u043b\u0438 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u0430 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c\u0430\u044f (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044d\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 index.html). \u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432\u044b \u0432\u043e\u043b\u044c\u043d\u044b \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0432\u0430\u0448\u0435\u0439 \u0434\u0443\u0448\u0435 \u0443\u0433\u043e\u0434\u043d\u043e, \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/p>\n\n\n\n<p>\u0414\u043b\u044f php \u043c\u044b \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443. \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0412\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b: openserver, wamp \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439.tasks\/bs_php.js<\/p>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u0440\u0430\u043d\u0435\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 browser-sync \u0438 pipe \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438. \u041a\u0430\u043a \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c &#8211; \u0432\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u0442\u0435: \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0434\u0440 \u0443\u0433\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b. \u0410 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c pipe \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0448\u0438\u0439:&nbsp;<code>.pipe(bs.stream())<\/code>.<\/p>\n\n\n\n<p>\u041f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 html, scss \u0438 js, php, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0432 \u044d\u0442\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u044f \u0443\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043d\u0443\u0436\u043d\u044b\u0439 pipe.\u041e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e!<\/p>\n\n\n\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u0432\u043e\u0442\u0447\u0438\u043d\u0433\u0430. \u0412\u043e\u0442\u0447\u0438\u043d\u0433 &#8211; \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u044f \u043d\u0430\u0448\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u0430, \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u0438 \u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0442\u0435 \u0438\u043b\u0438 \u0438\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0435\u0441\u043b\u0438 \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c. \u0418 \u0442\u0430\u043a, \u0437\u0430 \u0447\u0435\u043c \u0431\u0443\u0434\u0435\u043c \u0441\u043b\u0435\u0434\u0438\u0442\u044c: html, php, scss, js, json (\u043d\u0438\u0436\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u044e, \u0434\u043b\u044f \u0447\u0435\u0433\u043e), \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 src, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 build (\u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 webp \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438\u0437 \u0443\u0436\u0435 \u0441\u0436\u0430\u0442\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439?), svg, \u0448\u0440\u0438\u0444\u0442\u044b. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443:tasks\/watch.js<\/p>\n\n\n\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447 &#8211; parallel \u0438 series. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0443, \u0430 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c &#8211; \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043e\u0434\u043d\u0430 \u0437\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0432 \u0442\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438.<\/p>\n\n\n\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0438\u043c\u044f \u043d\u0430\u0448\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f watch \u0443\u0436\u0435 \u0437\u0430\u043d\u044f\u0442\u0430 \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0433\u0430\u043b\u043f\u0430, \u043c\u044b \u043d\u0430\u0437\u0432\u0430\u043b\u0438 \u0441\u0432\u043e\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0430\u0447\u0435.<\/p>\n\n\n\n<p>\u0412\u043e\u0442 \u0438 \u0432\u0441\u0451. \u041c\u044b \u043d\u0430\u0443\u0447\u0438\u043b\u0438 Gulp \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0442\u0435 \u0438\u043b\u0438 \u0438\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2>\u0414\u0435\u043f\u043b\u043e\u0439 \u043d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u043f\u043e FTP<\/h2>\n\n\n\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0438 \u043f\u043b\u0430\u0433\u0438\u043d. \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/vinyl-ftp\">vinyl-ftp<\/a>, \u0445\u043e\u0442\u044f \u0435\u0441\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438, \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0434\u0435\u043b\u0430\u044e\u0449\u0438\u0435 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0433\u043e \u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0437\u0430\u0434\u0430\u0447\u0443. \u041d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0431\u0443\u0434\u0435\u043c \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e&nbsp;<code>build\/<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0433\u043e\u0442\u043e\u0432\u044b\u0435, \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0414\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u0442 \u0436\u0435 chalk.tasks\/deploy.js<\/p>\n\n\n\n<p>\u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430&nbsp;<code>connect<\/code>&nbsp;&#8211; \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0430 &#8211; \u0430\u0434\u0440\u0435\u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043b\u043e\u0433\u0438\u043d, \u043f\u0430\u0440\u043e\u043b\u044c.&nbsp;<strong>\u0411\u0443\u0434\u044c\u0442\u0435 \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u044b, \u0432\u044b\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 Github<\/strong>&nbsp;\u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u043a\u043e\u0434\u0430. \u042f \u0441\u043e\u0437\u0434\u0430\u043b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b tasks\/ftp_settings.json \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0438 \u0440<strong>\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0432\u0430\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0432 gitignore<\/strong>, \u0447\u0442\u043e\u0431\u044b \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u0438 \u043d\u0435 \u0432\u044b\u0432\u0430\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u043b\u043e\u0433\u0438\u043d \u0438 \u043f\u0430\u0440\u043e\u043b\u044c \u043a \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0443 \u043d\u0430 \u0432\u0435\u0441\u044c \u043c\u0438\u0440:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"host\": \"yourhosting.com\",\n\t\"user\": \"username\",\n\t\"pass\": \"*********\",\n\t\"parallel\": 10\n}<\/code><\/pre>\n\n\n\n<p>\u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0442\u0430\u043a \u0436\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043d\u0430 ftp-\u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0432\u043c\u0435\u0441\u0442\u043e&nbsp;<code>public_html\/<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0430 \u0432 \u043c\u043e\u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 newer \u0438 dest.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2>\u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 GULP- \u0438 NPM-\u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432<\/h2>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e gulp-\u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u043e\u0447\u0435\u0440\u0451\u0434\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u043e\u0435\u0434\u0438\u043d\u043e \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0435 gulp-\u0437\u0430\u0434\u0430\u0447\u0438: default \u0438 php, \u0441 \u0442\u043e\u0439 \u043b\u0438\u0448\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0435\u0439, \u0447\u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440, \u0430 \u0442\u0430\u043a \u0436\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432 npm \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0434\u043b\u044f \u0434\u0435\u043f\u043b\u043e\u044f \u043d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 gulpfile.js, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 gulp. \u0414\u0435\u043b\u0430\u0442\u044c \u043c\u044b \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 hello:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>exports.style = tasks.style;\nexports.libs_style = tasks.libs_style;\nexports.build_js = tasks.build_js;\nexports.libs_js = tasks.libs_js;\nexports.dev_js = tasks.dev_js;\nexports.html = tasks.html;\nexports.php = tasks.php;\nexports.rastr = tasks.rastr;\nexports.webp = tasks.webp;\nexports.svg_css = tasks.svg_css;\nexports.svg_sprite = tasks.svg_sprite;\nexports.ttf = tasks.ttf;\nexports.fonts = tasks.fonts;\nexports.bs_html = tasks.bs_html;\nexports.bs_php = tasks.bs_php;\nexports.watch = tasks.watch;\nexports.deploy = tasks.deploy;<\/code><\/pre>\n\n\n\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 Gulp \u0441 \u0442\u0435\u043c\u0438 \u0438\u043b\u0438 \u0438\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438:\u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0434\u043b\u044f html (\u043e\u043d \u0436\u0435 &#8211; \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e)\u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0434\u043b\u044f php<\/p>\n\n\n\n<p>\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 gulpfile.js \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:gulpfile.js<\/p>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u0432 \u0444\u0430\u0439\u043b package.json \u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e npm-\u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443. \u0412 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 &#8220;scripts&#8221; \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u043a\u043b\u044e\u0447-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u043c\u044f \u0438 \u043d\u0430\u0431\u043e\u0440\u044b \u0437\u0430\u0434\u0430\u0447 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430. \u042f \u0441\u0434\u0435\u043b\u0430\u044e \u043f\u044f\u0442\u044c \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  \"scripts\": {\n    \"html\": \"gulp\",\n    \"php\": \"gulp dev_php\",\n    \"build\": \"gulp libs_style &amp;&amp; gulp svg_css &amp;&amp; gulp ttf &amp;&amp; gulp fonts &amp;&amp; gulp style &amp;&amp; gulp libs_js &amp;&amp; gulp build_js &amp;&amp; gulp rastr &amp;&amp; gulp webp &amp;&amp; gulp svg_sprite &amp;&amp; gulp html &amp;&amp; gulp php\",\n    \"ftp\": \"gulp deploy\",\n    \"build-ftp\": \"npm run build &amp;&amp; npm run ftp\"\n  },<\/code><\/pre>\n\n\n\n<ul><li><strong>html<\/strong>&nbsp;\u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c Gulp \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 html-\u0432\u0435\u0440\u0441\u0438\u0438;<\/li><li><strong>php<\/strong>&nbsp;\u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c Gulp \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 php-\u0432\u0435\u0440\u0441\u0438\u0438;<\/li><li><strong>build<\/strong>&nbsp;\u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043e\u0447\u0435\u0440\u0451\u0434\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 build \u0431\u0435\u0437 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432\u043e\u0442\u0447\u0438\u043d\u0433\u0430 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430;<\/li><li><strong>ftp<\/strong>&nbsp;\u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 build \u043a\u0440\u043e\u043c\u0435 \u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0445 \u043a\u0430\u0440\u0442 (\u0444\u0430\u0439\u043b\u044b \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c .map) \u043d\u0430 ftp-\u0441\u0435\u0440\u0432\u0435\u0440;<\/li><li><strong>build-ftp<\/strong>&nbsp;\u043f\u043e\u043e\u0447\u0435\u0440\u0451\u0434\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 build \u0438 ftp \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432<\/h2>\n\n\n\n<p>\u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b html, \u043a\u043e\u0435-\u043a\u0430\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u041d\u0430\u0447\u043d\u0451\u043c \u0441 html. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u043d\u044b\u0439 \u0444\u0430\u0439\u043b (index.html) \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n\t&lt;meta charset=\"UTF-8\"&gt;\n\t&lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\n\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\t&lt;title&gt;Document&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;main&gt;\n    \n  &lt;\/main&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443\u0431\u0435\u0440\u0451\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u043e, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445:src\/components\/page-blocks\/_head.html<\/p>\n\n\n\n<p>&#8230;\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e head \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n@@include('components\/page-blocks\/_head.html',{\n\"lang\":\"en\",\n\"title\":\"Easy-webdev-startpack v3.0\",\n\"description\":\"Gulp pack for easy html\/php markup development\",\n\"keywords\":\"\",\n\"favicon\":\"img\/favicons\/favicon\",\n})\n\n&lt;body&gt;\n\t&lt;main class=\"main\"&gt;\n    \n  &lt;\/main&gt;\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>\u041a\u0430\u043a \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c, \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u043d\u0435\u0442. \u0424\u0443\u043d\u043a\u0446\u0438\u044f @@include \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430. \u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 &#8211; \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 &#8211; json-\u043e\u0431\u044a\u0435\u043a\u0442 (\u0442\u0443\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 json, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u043c\u0443 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432), \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u043a\u043b\u044e\u0447-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0442\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u044d\u0442\u043e\u043c \u0438\u043d\u043a\u043b\u044e\u0434\u0435. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0442\u0430\u043a \u0436\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0445\u0435\u0434\u0435\u0440\u0430, \u0444\u0443\u0442\u0435\u0440\u0430 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432:src\/components\/page-blocks\/&#8230;<\/p>\n\n\n\n<p>\u0418 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0438\u0445 \u0432\u0441\u0435 \u0432 \u0438\u043d\u0434\u0435\u043a\u0441\u043d\u044b\u0439 \u0444\u0430\u0439\u043b:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n@@include('components\/page-blocks\/_head.html',{\n\"lang\":\"en\",\n\"title\":\"Easy-webdev-startpack v3.0\",\n\"description\":\"Gulp pack for easy html\/php markup development\",\n\"keywords\":\"\",\n\"favicon\":\"img\/favicons\/favicon\",\n})\n\n&lt;body&gt;\n\t@@include('components\/page-blocks\/_header.html')\n\t&lt;main class=\"main\"&gt;&lt;\/main&gt;\n\t@@include('components\/page-blocks\/_footer.html')\n\t@@include('components\/page-blocks\/_scripts.html')\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 Gulp \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0433\u043e\u0442\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0441 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u043c head, header, footer \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438. \u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 gulp \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0438\u043d\u0434\u0435\u043a\u0441\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 build, \u0442\u043e \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0432\u043f\u043e\u043b\u043d\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 html-\u0444\u0430\u0439\u043b:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/870\/baa\/1ae\/870baa1ae14bb71577651da3c1a08067.png\" alt=\"build\/index.html\" title=\"build\/index.html\"\/><figcaption>build\/index.html<\/figcaption><\/figure>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0443 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u0432 style.scss. \u0417\u0434\u0435\u0441\u044c \u0432\u0430\u0436\u0435\u043d \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0441\u0442\u0438\u043b\u0435\u0439, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043d\u0438\u0436\u0435 \u0432 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0438\u043c\u0435\u044e\u0442 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@import 'base\/*.scss';\n@import 'global\/*.scss';\n@import '..\/components\/**\/*.scss';\n@import '**\/_*.scss';<\/code><\/pre>\n\n\n\n<p>\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 src\/scss\/base \u0444\u0430\u0439\u043b&nbsp;<code>_01_normalize.scss<\/code>&nbsp;\u0418\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a: \u0441 \u043f\u043e\u0434\u0447\u0451\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0438 \u043d\u043e\u043c\u0435\u0440\u043e\u043c \u0444\u0430\u0439\u043b\u0430. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0438\u043b\u0438 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u0432 \u0441\u0430\u043c\u043e\u043c \u0432\u0435\u0440\u0445\u0443 \u0438 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u0435\u0440\u0435\u0431\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f. \u0414\u0430\u043b\u0435\u0435 \u0432 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u044f \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u044e \u0441\u0442\u0438\u043b\u0438 \u0438\u0437&nbsp;<a href=\"https:\/\/necolas.github.io\/normalize.css\/\">normalize.css<\/a>. \u0411\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c normalize \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u0430, \u043d\u043e \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435, \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438.<\/p>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0444\u0430\u0439\u043b\u0443 src\/scss\/base\/_mixins.scss. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u044e\u0434\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@mixin bg ($size:\"contain\", $position: \"center\") {\n\tbackground-size: #{$size};\n\tbackground-position: #{$position};\n\tbackground-repeat: no-repeat;\n}<\/code><\/pre>\n\n\n\n<p>\u042d\u0442\u043e\u0442 \u043c\u0438\u043a\u0441\u0438\u043d \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043c \u0441 \u0444\u043e\u043d\u043e\u0432\u044b\u043c\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0443\u0436\u043d\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u0443 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c&nbsp;<code>@include bg<\/code>&nbsp;\u0438 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0432\u043e\u0442 \u044d\u0442\u043e:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n\tbackground-size: contain;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n}<\/code><\/pre>\n\n\n\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u0438\u043a\u0441\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e &#8211; \u044d\u0442\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a (\u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438, \u0444\u043e\u043a\u0443\u0441\u0435 \u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@mixin btn_anim($scaleMax:1.05, $scaleMin:0.95) {\n\ttransform-origin: center center;\n\ttransition: all ease-out 240ms;\n\n\t&amp;:hover {\n\t\ttransform: scale($scaleMax);\n\t}\n\n\t&amp;:focus{\n\t\toutline: transparent;\n\t}\n\n\t&amp;:focus-visible {\n\t\ttransform: scale($scaleMax) translateY(-5%);\n\t}\n\n\t&amp;:active {\n\t\ttransform: scale($scaleMin);\n\t}\n}<\/code><\/pre>\n\n\n\n<p>\u0414\u0430\u043b\u0435\u0435 \u0438\u0434\u0451\u0442 \u043c\u0438\u043a\u0441\u0438\u043d \u0434\u043b\u044f \u0441\u0431\u0440\u043e\u0441\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u0438. \u041e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@mixin no-btn ($display:\"inline-block\") {\n\tpadding: 0;\n\tmargin: 0;\n\tborder: 0;\n\tbackground-color: transparent;\n\tborder-radius: 0;\n\tcursor: pointer;\n\tappearance: none;\n\tdisplay: #{$display};\n}<\/code><\/pre>\n\n\n\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u0438\u043a\u0441\u0438\u043d \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043f\u043e\u0440\u043d\u044b\u0439, \u043d\u043e \u044f \u0438\u0441\u043f\u043b\u043e\u044c\u0437\u0443\u044e. \u041e\u043d \u0434\u0435\u043b\u0430\u0435\u0442 transition:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@mixin transit ($tr:0.24) {\n\ttransition: all #{$tr}s;\n}<\/code><\/pre>\n\n\n\n<p>\u0418 \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u043c\u0438\u043a\u0441\u0438\u043d \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@mixin container($max-width:\"120rem\",$padding:\"2rem\"){\n\twidth: 100%;\n\tmax-width: #{$max-width};\n\tpadding: 0 #{$padding};\n\tmargin: 0 auto;\n}<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u0432 \u0444\u0430\u0439\u043b&nbsp;<code>src\/scss\/global\/_global.scss<\/code>&nbsp;\u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e &#8220;\u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0445&#8221; \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u043e\u0431\u0449\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439. \u042f \u0438 \u043d\u0435 \u043f\u0440\u0438\u043f\u043e\u043c\u043d\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0433\u0434\u0435 \u043e\u043d\u0438 \u043d\u0435 \u0431\u044b\u043b\u0438 \u0431\u044b \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u044b.<\/p>\n\n\n\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c box-sizing: border-box \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>*,\n*::before,\n*::after {\n\tbox-sizing: border-box;\n}<\/code><\/pre>\n\n\n\n<p>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0440\u0430\u0441\u043f\u0438\u0448\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0444\u043b\u0435\u043a\u0441\u043e\u0432:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.flex {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tjustify-content: flex-start;\n}\n.--just-space {\n\tjustify-content: space-between;\n}\n\n.--just-center {\n\tjustify-content: center;\n}\n\n.--just-end {\n\tjustify-content: flex-end;\n}\n\n.--align-str {\n\talign-items: stretch;\n}\n\n.--align-center {\n\talign-items: center;\n}\n\n.--align-end {\n\talign-items: flex-end;\n}\n\n.--dir-col{\n\tflex-direction: column;\n}<\/code><\/pre>\n\n\n\n<p>\u0412-\u0442\u0440\u0435\u0442\u044c\u0438\u0445, \u0434\u043b\u044f html \u0438 body \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html{\n\tfont-size: 16px;\n}\n\nhtml,\nbody {\n\tmin-height: 100%;\n\tposition: relative;\n}\n\nbody{\n\tfont-size: 1rem;\n}<\/code><\/pre>\n\n\n\n<p>\u0418 \u0434\u0430\u043b\u0435\u0435 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043f\u043e\u0440\u043d\u044b\u0439, \u043d\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e. \u042d\u0442\u043e \u0441\u0431\u0440\u043e\u0441 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0443 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u043b\u043e\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ul,\nol,\nli,\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tmargin: 0;\n}<\/code><\/pre>\n\n\n\n<p>\u0418 \u0442\u043e\u0433\u043e, \u0443 \u043d\u0430\u0441 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0444\u0430\u0439\u043b\u044b:src\/scss\/base\/_mixins.scsssrc\/scss\/global\/_global.scss<\/p>\n\n\n\n<p>\u0412\u043e\u0442, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u0432\u0441\u0451. \u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e! \u041d\u0430\u0448\u0430 \u0441\u0431\u043e\u0440\u043a\u0430 \u0433\u043e\u0442\u043e\u0432\u0430 \u043a \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b60\/790\/cc6\/b60790cc6c995dfb8fbac05aaec552f1.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 howto<\/h2>\n\n\n\n<p><strong>\u041f\u0435\u0440\u0432\u043e\u0435<\/strong>&nbsp;\u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e @@include-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e html \u0444\u0430\u0439\u043b\u044b, \u043d\u043e \u0438 \u043b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u044b\u0435 svg \u0432 html, \u043d\u0435 \u0437\u0430\u0433\u0440\u043e\u043c\u043e\u0436\u0434\u0430\u044f \u043a\u043e\u0434.<\/p>\n\n\n\n<p><strong>\u0412\u0442\u043e\u0440\u043e\u0435.<\/strong>&nbsp;\u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 @@include \u0435\u0441\u0442\u044c \u043e\u0441\u043e\u0431\u044b\u0439 \u0440\u0435\u0436\u0438\u043c @@loop, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0442\u043e\u0440\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0435\u0441\u0442\u044c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435. \u0422\u043e \u0435\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438, \u0441\u043a\u043e\u0440\u043c\u0438\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 @@loop \u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u0443\u0442\u0435\u0439 \u043a \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c.&nbsp;<strong>\u0412\u0410\u0416\u041d\u041e\u0415 \u041e\u0413\u0420\u0410\u041d\u0418\u0427\u0415\u041d\u0418\u0415!<\/strong>&nbsp;loop \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 includ&#8217;\u0430 &#8211; \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445.<\/p>\n\n\n\n<p><strong>\u0422\u0440\u0435\u0442\u044c\u0435.<\/strong>&nbsp;\u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0434\u0440\u043e\u0431\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u0434 \u043d\u0430 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0422\u0430\u043a \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b. \u0412 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 components \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b html, scss \u0438 js \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430). Scss \u0438 js \u0438\u0437 \u044d\u0442\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u0434\u0442\u044f\u043d\u0443\u0442\u0441\u044f \u0432 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0435 \u043f\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u0442\u044c.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2>\u0412\u043c\u0435\u0441\u0442\u043e \u043f\u043e\u0441\u043b\u0435\u0441\u043b\u043e\u0432\u0438\u044f<\/h2>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0430\u0436 \u0434\u043e \u0441\u044e\u0434\u0430, \u0437\u043d\u0430\u0447\u0438\u0442 \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u044b\u043b\u0430 \u0434\u043b\u044f \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u0438 \u043f\u043e\u0437\u043d\u0430\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u0440\u043e\u0439\u0434\u0438\u0442\u0435 \u043f\u043e&nbsp;<a href=\"https:\/\/github.com\/budfy\/Easy-webdev-startpack\">\u044d\u0442\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435&nbsp;<\/a>\u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0437\u0432\u0435\u0437\u0434\u0443 \u043c\u043e\u0435\u0439 \u0441\u0431\u043e\u0440\u043a\u0435. \u0412\u0430\u043c \u044d\u0442\u043e 10 \u0441\u0435\u043a\u0443\u043d\u0434 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0430 \u043c\u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u044f\u0442\u043d\u043e \u0438 \u044f \u0431\u0443\u0434\u0443 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0436\u0435 \u0412\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443, \u043e\u0442\u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u0437\u0430\u0434\u0430\u0447\u0443, \u0442\u043e \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445, \u0430 \u043b\u0443\u0447\u0448\u0435, \u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u0432\u043e\u0439 pull-request \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438. \u042f \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0442\u043a\u0440\u044b\u0442 \u043a \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f\u043c \u0438 \u0433\u043e\u0442\u043e\u0432 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044e.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0421\u0435\u0440\u044c\u0451\u0437\u043d\u043e \u0438 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u044f \u043d\u0430\u0447\u0430\u043b \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u043e\u0439 \u0432 2019 \u0433\u043e\u0434\u0443, \u0445\u043e\u0442\u044f \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u0435\u0449\u0451 \u0441\u043e \u0448\u043a\u043e\u043b\u044b \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u0441\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u043e\u0439 \u043a\u0430\u043a \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u044c.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[143],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2022"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2022"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2022\/revisions"}],"predecessor-version":[{"id":2023,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2022\/revisions\/2023"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}