{"id":278648,"date":"2016-04-20T11:05:04","date_gmt":"2016-04-20T07:05:04","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=278648"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=278648","title":{"rendered":"\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 PhpStorm \u0434\u043b\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u043d\u0430 \u041e\u0421 Windows"},"content":{"rendered":"<br \/>\n<h1>\u0414\u043e\u0431\u0440\u044b\u0439 \u0434\u0435\u043d\u044c<\/h1>\n<p>  \u0422\u0430\u043a \u0441\u043b\u043e\u0436\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0435\u0434\u0438\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0447\u0443\u044e \u0441\u0440\u0435\u0434\u0443 (workflow) \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u043e\u0432 \u0432 \u0433\u0440\u0443\u043f\u043f\u0435 \u043d\u0430 \u041e\u0421 Windows. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0446\u0435\u043b\u044c \u2014 \u044d\u0442\u043e \u0432 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0440\u043e\u043a\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0437\u043d\u0430\u043d\u0438\u0439 \u0432\u0441\u0435\u043c \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430\u043c \u0433\u0440\u0443\u043f\u043f\u044b. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u043d\u043e\u0433\u0438\u0435 \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 unix-\u0441\u0438\u0441\u0442\u0435\u043c\u0430\u043c\u0438 \u0438 \u043f\u043e\u043d\u044f\u0442\u0438\u044f \u043d\u0435 \u0438\u043c\u0435\u044e\u0442, \u043a\u0430\u043a \u0437\u0430\u0432\u0435\u0441\u0442\u0438 \u0442\u043e\u0442 \u0436\u0435 SASS \u043d\u0430 \u041e\u0421 Windows. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e (\u043f\u043e\u0448\u0430\u0433\u043e\u0432\u0443\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e) \u043f\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0440\u0430\u0431\u043e\u0447\u0435\u0439 \u0441\u0440\u0435\u0434\u044b.<\/p>\n<p>  \u041f\u043e \u0441\u043e\u0432\u0435\u0442\u0443 \u043a\u043e\u043b\u043b\u0435\u0433 \u0440\u0435\u0448\u0438\u043b \u0432\u044b\u043b\u043e\u0436\u0438\u0442\u044c \u0435\u0435 \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f. \u0414\u0443\u043c\u0430\u044e, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u043c \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0430\u043c \u044d\u0442\u043e \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f, \u0442.\u043a. \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u043d\u0435\u043c\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0439\u0442\u0438 \u043a \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0438\u0441\u0442\u0438\u043d\u0430\u043c.<\/p>\n<p>  \u0421\u0440\u0430\u0437\u0443 \u043e\u0433\u043e\u0432\u043e\u0440\u044e\u0441\u044c, \u0447\u0442\u043e \u0432\u044b\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u2014 \u0434\u0435\u043b\u043e \u0441\u0443\u0433\u0443\u0431\u043e \u043b\u0438\u0447\u043d\u043e\u0435, \u0438 \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0438\u0436\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0438\u0436\u0435, \u0434\u0435\u043b\u0430\u043b\u043e\u0441\u044c \u043e\u0441\u043e\u0437\u043d\u0430\u043d\u043d\u043e \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u0443\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u0438\u043b\u0438 \u043d\u0435\u0442 \u2014 \u0440\u0435\u0448\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u043c.<\/p>\n<p>  \u0418\u0442\u0430\u043a \u043d\u0430\u0447\u043d\u0451\u043c! <br \/>  <a name=\"habracut\"><\/a><br \/>  \u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 3 \u044d\u0442\u0430\u043f\u0430:<\/p>\n<ul>\n<li><a href=\"#local-1\">\u042d\u0442\u0430\u043f 1 \u2014 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 IDE Phpstorm<\/a><\/li>\n<li><a href=\"#local-2\">\u042d\u0442\u0430\u043f 2 \u2014 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 (sass, scss)<\/a><\/li>\n<li><a href=\"#local-3\">\u042d\u0442\u0430\u043f 3 \u2014 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 (gulp)<\/a><\/li>\n<\/ul>\n<p>  <a name=\"local-1\"><\/a>  <\/p>\n<h2>\u042d\u0442\u0430\u043f 1 \u2014 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 IDE Phpstorm<\/h2>\n<p>  <\/p>\n<h4>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 IDE Phpstorm<\/h4>\n<p>  \u0417\u0430\u0445\u043e\u0434\u0438\u043c \u043d\u0430 <a href=\"https:\/\/www.jetbrains.com\/phpstorm\/?frommenu\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442<\/a> \u0438 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c 30-\u0434\u043d\u0435\u0432\u043d\u0443\u044e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e. \u041f\u043e \u0438\u0441\u0442\u0435\u0447\u0435\u043d\u0438\u0438 30 \u0434\u043d\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c <abbr title=\"\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Phpstorm\">IDE<\/abbr> \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435 \u0438\u043b\u0438 \u043a\u0443\u043f\u0438\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 <s>\u0438\u043b\u0438 \u043f\u0440\u0438\u0431\u0435\u0433\u043d\u0443\u0442\u044c \u043a \u043c\u0430\u0433\u0438\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0443\u043c\u0435\u043b\u044c\u0446\u0435\u0432<\/s>.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/73b\/9f0\/548\/73b9f054874d4eb58c583ad70eb1012e.png\"\/>  <\/div>\n<\/div>\n<p>  \u041f\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0434\u0443\u043c\u0430\u044e \u0438 \u0442\u0430\u043a \u0432\u0441\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u0443\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443. \u041d\u0430 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u044d\u0442\u0430\u043f\u043e\u0432 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438, \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432 <abbr title=\"\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Phpstorm\">IDE<\/abbr>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044f\u0440\u043b\u044b\u043a \u043d\u0430 \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u0441\u0442\u043e\u043b\u0435.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/201\/64d\/268\/20164d2683e842b19624626d37f51a9a.png\"\/>  <\/div>\n<\/div>\n<p>  \u041f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c <abbr title=\"\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Phpstorm\">IDE<\/abbr>, \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/31e\/49b\/2f8\/31e49b2f864049e386d38fe89856d27e.png\"\/>  <\/div>\n<\/div>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043e \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0441\u0442\u0438 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u044e (\u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443) \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043d\u044b\u0439 \u043f\u0435\u0440\u0438\u043e\u0434 \u0432 30 \u0434\u043d\u0435\u0439. \u0416\u043c\u0451\u043c \u00abevaluate for free 30-day\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/331\/05b\/d97\/33105bd97108423795bef4d3f3a345d9.png\"\/>  <\/div>\n<\/div>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0433\u043e\u0440\u044f\u0447\u0438\u0445 \u043a\u043b\u0430\u0432\u0438\u0448 (keymap). \u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u044c \u0441\u0430\u0439\u0442 <a href=\"http:\/\/www.phpstorm-themes.com\/\">Phpstorm themes<\/a> \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0442\u0443 \u0442\u0435\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e \u0434\u0443\u0448\u0435.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/01d\/611\/90f\/01d61190f2044cbbb92dc0bc97fe8db6.png\"\/>  <\/div>\n<\/div>\n<p>  \u041d\u0430 \u044d\u0442\u043e\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 <abbr title=\"\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Phpstorm\">IDE<\/abbr> \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u0430.<\/p>\n<h4>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 IDE Phpstorm<\/h4>\n<p>  <abbr title=\"\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Phpstorm\">IDE<\/abbr> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c 2 \u0442\u0438\u043f\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432:<\/p>\n<ul>\n<li><a href=\"#local-6\">\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b<\/a><\/li>\n<li><a href=\"#local-7\">\u041f\u0440\u043e\u0435\u043a\u0442\u044b \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c<\/a><\/li>\n<\/ul>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0431\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<br \/>  <a name=\"local-6\"><\/a>  <\/p>\n<h4>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h4>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u043e\u043a\u043d\u0435 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f <abbr title=\"\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Phpstorm\">IDE<\/abbr> \u0432\u044b\u0431\u0435\u0440\u0435\u043c \u043f\u0443\u043d\u043a\u0442 \u00ab\u0421reate new project\u00bb. \u0422\u0430\u043a\u0436\u0435 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u0437 \u043c\u0435\u043d\u044e <abbr title=\"\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Phpstorm\">IDE<\/abbr> \u00abFile\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/a8e\/b65\/2b6\/a8eb652b6e384c869098da58c71b4d70.png\"\/>  <\/div>\n<\/div>\n<p>  \u041e\u0442\u0440\u043e\u0435\u0442\u0441\u044f \u043e\u043a\u043d\u043e, \u0432 \u043a\u043e\u0442\u0440\u043e\u043c \u043d\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c:<\/p>\n<ul>\n<li>\u0428\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/li>\n<li>\u0423\u043a\u0430\u0437\u0430\u0442\u044c \u043c\u0435\u0441\u0442\u043e \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/li>\n<li>\u0423\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/9e5\/63c\/070\/9e563c0703314886949e2c124b18428c.png\"\/>  <\/div>\n<\/div>\n<p>  \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e \u0448\u0430\u0431\u043b\u043e\u043d\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0448\u0430\u0431\u043b\u043e\u043d boostrap \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0441 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u043d\u0430 github.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/e08\/d53\/d9b\/e08d53d9b8c94b7591d3cdf84ce6457b.png\"\/>  <\/div>\n<\/div>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0443 \u043d\u0430\u0441 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u043e\u043a\u043d\u043e \u043d\u0430\u0448\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u043f\u0430\u043f\u043a\u0430 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0422\u0430\u043a \u0436\u0435 \u0442\u0443\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u0430\u043f\u043a\u0430 <b>&quot;.idea&quot;<\/b>, \u043d\u0438 \u0432 \u043a\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <b>\u043d\u0435 \u0443\u0434\u0430\u043b\u044f\u0439\u0442\u0435 \u0435\u0451<\/b>! \u0412 \u043d\u0435\u0439 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/508\/147\/d4d\/508147d4dd234623a0178ef8801c1c39.png\"\/>  <\/div>\n<\/div>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u044e d\u0430\u0448\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0432\u0430\u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0438\u043c\u0451\u043d \u00abnamespace\u00bb. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043f\u043e\u0438\u0441\u043a \u043f\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0443, \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043a\u043e\u0434\u0430, \u0438 \u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0432\u0435\u0449\u0435\u0439. \u0412 \u0446\u0435\u043b\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0434\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u044d\u0442\u043e \u0441\u0430\u043c\u043e\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435.<\/p>\n<p>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u043c \u043e\u043a\u043d\u0435 \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443 \u00abautomatically\u00bb. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u0437\u0430\u043a\u0440\u044b\u043b\u0438 \u0434\u0430\u043d\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0438\u043b\u0438 \u043e\u043d\u043e \u00ab\u0441\u0430\u043c\u043e\u00bb \u0437\u0430\u043a\u0440\u044b\u043b\u043e\u0441\u044c, \u043a\u043b\u0438\u043a\u043d\u0438\u0442\u0435 \u043f\u043e \u0441\u0442\u0440\u043e\u043a\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0438 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u043a\u043b\u0438\u043a\u043d\u0438\u0442\u0435 \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443 \u00abautomatically\u00bb. \u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u0441\u0435 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0432\u0435\u0440\u043d\u043e, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435: \u00abDetect psr-0 namespace roots: no psr-0 namespace roots was detected\u00bb. \u0414\u043b\u044f \u0441\u043a\u0440\u044b\u0442\u0438\u044f \u043e\u043a\u043d\u0430 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u0437\u043d\u0430\u0447\u043e\u043a \u0441 \u043f\u0435\u0440\u043f\u0435\u043d\u0434\u0438\u043a\u0443\u043b\u044f\u0440\u043d\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043a\u043e\u0439.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/054\/bec\/e2b\/054bece2b5fa4fd9aa77ed18f40ba238.png\"\/>  <\/div>\n<\/div>\n<p>  \u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043d\u043e\u0432\u044b\u0439 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u0414\u0430\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u0435\u043d, \u0435\u0441\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u043d\u0430\u0434 \u043d\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u0438 \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0441\u0435\u0442\u044c.<br \/>  <a name=\"local-7\"><\/a>  <\/p>\n<h4>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0441 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c<\/h4>\n<p>  \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0441 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u043e\u043a\u043d\u0435 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0443\u043d\u043a\u0442 \u00abCreate New Projects from Existing Files\u00bb \u0438\u043b\u0438 \u0432 \u043c\u0435\u043d\u044e <abbr title=\"\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Phpstorm\">IDE<\/abbr> \u00abFile \u2014 New Projects from Existing Files\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/6b0\/61f\/760\/6b061f7604574d339ca5cd11cb37cb8f.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/769\/cc5\/0e5\/769cc50e50dc4f8495e91bbbb51f24d6.png\"\/>  <\/div>\n<\/div>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u00abWeb server is on remote host, files are accessible via ftp\/sftp\/ftps\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/d4e\/739\/70d\/d4e73970da6f4a278611eaa1b97a89a1.png\"\/>  <\/div>\n<\/div>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u0432\u0435\u0441\u0442\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0433\u0434\u0435 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u041f\u041a. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0443\u0442\u044c \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u00ab\u0421ustom\u00bb \u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0430\u043f\u043a\u0443 \u043a\u0443\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<p>  <b>\u0412\u0430\u0436\u043d\u043e!<\/b> \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0430\u0442\u0438\u043d\u0438\u0446\u0443 \u0432 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0444\u0430\u0439\u043b\u043e\u0432, \u043f\u0430\u043f\u043e\u043a, \u043f\u0443\u0442\u0435\u0439 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f. \u0422\u0430\u043a \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043a\u0438\u0440\u0438\u043b\u043b\u0438\u0446\u0443.<\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<ul>\n<li>\u00ab\u0421:\/\/\u043c\u043e\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b\/project\/\u0434\u0435\u043c\u043e\u00bb \u2014 \u043f\u043b\u043e\u0445\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442: \u043f\u0443\u0442\u044c \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u0438\u0440\u0438\u043b\u043b\u0438\u0446\u0443<\/li>\n<li>\u00ab\u0421:\/\/project\/demo\u00bb \u2014 \u0442\u0443\u0442 \u0432\u0441\u0435 \u0445\u043e\u0440\u043e\u0448\u043e, \u043f\u0443\u0442\u044c \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0430\u0442\u0438\u043d\u0438\u0446\u0443<\/li>\n<\/ul>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/d4c\/5cc\/6b4\/d4c5cc6b4ece4c2491a02ac14a3ca655.png\"\/>  <\/div>\n<\/div>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u0437 \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u043e\u0435 sftp (shh) \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435, \u0443\u043a\u0430\u0436\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0443.<\/p>\n<ul>\n<li>Name \u2014 \u0438\u043c\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f, \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0435 \u0434\u043b\u044f \u0432\u0430\u0441. \u042f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0435 \u0434\u043e\u043c\u0435\u043d\u043d\u043e\u0435 \u0438\u043c\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u0431\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0430 \u043e\u0434\u043d\u043e\u043c ip \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432<\/li>\n<li>Type \u2014 \u0444\u043e\u0440\u043c\u0430\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f ftp \u0438\u043b\u0438 sftp (shh)<\/li>\n<li>Sftp host \u2014 ip \u0430\u0434\u0440\u0435\u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438\u043b\u0438 \u0445\u043e\u0441\u0442 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, mysite.ru \u0438\u043b\u0438 demo.mysite.ru)<\/li>\n<li>Port \u2014 \u043d\u043e\u043c\u0435\u0440 \u043f\u043e\u0440\u0442\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044f \u0434\u043b\u044f ftp (21), sftp (22))<\/li>\n<li>Root path \u2014 \u043f\u0443\u0442\u044c \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0443 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c &quot;\/&quot;), \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c 2 \u043f\u0430\u043f\u043a\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 (dev, www), \u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u043e \u0441\u0440\u0430\u0437\u0443 \u043f\u0430\u043f\u043a\u0443 dev, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0443\u0442\u044c (\/dev\/)<\/li>\n<li>User name \u2014 \u043b\u043e\u0433\u0438\u043d \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440<\/li>\n<li>Password \u2014 \u043f\u0430\u0440\u043e\u043b\u044c \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 (\u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 \u00absave password\u00bb, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0430\u0440\u043e\u043b\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443, \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435). \u0442\u0430\u043a \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 ssh \u043a\u043b\u044e\u0447\u0430.<\/li>\n<li>\u00abDon&#8217;t check http connection to server \u2014 \u0441\u0442\u0430\u0432\u0438\u043c \u0433\u0430\u043b\u043e\u0447\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437.\u00bb<\/li>\n<\/ul>\n<p>  \u041a\u043d\u043e\u043f\u043a\u0430 \u00abTest sftp connection&#8230;\u00bb \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0432\u0435\u0440\u043d\u043e \u043b\u0438 \u0432\u0432\u0435\u0434\u0435\u043d\u044b \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u0430. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0441\u043f\u0435\u0445\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0434\u0430\u043d\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435.<\/p>\n<p>  \u00abWeb server root url\u00bb \u043f\u0443\u0442\u044c \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043d\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041f\u0443\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u0442\u0441\u044f, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u0441\u0442\u0440\u043e\u0447\u043a\u0430 \u00absftp host\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/0a5\/4ee\/a14\/0a54eea1440a46b38a104dc4a9d2aad7.png\"\/>  <\/div>\n<\/div>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435 \u0444\u0430\u0439\u043b\u044b \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0430\u043f\u043a\u0443 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u043d\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u0436\u043c\u0451\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u00abProject root\u00bb. \u0412 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0432\u0441\u0435, \u0447\u0442\u043e \u043b\u0435\u0436\u0438\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0443 \u0412\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0437\u0435\u043b\u0435\u043d\u044b\u0439 \u0444\u043e\u043d, \u0447\u0442\u043e \u0444\u0430\u0439\u043b\u044b \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u044b.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/6cc\/1e3\/393\/6cc1e339329c4101a091b6262e313396.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/a9a\/597\/c6c\/a9a597c6c4ad4842ad486f7a38fa87fd.png\"\/>  <\/div>\n<\/div>\n<p>  \u0415\u0441\u043b\u0438 \u043c\u044b \u043d\u0430\u0436\u043c\u0435\u043c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u043d\u0430\u0447\u043d\u0435\u0442 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043d\u0430 \u041f\u041a \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0422\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043f\u043e \u043e\u0431\u044a\u0435\u043c\u0443 \u0438 \u043a\u043e\u043b-\u0432\u0443 \u0444\u0430\u0439\u043b\u043e\u0432, \u043c\u044b \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0430\u0439\u043b\u044b \u0432 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435, \u043d\u0430\u0436\u0430\u0432 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00abExcluded from download\u00bb. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c, \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043a\u0430\u043a \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u0444\u0430\u0439\u043b\u044b.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/640\/a04\/e54\/640a04e540a543b6b297726d08f0f4c7.png\"\/>  <\/div>\n<\/div>\n<p>  \u0416\u043c\u0451\u043c \u00ab\u0434\u0430\u043b\u0435\u0435\u00bb \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043c, \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430\u043c \u0441\u0432\u043e\u0439 \u043f\u0443\u0442\u044c \u0434\u043b\u044f \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043f\u0430\u043f\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0422\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c &quot;\/&quot; \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u00abFinish\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/344\/d7d\/a62\/344d7da62bcc478ca4d34d1396d1a399.png\"\/>  <\/div>\n<\/div>\n<p>  \u0413\u043e\u0442\u043e\u0432\u043e! \u041c\u044b \u0441\u0432\u044f\u0437\u0430\u043b\u0438 \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0444\u0430\u0439\u043b \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0432\u043d\u0435\u0441\u0442\u0438 \u0432 \u043d\u0435\u0433\u043e \u043f\u0440\u0430\u0432\u043a\u0443 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438. \u0415\u0441\u043b\u0438 \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0432\u044b\u0448\u0435, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0435\u043a\u0442, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e. \u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448 \u00ab\u0421trl+Alt+S\u00bb, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0440\u0430\u0437\u0434\u0435\u043b \u00abBuild, Execution, Deployment \u2014 Deployment\u00bb, \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u00abExcluded path\u00bb \u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f, \u043a\u043b\u0438\u043a\u043d\u0443\u0432 \u043d\u0430 \u043f\u0443\u0442\u044c, \u0430 \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0432 \u043a\u043d\u043e\u043f\u043a\u0443 \u00abRemove path\u00bb, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0436\u043c\u0451\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u00abOK\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/3a9\/0b3\/c8f\/3a90b3c8fd6049be912d12390d79d9db.png\"\/>  <\/div>\n<\/div>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u0435\u0441\u043b\u0438 \u0432\u0441\u0435 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0442\u043e \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u00abRemote host\u00bb \u043d\u0430\u0448\u0438 \u0444\u0430\u0439\u043b\u044b \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u044f\u0442\u0441\u044f \u0437\u0435\u043b\u0435\u043d\u044b\u043c \u0444\u043e\u043d\u043e\u043c.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/c0c\/dd1\/64a\/c0cdd164aa4d4e02b2b50ebb2b463854.png\"\/>  <\/div>\n<\/div>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u0438\u043b\u0438 \u043f\u0430\u043f\u043a\u0443 \u043a \u0441\u0435\u0431\u0435 \u043d\u0430 \u041f\u041a, \u043d\u0443\u0436\u043d\u043e \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 \u0438 \u0432 \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0435\u043c\u0441\u044f \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u043c \u043c\u0435\u043d\u044e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0443\u043d\u043a\u0442 \u00abDownload from here\u00bb. \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0444\u0430\u0439\u043b\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f \u043a \u0412\u0430\u043c \u043d\u0430 \u041f\u041a.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/99b\/b18\/941\/99bb18941ecf4af48b1b96e6f0d75920.png\"\/>  <\/div>\n<\/div>\n<p>  \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f \u043e\u043d\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u044f\u0442\u0441\u044f \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u00abProject\u00bb \u0438 \u0432 \u043e\u043a\u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 \u00abFile transfer *\u0438\u043c\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430*\u00bb \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/cf5\/c41\/2b7\/cf5c412b74c94591a0b6fb69afab7ff7.png\"\/>  <\/div>\n<\/div>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0432\u043d\u043e\u0441\u0438\u043c \u043f\u0440\u0430\u0432\u043a\u0443 \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u043d\u0430\u043c \u0444\u0430\u0439\u043b \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 \u043f\u043e \u0444\u0430\u0439\u043b\u0443, \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u00abProject\u00bb, \u0438 \u0432\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u043c \u043c\u0435\u043d\u044e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0443\u043d\u043a\u0442 \u00abUpload to\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/a05\/037\/b73\/a05037b73be3445188e0fc2ccf6406c3.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/4b0\/2ec\/eea\/4b02eceea1b549d28499a82569c9ca52.png\"\/>  <\/div>\n<\/div>\n<p>  \u041f\u043e \u0436\u0435\u043b\u0430\u043d\u0438\u044e, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0433\u043e\u0440\u044f\u0447\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 (keymap) \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n<p>  \u0414\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0443\u0434\u043e\u0431\u0435\u043d, \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b, \u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043b\u0443\u0447\u0448\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448 \u00abCtrl+Alt+S\u00bb \u0438\u043b\u0438 \u0432 \u043c\u0435\u043d\u044e \u00abTools \u2014 Deployment \u2014 Options\u00bb \u0438 \u0432\u043d\u043e\u0441\u0438\u043c \u043f\u0440\u0430\u0432\u043a\u0438:<\/p>\n<ul>\n<li>Create empty direcory \u2014 \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0443\u0441\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0438 \u0442\u0430\u043a \u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442 \u0435\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440.<\/li>\n<li>Upload changed files automatically to the default server \u2014 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0443\u043d\u043a\u0442 \u00abalways\u00bb<\/li>\n<li>Upload external change \u2014 \u0441\u0442\u0430\u0432\u0438\u043c \u0433\u0430\u043b\u043e\u0447\u043a\u0443, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430\u043c\u0438. \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b css, js<\/li>\n<li>Warn then uploading over newer file \u2014 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0443\u043d\u043a\u0442 \u00abcompare timestamp &#038; size\u00bb, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u043b\u0438 \u0444\u0430\u0439\u043b \u043f\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0443<\/li>\n<li>notify about remote changes \u2014 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0430\u0435\u0442 \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0437\u0430\u043b\u0438\u0442\u044c \u043d\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0435\u0441\u043b\u0438 \u0444\u0430\u0439\u043b \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0438 2 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430. \u0411\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043e, \u043f\u0435\u0440\u0435\u0437\u0430\u0442\u0435\u0440\u0435\u0442\u044c, \u0441\u043c\u0435\u0440\u0436\u0438\u0442\u044c, \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c.<\/li>\n<\/ul>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/e9b\/297\/f87\/e9b297f873be42ca81b7ed2827dfa5a4.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/98d\/672\/b81\/98d672b813d94d78bb90de09f88618e4.png\"\/>  <\/div>\n<\/div>\n<p>  \u041d\u0430 \u044d\u0442\u043e\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0441 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0430. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 <abbr title=\"\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Phpstorm\">IDE<\/abbr>. \u043d\u0443\u0436\u043d\u043e \u044d\u0442\u043e, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0431\u044b\u043b \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0440\u043e\u0433 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u0437\u043d\u0430\u043d\u0438\u0439.<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u043e\u0431\u0437\u043e\u0440 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 <abbr title=\"\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Phpstorm\">IDE<\/abbr><\/h3>\n<p>  \u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u0432\u043a\u043b\u044e\u0447\u0438\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u00abTool windows\u00bb, \u044d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 <abbr title=\"\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Phpstorm\">IDE<\/abbr>. \u0421\u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e, \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0443 \u0432 \u043b\u0435\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0438 \u0441\u043b\u0435\u0432\u0430, \u0441\u043f\u0440\u0430\u0432\u0430, \u0441\u043d\u0438\u0437\u0443. \u0422\u0430\u043a \u0436\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437 \u043c\u0435\u043d\u044e <abbr title=\"\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Phpstorm\">IDE<\/abbr> \u00abView \u2014 Tools buttons\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/467\/271\/3d7\/4672713d7c0a43948ee1b02eddcdac45.png\"\/>  <\/div>\n<\/div>\n<p>  \u0423\u0434\u0430\u043b\u0438\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u043a\u0438, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0436\u0430\u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 \u043f\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0443\u043d\u043a\u0442 \u00abRemove from sidebar\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/cdd\/494\/efa\/cdd494efa1644c0c99145450e60c7af8.png\"\/>  <\/div>\n<\/div>\n<p>  \u042f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<ul>\n<li>\u041d\u0430 \u043b\u0435\u0432\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u00abproject\u00bb, \u00abgulp\u00bb, \u00abnpm\u00bb<\/li>\n<li>\u041d\u0430 \u043d\u0438\u0436\u043d\u0435\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u00abterminal\u00bb, \u00abversion control\u00bb, \u00abfile transfer\u00bb \u00abrest\u00bb, \u00abtodo\u00bb, \u00abevent log\u00bb<\/li>\n<li>\u041d\u0430 \u043f\u0440\u0430\u0432\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u00abremote host\u00bb<\/li>\n<\/ul>\n<p>  \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u0441\u0435 \u044d\u0442\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b.<\/p>\n<p>  <b>\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0443\u043c\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u043e\u043a, \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432, \u0446\u0432\u0435\u0442\u0430 \u0432 <abbr title=\"\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Phpstorm\">IDE<\/abbr><\/b><br \/>  \u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <abbr title=\"\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Phpstorm\">IDE<\/abbr> \u043d\u0430\u0436\u0430\u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u043a\u043b\u0430\u0432\u0438\u0448 \u00ab\u0421trl+Alt+S\u00bb \u0438\u043b\u0438 \u0438\u0437 \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u00abFile \u2014 Settings\u00bb \u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b \u00abEditor \u2014 General \u2014 Appearance\u00bb \u0438 \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0433\u0430\u043b\u043e\u0447\u043a\u0438:<\/p>\n<ul>\n<li>\u00abShow line number\u00bb \u2014 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u043e\u043c\u0435\u0440 \u0441\u0442\u0440\u043e\u043a \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435<\/li>\n<li>\u00abShow vertical indent guides\u00bb \u2014 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435<\/li>\n<li>\u00abShow css color preview icon in gutters\u00bb \u2014 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a, \u0432\u043e\u0437\u043b\u0435 \u043d\u043e\u043c\u0435\u0440\u0430 \u0441\u0442\u0440\u043e\u043a\u0438, \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u0446\u0432\u0435\u0442\u043e\u043c<\/li>\n<li>\u00abShow whitespace\u00bb \u2014 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432 \u0442\u0430\u0431\u0430\u0445 \u0438\u043b\u0438 \u043f\u0440\u043e\u0431\u0435\u043b\u0430\u0445. \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u043c \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443.<\/li>\n<\/ul>\n<p>  \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0442\u044c.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/665\/2b6\/8fd\/6652b68fd1bc43e8a2517d744c9960d5.png\"\/>  <\/div>\n<\/div>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u0441\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445 \u043d\u0438\u0436\u0435.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/fd7\/f86\/ebd\/fd7f86ebd001447ab5e023a6c92e252e.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/e9a\/8d8\/adc\/e9a8d8adcb20429899ad433bfe1fa561.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>\u041f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u043f\u043e \u043a\u043e\u0434\u0443<\/h3>\n<p>  \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0435\u0442, \u0435\u0441\u043b\u0438 \u0432 \u043a\u043e\u0434\u0435 \u0435\u0441\u0442\u044c \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0438. \u0421\u043f\u0440\u0430\u0432\u0430 \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0436\u0435\u043b\u0442\u044b\u0435 \u0438\u043b\u0438 \u043a\u0440\u0430\u0441\u043d\u044b\u0435 \u043f\u043e\u043b\u043e\u0441\u043a\u0438. \u041a\u043b\u0438\u043a\u043d\u0443\u0432 \u043f\u043e \u043f\u043e\u043b\u043e\u0441\u043a\u0435 \u0412\u0430\u0441 \u0441\u0440\u0430\u0437\u0443 \u043f\u0435\u0440\u0435\u043a\u0438\u043d\u0435\u0442 \u043d\u0430 \u0441\u0442\u0440\u043e\u0447\u043a\u0443, \u0433\u0434\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 \u0438\u043b\u0438 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0435. \u0422\u0430\u043a \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443\\\u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0432\u0435\u0434\u044f \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430 \u043f\u043e\u043b\u043e\u0441\u043a\u0443.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/6fb\/a9d\/d7b\/6fba9dd7bf6d4605adbdc20bdf3b4db7.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/h3>\n<p>  \u0414\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043c\u044b\u0448\u044c\u044e \u0432 \u043f\u0440\u0430\u0432\u044b\u0439 \u0443\u0433\u043e\u043b \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043e\u043a\u043d\u043e \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c, \u0432 \u043a\u0430\u043a\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0422\u0430\u043a \u0436\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0436\u0430\u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448 \u00abAlt + F2\u00bb (\u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f!).<\/p>\n<p>  \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <abbr title=\"\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Phpstorm\">IDE<\/abbr> \u043e\u0442\u043a\u0440\u043e\u0435\u0442 \u043d\u0430 localhoste \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430. \u0415\u0441\u043b\u0438 \u0412\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u0430\u044f \u0432 \u043f\u0443\u0442\u0438(Web server root url).<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/b18\/c67\/961\/b18c679616f946898c9985503dbab1d1.png\"\/>  <\/div>\n<\/div>\n<p>  \u0422\u0430\u043a \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u043a\u0430\u043a\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0443\u044e \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443 \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u0436\u0430\u0442\u044c \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448 \u00abCtrl+Alt+S\u00bb \u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b \u00abTools \u2014 Web browsers\u00bb \u0438\u043b\u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0438\u0441\u043a\u043e\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0438\u0436\u0435.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/421\/863\/3be\/4218633beeaf4ff596d87a0d52bc81de.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 emmet<\/h3>\n<p>  \u0414\u0430\u043d\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0443\u0436\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043e\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043f\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0443 emmet \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 <a href=\"http:\/\/emmet.io\/\">\u0441\u0430\u0439\u0442\u0435<\/a>, <a href=\"http:\/\/docs.emmet.io\/\">\u043f\u0440\u0438\u043c\u0435\u0440\u044b<\/a>, <a href=\"http:\/\/docs.emmet.io\/cheat-sheet\/\">\u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430<\/a>.<\/p>\n<h3>\u041f\u0440\u0430\u0432\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435<\/h3>\n<p>  \u0414\u043b\u044f \u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043a\u043b\u0438\u043a\u0430\u0435\u043c \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u00abremote host\u00bb, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b, \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044f \u0435\u0433\u043e \u043d\u0430 \u0441\u0432\u043e\u0439 \u043f\u043a (\u043a\u043b\u0438\u043a\u0430\u0435\u043c 2 \u0440\u0430\u0437\u0430 \u043d\u0430 \u0444\u0430\u0439\u043b, \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 remote host). \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0444\u0430\u0439\u043b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0443 <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/e4c\/b0d\/f3a\/e4cb0df3a4374232b1b35d5eb3361874.png\"\/>. \u0422\u0430\u043a \u0436\u0435 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043a\u0430\u0442\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u043a\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e, \u043d\u0430\u0436\u0430\u0432 \u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0443 <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/030\/d23\/247\/030d23247ae9449b9a98db6e92e44ff9.png\"\/>, \u0438\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0436\u0430\u0432 \u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0443 <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/f97\/67b\/410\/f9767b41032c4f8cadae588b9fedad1b.png\"\/>.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/6ef\/57c\/e2e\/6ef57ce2e3da4c418d4195263b786876.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0435\u0439 \u0444\u0430\u0439\u043b\u043e\u0432<\/h3>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0444\u0430\u0439\u043b\u0430, \u043d\u0443\u0436\u043d\u043e \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 \u043f\u043e \u0444\u0430\u0439\u043b\u0443, \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0443\u043d\u043a\u0442 \u00abLocal History \u2014 Show History\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/177\/467\/3d2\/1774673d23d746c880ab729d7f60bb06.png\"\/>  <\/div>\n<\/div>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u043e\u043a\u043d\u043e, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043b\u0435\u0432\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0430 \u0432\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0444\u0430\u0439\u043b\u0430 \u0438 2 \u043a\u043e\u043b\u043e\u043d\u043a\u0438. \u041b\u0435\u0432\u0430\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0430 \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u0438\u0437 \u0438\u0441\u0442\u043e\u0440\u0438\u0438, \u0430 \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u2014 \u0442\u0435\u043a\u0443\u0449\u0435\u0435. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u0430\u0432\u0443\u044e \u043a\u043e\u043b\u043e\u043d\u043a\u0443. \u0422\u0430\u043a \u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043a\u043d\u043e\u043f\u043a\u0438 \u043e\u0442\u043a\u0430\u0442\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043f\u0430\u0442\u0447. \u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u043e\u043a\u043d\u0430, \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0435, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c\u0441\u044f.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/cac\/ae4\/2d8\/cacae42d8ea3487ea8dc23127fc430e5.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e 2-\u0445 \u0444\u0430\u0439\u043b\u043e\u0432<\/h3>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u0440\u0430\u0432\u043d\u0438 2 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u041f\u041a, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u043e \u0444\u0430\u0439\u043b\u0443 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0443\u043d\u043a\u0442 \u00abCompare with\u00bb \u0432 \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0435\u043c\u0441\u044f \u043e\u043a\u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0441 \u043a\u0430\u043a\u0438\u043c \u0444\u0430\u0439\u043b\u043e\u043c \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/39d\/269\/8d0\/39d2698d07d1452abbf95fe09641dc89.png\"\/>  <\/div>\n<\/div>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0441 \u0444\u0430\u0439\u043b\u043e\u043c \u043d\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u043e \u0444\u0430\u0439\u043b\u0443 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0443\u043d\u043a\u0442 \u00abDeploymet \u2014 Compare with deployed version on *\u0438\u043c\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430*\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/83d\/caa\/ce3\/83dcaace34a44b92ba2a2a889b5482c3.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>\u0421\u043c\u0435\u043d\u0430 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u043a\u0438<\/h3>\n<p>  \u0411\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0438\u0437 cp-1251 \u0432 utf-8. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438, \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0443\u043d\u043a\u0442 \u00abFile Encode\u00bb. \u0422\u0430\u043a \u0436\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043b\u0438\u043a\u043d\u0443\u0432 \u043f\u043e \u0432\u044b\u0431\u043e\u0440\u0443 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u043a\u0438.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ef8\/751\/afc\/ef8751afc8ff480d9f9d7f2a15113e9d.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/07c\/5a0\/be0\/07c5a0be05464893aaa7bd878a1e155e.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>\u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430<\/h3>\n<p>  \u0412 unix \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443, \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0432 Windows. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a, \u0447\u0442\u043e \u043f\u0440\u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0444\u0430\u0439\u043b\u043e\u0432, \u0432\u0435\u0441\u044c \u0444\u0430\u0439\u043b \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439, \u043d\u0430 \u0434\u0435\u043b\u0435 \u0412\u044b \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0438 \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c 1 \u0441\u0438\u043c\u0432\u043e\u043b.<br \/>  \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c unix \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044b. \u0412 \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u00abfile \u2014 file encoding\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/616\/eb6\/d0a\/616eb6d0a7bd4ebb99df78160308e92b.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0442\u0430\u0431\u0443\u043b\u044f\u0446\u0438\u0438, \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0442\u0430\u0431\u043e\u0432\\\u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432<\/h3>\n<p>  \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0442\u0430\u0431\u0443\u043b\u044f\u0446\u0438\u0438, \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0412\u0430\u043c \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0435\u0442 \u044d\u0442\u043e \u0438 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/577\/cb0\/f22\/577cb0f2214c4e9cafc55866ef4fc521.png\"\/>  <\/div>\n<\/div>\n<p>  \u0422\u0430\u043a \u0436\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445, \u043d\u0430\u0436\u0430\u0432 \u00abCtrl+Alt+S\u00bb \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u044f \u0432 \u0440\u0430\u0437\u0434\u0435\u043b \u00abEditor \u2014 Code Style\u00bb, \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 \u00abUse tab charaster\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/b84\/abd\/aac\/b84abdaacd7b49e3bc32dd824951a890.png\"\/>  <\/div>\n<\/div>\n<p>  \u0414\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u0432 \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u00abEdit \u2014 Convert Indents\u00bb \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0439 \u0441\u0438\u043c\u0432\u043e\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/c41\/bcd\/7f9\/c41bcd7f9c5b4e80a739d66bc6813f54.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>\u041f\u043e\u0438\u0441\u043a \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430 \u041f\u041a<\/h3>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0439\u0442\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 \u041f\u041a, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 \u043f\u043e \u0444\u0430\u0439\u043b\u0443, \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0443\u043d\u043a\u0442 \u00abShow in Explorer\u00bb, \u043e\u0442\u0440\u043e\u0435\u0442\u0441\u044f \u043f\u0430\u043f\u043a\u0430 \u0441 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/1b2\/204\/68b\/1b220468b36c4ddba652db3f45a6faf1.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>\u0411\u044b\u0441\u0442\u0440\u043e\u0435 \u043e\u0442\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u0434<\/h3>\n<p>  \u0418\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0444\u0430\u0439\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u0438\u0437-\u0437\u0430 \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438. \u0422\u0443\u0442 \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430, \u0432 \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0443\u043d\u043a\u0442 \u00abCode \u2014 Reformat Code\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/93a\/190\/26c\/93a19026c38c4b76b135c0c6d865085a.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u043e\u043c \u0438 ssh session<\/h3>\n<p>  \u0412\u044b\u0437\u0432\u0430\u0442\u044c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u00abView \u2014 Tools Windows \u2014 Terminal\u00bb, \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435\u043c \u043a\u043b\u0430\u0432\u0438\u0448 (Alt+ F12), \u0438\u0437 \u043f\u0430\u043d\u0435\u043b\u0438 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430. \u041f\u043e \u0441\u0443\u0442\u0438 \u044d\u0442\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0432 Windows.<\/p>\n<p>  \u0414\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 SSH \u0422\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430 \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443, \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u00abTools \u2014 Start SHH Session\u00bb \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435, \u0438\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/f2e\/c51\/cc8\/f2ec51cc8a324c628924ba544df808ba.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>\u0417\u0430\u043c\u0435\u0442\u043a\u0438 \u0438 \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0438<\/h3>\n<p>  \u0414\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c Html \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c todo. \u0412\u044b\u0437\u0432\u0430\u0442\u044c \u043f\u0430\u043d\u0435\u043b\u044c \u0437\u0430\u043c\u0435\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u0437 \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u00abView \u2014 Tools Windows \u2014 TODO\u00bb \u0438\u043b\u0438 \u0438\u0437 \u043f\u0430\u043d\u0435\u043b\u0438 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430. \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043c\u0435\u0442\u043e\u043a. \u041f\u043e \u0434\u0432\u043e\u0439\u043d\u043e\u043c\u0443 \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u0437\u0430\u043c\u0435\u0442\u043a\u0443, \u0443 \u0412\u0430\u0441 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b \u0438 \u043a\u0443\u0440\u0441\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u043d\u0430 \u0437\u0430\u043c\u0435\u0442\u043a\u0435.<\/p>\n<pre><code class=\"html\">&lt;!--todo \u041c\u043e\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u0430\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0430--&gt; <\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/89a\/be3\/7ee\/89abe37ee4604d2daebe61e1bdd9b0a7.png\"\/>  <\/div>\n<\/div>\n<p>  \u0417\u0430\u043a\u043b\u0430\u0434\u043a\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u0443\u0441\u043a\u0438 \u043a\u043e\u0434\u0430. \u0414\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0430 \u043d\u0430\u0447\u0430\u043b\u043e \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043a\u0443\u0441\u043a\u0430 \u043a\u043e\u0434\u0430 \u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0433\u043e\u0440\u044f\u0447\u0435\u0439 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 (F11) \u0438\u043b\u0438 \u0438\u0437 \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u00abNavigate \u2014 Bookmark \u2014 Toggle Bookmark\u00bb \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0443. \u0417\u0430\u043a\u043b\u0430\u0434\u043a\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0433\u0430\u043b\u043e\u0447\u043a\u0438.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/b23\/abd\/4e8\/b23abd4e820c422ba20505fc4bacbb42.png\"\/>  <\/div>\n<\/div>\n<p>  \u0414\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0433\u043e\u0440\u044f\u0447\u0435\u0439 \u043a\u043b\u0430\u0432\u0438\u0448\u0438(Shift-F11) \u0438\u043b\u0438 \u0438\u0437 \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u00abNavigate \u2014 Bookmark \u2014 Show Bookmark\u00bb \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043e\u043a\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/691\/120\/185\/69112018567d4d7c90f14dc5ff185d98.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>LiveEdit(LivePreview) \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u041f\u041a<\/h3>\n<p>  \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u043b\u0430\u0433\u0438\u043d LiveEdit. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b(Ctrl+Alt+S), \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b \u00abPlugins\u00bb \u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u00abBrowse repositories&#8230;\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/842\/eb0\/763\/842eb0763ffa47c2b72526f3544cd684.png\"\/>  <\/div>\n<\/div>\n<p>  \u0412 \u043e\u0442\u043a\u0440\u044b\u0432\u0448\u0435\u043c\u0441\u044f \u043e\u043a\u043d\u0435, \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u043f\u043e\u0438\u0441\u043a\u0430 \u0432\u0432\u0435\u0441\u0442\u0438 \u00abLive Edit\u00bb \u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 Install. \u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0435\u0435.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/a5e\/bc7\/c17\/a5ebc7c171bb4cb49ac2cbf6c3fcc60a.png\"\/>  <\/div>\n<\/div>\n<p>  \u0421\u043d\u043e\u0432\u0430 \u0438\u0434\u0435\u043c \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b (Ctrl+Alt+S), \u0437\u0430\u0442\u0435\u043c \u0432 \u00abBuild, Execution, Debbug \u2014 Live Edit\u00bb \u0438 \u0441\u0442\u0430\u0432\u0438\u043c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 \u043d\u0430 \u00abAuto in (300 ms)\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/d54\/9b7\/f76\/d549b7f765874c48a7cce457a90b1a2e.png\"\/>  <\/div>\n<\/div>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/jetbrains-ide-support\/hmhgeddbohgjknpmjagkdomcpobmllji\">\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c<\/a> \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435, \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043d\u0430\u0448 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 Chrome, Yandex. \u0412 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043e\u0431\u0435\u0449\u0430\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 Firefox, Safari. \u0411\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 <a href=\"https:\/\/confluence.jetbrains.com\/display\/PhpStorm\/Live+Edit+in+PhpStorm#LiveEditinPhpStorm-ChromeExtensionInstallation\">\u0441\u0430\u0439\u0442\u0435<\/a> \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/d3d\/280\/aaa\/d3d280aaa73d44a6b1047569ff004ed9.png\"\/>  <\/div>\n<\/div>\n<p>  \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c Live Edit, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0443\u043d\u043a\u0442 \u0432 \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u00abRun \u2014 Debug\u00bb \u0438\u043b\u0438 \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u0438\u043a\u043e\u043d\u043a\u0443 \u0436\u0443\u043a\u0430.<br \/>  \u041e\u0431\u0440\u0430\u0449\u0430\u044e \u0412\u0430\u0448\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0440\u0435\u0436\u0438\u043c \u00abLive Edit\u00bb \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0442.\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0442\u0435\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0435\u0436\u0430\u0442 \u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u041f\u041a \u0438 \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/d05\/cb8\/509\/d05cb85096504e1286cab275351bedfc.png\"\/>  <\/div>\n<\/div>\n<p><a name=\"local-2\"><\/a>  <\/p>\n<h2>\u042d\u0442\u0430\u043f 2 \u2014 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 (sass,scss)<\/h2>\n<p>  \u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 \u043d\u0430 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c:<\/p>\n<ul>\n<li><a href=\"https:\/\/nodejs.org\/en\/download\/\">nodejs<\/a><\/li>\n<li><a href=\"http:\/\/rubyinstaller.org\/downloads\/\">ruby<\/a><\/li>\n<li>gem sass, gem scss<\/li>\n<\/ul>\n<p>  <b>\u0412\u0430\u0436\u043d\u043e!<\/b> \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u0442 \u0438\u043c\u0435\u043d\u0438 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430.<\/p>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 nodejs<\/h3>\n<p>  \u0421\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0449\u0438\u043a \u0434\u043b\u044f Windows c \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e <a href=\"https:\/\/nodejs.org\/en\/download\/\">\u0441\u0430\u0439\u0442\u0430<\/a>. \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430, \u043d\u043e \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u044b \u043f\u0443\u043d\u043a\u0442\u044b \u00abAdd to path\u00bb. \u0414\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0438\u0436\u0435.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/403\/883\/b74\/403883b742ce4dde9b84d75e73bdf7c9.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 ruby<\/h3>\n<p>  \u0421\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0449\u0438\u043a \u0434\u043b\u044f Windows c \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e <a href=\"http:\/\/rubyinstaller.org\/downloads\/\">\u0441\u0430\u0439\u0442\u0430<\/a>. \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430, \u043d\u043e \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0432\u044b\u0431\u043e\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u0433\u0430\u043b\u043e\u0447\u043a\u0430 \u00abAdd Ruby Executables to PATH\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/8e8\/d3a\/e2e\/8e8d3ae2e53e4ca38146ccac78a58418.png\"\/>  <\/div>\n<\/div>\n<p>  \u041f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c Phpstorm \u0437\u0430\u043a\u0440\u044b\u0432 \u0435\u0433\u043e \u0438\u043b\u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u00abFile \u2014 Invalidate Chache \/ Restart \u2014 Just Restart\u00bb. \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0432\u0435\u0440\u0441\u0438\u044e nodejs \u0438 ruby. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0431\u0440\u0430\u0442\u044c \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435<\/p>\n<pre><code class=\"ruby\">node -v <\/code><\/pre>\n<p>  \u0438<\/p>\n<pre><code class=\"ruby\">gem -v <\/code><\/pre>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435:<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ce2\/d1f\/5b3\/ce2d1f5b32aa48d4bcddd016812111b2.png\"\/>  <\/div>\n<\/div>\n<p>  \u0418\u043d\u043e\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440 \u0447\u0442\u043e\u0431\u044b \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b. \u0412\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u0435\u0440\u0441\u0438\u0438 Phpstorm.<\/p>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 gem sass, scss<\/h3>\n<p>  \u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0432\u0432\u0435\u0441\u0442\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b: <\/p>\n<pre><code class=\"ruby\">gem install sass <\/code><\/pre>\n<p> \u0438 <\/p>\n<pre><code class=\"ruby\">gem install scss <\/code><\/pre>\n<p> \u041f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0432\u043f\u043b\u044b\u0432\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u043e\u043a\u043d\u043e Windows \u0441 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c, \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 ruby. \u0416\u043c\u0451\u043c \u00ab\u041e\u041a\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/474\/627\/e33\/474627e335764505bd4cb1878f593c10.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/748\/0e7\/647\/7480e76470624dd4a20745656d7b9ff8.png\"\/>  <\/div>\n<\/div>\n<p>  \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u0430, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0438 \u0444\u0430\u0439\u043b\u044b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0438\u0437 sass \u0432 css.<br \/>  \u0415\u0441\u043b\u0438 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b .sass \u0438\u043b\u0438 .scss, \u0442\u043e \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0435\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442 \u043d\u0430\u043c \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u00abFile Watcher\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/f95\/14c\/e0b\/f9514ce0bdc94b72a50e805b0595ce2f.png\"\/>  <\/div>\n<\/div>\n<p>  \u041d\u0430\u0436\u0430\u0432 \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443 \u00abAdd watcher\u00bb, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u043e\u043a\u043d\u043e \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044f. \u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0432\u0441\u0451 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u043e\u0441\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e, \u0442\u043e \u0432 \u043f\u043e\u043b\u0435 programm \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u0442\u044c \u043a sass.bat \u0444\u0430\u0439\u043b\u0443.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/efc\/786\/d4d\/efc786d4d0ee4ed8aa38ff1777b94fb8.png\"\/>  <\/div>\n<\/div>\n<p>  \u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u00ab\u041e\u041a\u00bb \u0438 \u043d\u0430 \u044d\u0442\u043e\u043c \u0431\u044b\u0441\u0442\u0440\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0430. \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043b\u044e\u0431\u043e\u0439 \u043a\u0443\u0441\u043e\u043a \u043a\u043e\u0434\u0430 \u0432 sass \u0444\u0430\u0439\u043b\u0435. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u00abCtrl+S\u00bb \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/f30\/079\/57f\/f3007957fd8b438e8465f59b4bdc5737.png\"\/>  <\/div>\n<\/div>\n<p>  \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 \u0434\u043e\u043f\u0443\u0449\u0435\u043d\u0430 \u043e\u0448\u0438\u0431\u043a\u0430, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0432\u044b\u0434\u0430\u0441\u0442 \u043d\u0430\u0441 \u043e\u0448\u0438\u0431\u043a\u0443 \u0438 \u0444\u0430\u0439\u043b \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ae5\/f29\/aa1\/ae5f29aa1c32419cad350afb29f76042.png\"\/>  <\/div>\n<\/div>\n<p>  \u041d\u043e \u0447\u0430\u0441\u0442\u043e \u0431\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0444\u0430\u0439\u043b\u044b .sass(\u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u043e\u0432) \u043b\u0435\u0436\u0430\u0442 \u0432 \u043e\u0434\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435, \u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 .css \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u0434\u0440\u0443\u0433\u0443\u044e \u043f\u0430\u043f\u043a\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u043b\u0438\u0448\u044c \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043f\u0443\u0442\u0438. \u041d\u0430\u0436\u0430\u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448 (Ctrl+Alt+S) \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0440\u0430\u0437\u0434\u0435\u043b \u00abTools \u2014 File Watchers\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/9f0\/10d\/251\/9f010d2510fe43c38c22e19dec7505fa.png\"\/>  <\/div>\n<\/div>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u043a\u043b\u0438\u043a\u0430\u0435\u043c 2 \u0440\u0430\u0437\u0430 \u043f\u043e \u0441\u0442\u0440\u043e\u0447\u043a\u0435 Sass.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/072\/75a\/441\/07275a44148f49299b6d55c20182badc.png\"\/>  <\/div>\n<\/div>\n<p>  \u041f\u043e\u043b\u0435 \u00abArguments\u00bb \u043f\u043e\u0441\u043b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 &quot;:&quot; \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0443\u0442\u044c \u043a \u043f\u0430\u043f\u043a\u0435 css. \u0416\u043c\u0451\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00abInset macros\u00bb \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e &quot;$FileDir&quot;. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 &quot;$FileDir&quot; \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0443\u0442\u044c \u0434\u043e \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/34a\/632\/45c\/34a63245cfb844128730f0f8c905c6b5.png\"\/>  <\/div>\n<\/div>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f <code> $FileDir$\\css\\$FileNameWithoutExtension$.css <\/code>, \u0433\u0434\u0435 \u043f\u0435\u0440\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u044d\u0442\u043e \u043f\u0443\u0442\u044c \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443, \u0437\u0430\u0442\u0435\u043c \u0438\u043c\u044f \u043f\u0430\u043f\u043a\u0438, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c .css \u0444\u0430\u0439\u043b\u044b, \u0438 \u0438\u043c\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0444\u0430\u0439\u043b\u0430. \u042d\u0442\u043e\u0442 \u043a\u0443\u0441\u043e\u043a <code> $FileDir$\\css\\$FileNameWithoutExtension$.css<\/code> \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0438 \u0432 \u043f\u043e\u043b\u0435 \u00abOutput path to elements\u00bb. \u041e\u0431\u0440\u0430\u0449\u0430\u044e \u0412\u0430\u0448\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0438 \u043f\u0443\u0442\u0438 \u0441\u0442\u043e\u044f\u0442\u044c \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043b\u0435\u0448\u0438 &quot;\\&quot;.<\/p>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c, \u043a\u0430\u043a \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438, \u0438 \u0436\u043c\u0451\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041e\u041a\u00bb.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/670\/4c2\/f95\/6704c2f956b8497ab5a09c04654ab634.png\"\/>  <\/div>\n<\/div>\n<p>  \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043d\u0435\u0441\u0442\u0438 \u043b\u044e\u0431\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432 .sass \u0444\u0430\u0439\u043b \u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u00abCtrl+S\u00bb. \u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043f\u0430\u043f\u043a\u0443 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u00abcss\u00bb \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u043d\u0435\u0435 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b.<\/p>\n<p>  \u0421\u0442\u0430\u0440\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/de6\/b0c\/762\/de6b0c762e5e438f882a32c795a6f9b7.png\"\/>  <\/div>\n<\/div>\n<p>  \u0414\u043b\u044f .scss \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0442\u043e\u0442 \u0436\u0435. \u0422\u043e\u043b\u044c\u043a\u043e \u00abFile Watchers\u00bb \u0431\u0443\u0434\u0435\u0442 SCSS \u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u0442 \u0432 \u043f\u043e\u043b\u0435 programm \u043f\u0443\u0442\u044c \u043a scss.bat \u0444\u0430\u0439\u043b\u0443.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ee4\/1e5\/b18\/ee41e5b182d3452a8780c21bc0c5bc98.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/1cb\/b35\/2c5\/1cbb352c5037421ca0d643d0daed2534.png\"\/>  <\/div>\n<\/div>\n<p>  \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c <a href=\"https:\/\/www.jetbrains.com\/help\/phpstorm\/2016.1\/transpiling-sass-less-and-scss-to-css.html?origin=old_help#d324439e219\">\u0441\u0430\u0439\u0442\u0435<\/a><br \/>  <a name=\"local-3\"><\/a>  <\/p>\n<h2>\u042d\u0442\u0430\u043f 3 \u2014 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 (gulp)<\/h2>\n<p>  <\/p>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441 \u043d\u0443\u043b\u044f<\/h3>\n<p>  \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u043d\u0430\u0431\u0440\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>npm init<\/code>, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0434\u0430\u043d\u044b \u0440\u044f\u0434 \u0432\u043e\u043f\u0440\u043e\u0441, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u00abEnter\u00bb. \u0422\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u043e\u043b\u0435 \u00abentry points\u00bb \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u0444\u0430\u0439\u043b\u0430, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u00abgulpfile.js\u00bb<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/e14\/45c\/af0\/e1445caf069a4d7eaaba7a6ab07cce2b.png\"\/>  <\/div>\n<\/div>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0447\u0442\u043e-\u0442\u043e \u043d\u0430\u0436\u0430\u043b\u0438 \u043d\u0435 \u0442\u0430\u043a, \u0438\u043b\u0438 \u0440\u0435\u0448\u0438\u043b\u0438 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u0439\u0434\u044f \u0432 \u0441\u0430\u043c \u0444\u0430\u0439\u043b package.json, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u043b\u0441\u044f \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. <\/p>\n<p>  \u0411\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c <a href=\"https:\/\/docs.npmjs.com\/cli\/init\">\u0441\u0430\u0439\u0442\u0435<\/a>.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/c93\/c37\/b78\/c93c37b7886f458889463087f9b7150a.png\"\/>  <\/div>\n<\/div>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0430\u043c gulp, \u0438 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d, \u043f\u0443\u0441\u043a\u0430\u0439 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 autoprefixer. \u041e \u043f\u0440\u043e\u0435\u043a\u0442\u0435 PostCss \u0438 Autoprefixer \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c <a href=\"http:\/\/postcss.org\/\">\u0441\u0430\u0439\u0442\u0435<\/a>.<\/p>\n<p>  \u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 Gulp, \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0431\u0440\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 <code>npm install gulp --save-dev<\/code> \u0438 \u0434\u043e\u0436\u0434\u0430\u0442\u044c\u0441\u044f \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438. \u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u043f\u0440\u043e\u0448\u043b\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e, \u0432 \u043a\u043e\u0440\u043d\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u043f\u0430\u043f\u043a\u0430 node_modules, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 Gulp. \u041a\u043b\u044e\u0447 &#8212;save-dev, \u043d\u0443\u0436\u0435\u043d \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0430\u043a\u0435\u0442\u044b \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0438 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/097\/2bb\/514\/0972bb51440a4be8b29d76785cab2c09.png\"\/>  <\/div>\n<\/div>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c <a href=\"https:\/\/www.npmjs.com\/package\/gulp-autoprefixer\">autoprefixer<\/a>, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0431\u0435\u0440\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>npm install gulp-autoprefixer --save-dev <\/code> \u0438 \u0434\u043e\u0436\u0434\u0451\u043c\u0441\u044f \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438.<\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 <a href=\"http:\/\/postcss.org\/\">autoprefixer<\/a> \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435, \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 <a href=\"https:\/\/www.npmjs.com\/package\/gulp-autoprefixer\">npm<\/a>. \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435, autoprefixer \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 PostCss(\u043f\u043e\u0441\u0442\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440). \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c, \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u0447\u0435\u0440\u0435\u0437 PostCSS.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0435\u0441\u043b\u0438 \u043c\u044b \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b package.json, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043d\u0430\u0448\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043b\u0438\u0441\u044c \u0432 \u0431\u043b\u043e\u043a \u00abdevDependencies\u00bb.<br \/>  \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0430, \u0442\u0435\u043f\u0435\u0440\u044c \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c.<\/p>\n<p>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043a\u043e\u0440\u043d\u0435 \u0444\u0430\u0439\u043b \u00abgulpfile.js\u00bb, \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u0443\u0434\u0430 \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043a\u0430\u0437\u0430\u043d \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 <a href=\"https:\/\/www.npmjs.com\/package\/gulp-autoprefixer\">npm<\/a> \u0432 \u0431\u043b\u043e\u043a\u0435 usage \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0435\u0433\u043e (Ctrl+S).<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/121\/7ac\/224\/1217ac22436f43909f82455ad773feb1.png\"\/>  <\/div>\n<\/div>\n<p>  \u042f \u0432\u043d\u0435\u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/610\/2da\/7f5\/6102da7f5562498f959a443e34eb0593.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u043e\u0434<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">var gulp = require('gulp'),       autoprefixer = require('gulp-autoprefixer');        gulp.task('autoprefix - \u043f\u043b\u0430\u0433\u0438\u043d', function () {          return gulp.src('css\/sass-style.css')             .pipe(autoprefixer({                browsers: ['last 2 versions'],                cascade: false              }))            .pipe(gulp.dest('css\/'));       }); <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u043b\u0430\u0433\u0438\u043d\u0430. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 .sass \u0444\u0430\u0439\u043b \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e display:flex \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u0435\u0433\u043e. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u043d \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 .css \u0444\u0430\u0439\u043b.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/bdf\/139\/6ac\/bdf1396ac60e46ceab67080e48f94467.png\"\/>  <\/div>\n<\/div>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435, \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u043f\u0430\u043d\u0435\u043b\u044c gulp, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043a\u043b\u0438\u043a\u043d\u0443\u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u0438 \u043f\u043e \u0444\u0430\u0439\u043b\u0443 \u00abgulpfile.js\u00bb \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0443\u043d\u043a\u0442 \u00abShow Gulp Tasks\u00bb \u0438\u043b\u0438 \u0438\u0437 \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u00abView \u2014 Tools WIndows \u2014 Gulp\u00bb. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0447\u0435\u0433\u043e \u043e\u0442\u0440\u043e\u0435\u0442\u0441\u044f \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0437\u0430\u0434\u0430\u0447.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/88d\/38c\/412\/88d38c41289640ab85c76361913fd01c.png\"\/>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/040\/1af\/bb9\/0401afbb90104e9698f046548f61fde7.png\"\/>  <\/div>\n<\/div>\n<p>  \u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u041f\u043e\u0441\u043b\u0435 \u043b\u044e\u0431\u044b\u0445 \u043f\u0440\u0430\u0432\u043e\u043a \u0432 \u0444\u0430\u0439\u043b\u0435 \u00abgulpfile.js\u00bb, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/7c2\/62b\/478\/7c262b478a8640909a877ad7ea9e23ca.png\"\/>  <\/div>\n<\/div>\n<p>  \u041a\u043b\u0438\u043a\u0430\u0435\u043c 2 \u0440\u0430\u0437\u0430 \u043f\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u044e, \u0438 \u0436\u0434\u0451\u043c \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0435 \u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u043f\u0440\u043e\u0448\u043b\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e, \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u043e\u043f\u043e\u0432\u0435\u0441\u0442\u0438\u0442\u044c \u0412\u0430\u0441 \u043e\u0431 \u044d\u0442\u043e\u043c. \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0443 \u043d\u0430\u0441 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u0432 \u0444\u0430\u0439\u043b\u0435 .css.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/589\/e50\/b5b\/589e50b5b8a5406eafd9659d4fdc888f.png\"\/>  <\/div>\n<\/div>\n<p>  \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u043f\u043b\u0430\u0433\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 <a href=\"https:\/\/www.npmjs.com\/package\/gulp-cssnano\">\u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/a> \u043a\u043e\u0434.<br \/>  \u0412\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 <code>npm install gulp-cssnano --save-dev<\/code> \u0438 \u0434\u043e\u0436\u0434\u0451\u043c\u0441\u044f \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438. <br \/>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u00abgulpfile.js\u00bb, \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u043d\u0430 <a href=\"https:\/\/www.npmjs.com\/package\/gulp-cssnano\">\u0441\u0430\u0439\u0442\u0435<\/a> \u0438 \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 gulp \u0432\u043a\u043b\u0430\u0434\u043a\u0435.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u043e\u0434<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">   var gulp = require('gulp'),          autoprefixer = require('gulp-autoprefixer'),          cssnano = require('gulp-cssnano');           gulp.task('autoprefix - \u043f\u043b\u0430\u0433\u0438\u043d', function () {               return gulp.src('css\/sass-style.css')                  .pipe(autoprefixer({                         browsers: ['last 2 versions'],                         cascade: false                   }))                   .pipe(gulp.dest('css\/'));                 });                  gulp.task('nano ', function() {                     return gulp.src('css\/sass-style.css')                     .pipe(cssnano())                     .pipe(gulp.dest('css\/'));                 }); <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0443 \u043d\u0430\u0441 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0435\u0449\u0451 \u043e\u0434\u043d\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u0435.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/6a3\/f68\/0a7\/6a3f680a76f14fc19cd214868c57f764.png\"\/>  <\/div>\n<\/div>\n<p>  \u041a\u043b\u0438\u043a\u0430\u0435\u043c 2 \u0440\u0430\u0437\u0430 \u043f\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u044e \u00abnano\u00bb \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u0431\u0435\u0437 \u043b\u0438\u0448\u043d\u0438\u0445 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432, \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432, \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u043e\u0432 \u0438.\u0442.\u0434.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/d52\/fa4\/111\/d52fa4111ea24659a92324e5180a9202.png\"\/>  <\/div>\n<\/div>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u043d\u0435\u0442. \u0411\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 <a href=\"http:\/\/postcss.parts\/\">\u0442\u0443\u0442<\/a>, \u0442\u0430\u043a \u0436\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0433\u0440\u0443\u043f\u043f\u0443 <a href=\"https:\/\/vk.com\/postcss\">\u0432\u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0435<\/a>, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0412\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <s>\u0438 \u0437\u0430\u043c\u0443\u0447\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u0430\u0432\u0442\u043e\u0440\u0430 PostCss<\/s>.<\/p>\n<p>  \u0414\u0430\u043b\u044c\u0448\u0435 \u0443 \u0412\u0430\u0441 \u0441\u043a\u043e\u0440\u0435\u0439 \u0432\u0441\u0435\u0433\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0435\u0442 \u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441: \u00ab\u041c\u043d\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f, \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0442\u0430\u043a \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432?\u00bb<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043d\u0435 \u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432 \u0440\u0443\u0447\u043d\u0443\u044e, \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c, \u0441\u0432\u043e\u0438 \u0444\u0430\u0439\u043b\u044b \u00abpackage.json\u00bb \u0438 \u00abgulpfile.js\u00bb. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c, \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e, \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430, \u0432 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>npm install<\/code> \u0438 \u0432\u0441\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f(autoprefixer, nano &#8230;) \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f. \u041e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0435\u0434\u0438\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432. \u0422\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043f\u0443\u0442\u0438 \u043a \u0444\u0430\u0439\u043b\u0430\u043c. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0444\u0430\u0439\u043b\u043e\u0432, \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0438\u0441\u043a\u0430\u0442\u044c \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435.<\/p>\n<p>  \u041d\u0430 \u044d\u0442\u043e\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u0430. \u0412 \u0446\u0435\u043b\u043e\u043c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u0435 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0437\u0430\u0439\u043c\u0435\u0442 \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0447\u0430\u0441\u0430. \u041d\u0430\u0434\u0435\u044e\u0441\u044c \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u0412\u0430\u043c \u043f\u043e\u043b\u0435\u0437\u043d\u0430.<\/p>\n<p>  \u0412 \u043f\u043b\u0430\u043d\u0430\u0445 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0437\u043e\u0440 \u0441\u0438\u0441\u0442\u0435\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0432\u0435\u0440\u0441\u0438\u0438(git, mercurial).       <\/p>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habrahabr.ru\/post\/282003\/\"> https:\/\/habrahabr.ru\/post\/282003\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<br \/>\n<h1>\u0414\u043e\u0431\u0440\u044b\u0439 \u0434\u0435\u043d\u044c<\/h1>\n<p>  \u0422\u0430\u043a \u0441\u043b\u043e\u0436\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0435\u0434\u0438\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0447\u0443\u044e \u0441\u0440\u0435\u0434\u0443 (workflow) \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u043e\u0432 \u0432 \u0433\u0440\u0443\u043f\u043f\u0435 \u043d\u0430 \u041e\u0421 Windows. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0446\u0435\u043b\u044c \u2014 \u044d\u0442\u043e \u0432 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0440\u043e\u043a\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0437\u043d\u0430\u043d\u0438\u0439 \u0432\u0441\u0435\u043c \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0430\u043c \u0433\u0440\u0443\u043f\u043f\u044b. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u044b\u043b\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u043d\u043e\u0433\u0438\u0435 \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 unix-\u0441\u0438\u0441\u0442\u0435\u043c\u0430\u043c\u0438 \u0438 \u043f\u043e\u043d\u044f\u0442\u0438\u044f \u043d\u0435 \u0438\u043c\u0435\u044e\u0442, \u043a\u0430\u043a \u0437\u0430\u0432\u0435\u0441\u0442\u0438 \u0442\u043e\u0442 \u0436\u0435 SASS \u043d\u0430 \u041e\u0421 Windows. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e (\u043f\u043e\u0448\u0430\u0433\u043e\u0432\u0443\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e) \u043f\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0440\u0430\u0431\u043e\u0447\u0435\u0439 \u0441\u0440\u0435\u0434\u044b.<\/p>\n<p>  \u041f\u043e \u0441\u043e\u0432\u0435\u0442\u0443 \u043a\u043e\u043b\u043b\u0435\u0433 \u0440\u0435\u0448\u0438\u043b \u0432\u044b\u043b\u043e\u0436\u0438\u0442\u044c \u0435\u0435 \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f. \u0414\u0443\u043c\u0430\u044e, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u043c \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0430\u043c \u044d\u0442\u043e \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f, \u0442.\u043a. \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u043d\u0435\u043c\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0439\u0442\u0438 \u043a \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0438\u0441\u0442\u0438\u043d\u0430\u043c.<\/p>\n<p>  \u0421\u0440\u0430\u0437\u0443 \u043e\u0433\u043e\u0432\u043e\u0440\u044e\u0441\u044c, \u0447\u0442\u043e \u0432\u044b\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u2014 \u0434\u0435\u043b\u043e \u0441\u0443\u0433\u0443\u0431\u043e \u043b\u0438\u0447\u043d\u043e\u0435, \u0438 \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0438\u0436\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0438\u0436\u0435, \u0434\u0435\u043b\u0430\u043b\u043e\u0441\u044c \u043e\u0441\u043e\u0437\u043d\u0430\u043d\u043d\u043e \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u0443\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u0438\u043b\u0438 \u043d\u0435\u0442 \u2014 \u0440\u0435\u0448\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u043c.<\/p>\n<p>  \u0418\u0442\u0430\u043a \u043d\u0430\u0447\u043d\u0451\u043c!   <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-278648","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/278648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=278648"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/278648\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=278648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=278648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=278648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}