{"id":263669,"date":"2015-08-17T05:37:02","date_gmt":"2015-08-17T01:37:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=263669"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=263669","title":{"rendered":"Level Up \u0434\u043b\u044f \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432: gulp \u0438 requirejs"},"content":{"rendered":"\n<ul>\n<li><a href=\"#water\">\u0412\u043e\u0434\u0430<\/a><\/li>\n<li><a href=\"#gulp\">Gulp<\/a><\/li>\n<li><a href=\"#requirejs\">Require.js<\/a><\/li>\n<\/ul>\n<p>  <a name=\"water\"><\/a>  <\/p>\n<h2>\u041f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435<\/h2>\n<p>  \u041a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u0441 \u043a\u0430\u043a\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u043e\u043d\u043e \u0440\u0435\u0448\u0430\u0435\u0442, \u043d\u043e \u0438 \u043e\u0442 \u0442\u0430\u043a\u0438\u0445, \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0432\u0442\u043e\u0440\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u044b\u0445 \u0444\u0430\u043a\u0442\u043e\u0440\u043e\u0432 \u043a\u0430\u043a \u00ab\u043a\u0440\u0430\u0441\u043e\u0442\u0430 \u043a\u043e\u0434\u0430\u00bb.<\/p>\n<p>  \u041f\u043e\u0434 \u043a\u0440\u0430\u0441\u043e\u0442\u043e\u0439 \u043a\u043e\u0434\u0430 \u044f (\u043f\u043e\u043b\u0430\u0433\u0430\u044e, \u0438 \u043c\u043d\u043e\u0433\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0435) \u043f\u043e\u043d\u0438\u043c\u0430\u044e:<\/p>\n<ul>\n<li>\u0427\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/li>\n<li>\u041f\u0440\u043e\u0441\u0442\u043e\u0442\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/li>\n<li>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/li>\n<\/ul>\n<p>  \u041a\u0430\u0436\u0434\u044b\u0439 \u043d\u0430 \u0437\u0430\u0440\u0435 \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0443\u0442\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043f\u0438\u0441\u0430\u043b \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u0440\u0435\u0448\u0438\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u0443\u044e (\u0447\u0430\u0441\u0442\u043e \u0434\u0430\u0436\u0435 \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u0443\u044e) \u0437\u0430\u0434\u0430\u0447\u0443, \u043d\u043e \u043f\u0440\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0447\u0442\u043e-\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u043b\u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u043f\u043e\u0445\u043e\u0436\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b.<br \/>  \u0414\u0430 \u0438 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0430 \u0441\u043e\u043c\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f \u0441 \u0434\u0432\u0443\u043c\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0441\u0432\u043e\u044e \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0443 \u043f\u043e\u0432\u044b\u0441\u044f\u0442 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0432\u0435\u0434\u0443\u0442 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 \u0433\u043e\u043b\u043e\u0432\u0435.<br \/>  <a name=\"habracut\"><\/a><br \/>  <a name=\"gulp\"><\/a>  <\/p>\n<h2>Gulp<\/h2>\n<p>  \u0427\u0442\u043e \u0435\u0441\u0442\u044c gulp?<br \/>  \u042d\u0442\u043e \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432.<\/p>\n<p>  \u0414\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d \u043d\u0443\u0436\u0435\u043d?<br \/>  \u0412\u043e\u043f\u0440\u043e\u0441 \u0441\u043b\u043e\u0436\u043d\u0435\u0435.<\/p>\n<p>  \u041d\u0435 \u0442\u0435\u0440\u044f\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u0442\u043e\u043c \u0432\u0438\u0434\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c:<\/p>\n<ul>\n<li>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438<\/li>\n<li>\u041c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u044b<\/li>\n<li>\u041f\u0440\u043e\u0447\u0435\u0435<\/li>\n<\/ul>\n<p>  \u041f\u043e \u0441\u0443\u0442\u0438 \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0434\u0432\u0435 \u043a\u043e\u043f\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: \u0440\u0430\u0431\u043e\u0447\u0443\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u0430 \u0432\u0430\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0443\u0434\u043e\u0431\u043d\u043e \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u043a\u0438 \u0438 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u0443\u044e (public), \u0443\u0436\u0435 \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u0443\u044e \u0438\u0437 \u0432\u0430\u0448\u0438\u0445 \u043a\u0443\u0441\u043e\u0447\u043a\u043e\u0432 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e. <\/p>\n<p>  \u0413\u043e\u0432\u043e\u0440\u044f \u043e \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u043e\u043c \u0438\u0437 \u043a\u0443\u0441\u043e\u0447\u043a\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u044f \u0438\u043c\u0435\u043b \u0432 \u0432\u0438\u0434\u0443 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043a\u0440\u0430\u0439\u043d\u0435 \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u043d\u0430 \u043f\u0443\u0442\u0438 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u043a\u0432\u0430\u043b\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430. \u041f\u0440\u0438\u0447\u0438\u043d\u044b \u0442\u043e\u043c\u0443, \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e: \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043b\u0435\u0433\u043a\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 (\u043d\u0435 \u0434\u043e\u043f\u0438\u043b\u0438\u0432\u0430\u044f \u043d\u0430\u043f\u0438\u043b\u044c\u043d\u0438\u043a\u043e\u043c), \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438, \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 \u0433\u043e\u043b\u043e\u0432\u0435.<\/p>\n<p>  Gulp \u043f\u043e \u0441\u0443\u0442\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f js \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c (\u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 node.js.<br \/>  \u042d\u0442\u043e \u0432\u043e\u0432\u0441\u0435 \u043d\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0430\u0434\u043e \u0438\u0437\u0443\u0447\u0438\u0442\u044c nodejs, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c gulp, \u043d\u043e \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u0435\u0433\u043e \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 (npm) \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f.<\/p>\n<p>  \u0417\u0430\u0434\u0430\u0447\u0430 \u043f\u0435\u0440\u0432\u0430\u044f: \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0441\u0435\u0440\u0432\u0435\u0440 <a href=\"https:\/\/nodejs.org\/\">node.js<\/a>.<br \/>  \u041d\u0435 \u0431\u0443\u0434\u0443 \u0437\u0430\u043e\u0441\u0442\u0440\u044f\u0442\u044c \u043d\u0430 \u044d\u0442\u043e\u043c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u043e. \u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c npm.<\/p>\n<p>  \u0417\u0430\u0434\u0430\u0447\u0430 \u0432\u0442\u043e\u0440\u0430\u044f: \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c (\u043f\u043e \u0441\u0443\u0442\u0438 \u0441\u043a\u0430\u0447\u0430\u0442\u044c) gulp \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043f\u0430\u043a\u0435\u0442\u043e\u0432.<br \/>  \u0414\u043b\u044f \u043c\u0430\u043a\u043e\u0432\u043e\u0434\u043e\u0432 \u044d\u0442\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c: \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c  <\/p>\n<pre><code class=\"bash\">npm install gulp -g <\/code><\/pre>\n<p>  \u0424\u043b\u0430\u0433 -g \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439  <\/p>\n<pre><code class=\"bash\">gulp gulp task <\/code><\/pre>\n<p>  \u0417\u0430\u0442\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043f\u0435\u0440\u0435\u0439\u0434\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0432 \u043d\u0443\u0436\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443  <\/p>\n<pre><code class=\"bash\">mkdir assets public assets\/js assets\/img assets\/css touch gulpfile.js npm init npm i --save-dev gulp <\/code><\/pre>\n<p>  \u041f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443:  <\/p>\n<ul>\n<li>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0430\u043f\u043e\u043a<\/li>\n<li>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430<\/li>\n<li>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c npm, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0432 \u0441\u0431\u043e\u0440\u043a\u0435 \u043c\u043e\u0434\u0443\u043b\u0438<\/li>\n<li>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c gulp \u0441 \u043a\u043b\u044e\u0447\u0435\u043c &quot;&#8212;save-dev&quot;, \u0442\u043e \u0435\u0441\u0442\u044c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/li>\n<\/ul>\n<p>  \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u0432 \u0441\u0431\u043e\u0440\u043a\u0435  <\/p>\n<pre><code class=\"bash\">npm i --save-dev gulp gulp-autoprefixer gulp-concat-css gulp-connect gulp-livereload gulp-minify-css gulp-sass gulp-rename gulp-uncss gulp-uglify  gulp-imagemin  imagemin-pngquant <\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041a\u0440\u0430\u0442\u043a\u043e \u043e \u043d\u0438\u0445<\/b><\/p>\n<div class=\"spoiler_text\">\n<ul>\n<li>gulp-autoprefixer \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u0438 \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430\u043c\u0438 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432<\/li>\n<li>gulp-concat-css \/\/ \u0421\u043a\u043b\u0435\u0438\u0432\u0430\u0435\u0442 \u0441\u0442\u0438\u043b\u0438 \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b<\/li>\n<li>gulp-connect \/\/ \u0421\u0435\u0440\u0432\u0435\u0440<\/li>\n<li>gulp-livereload \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043a\u043e\u0434\u0430<\/li>\n<li>gulp-minify-css \/\/ \u041c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439<\/li>\n<li>gulp-sass \/\/ \u0411\u0435\u0437 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 (\u043f\u043e\u043a\u0430 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e)<\/li>\n<li>gulp-rename \/\/ \u041f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0444\u0430\u0439\u043b\u044b<\/li>\n<li>gulp-uncss \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0438<\/li>\n<li>gulp-uglify \/\/ \u041c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432<\/li>\n<li>gulp-imagemin \/\/ \u041c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/li>\n<li>imagemin-pngquant \/\/ \u041c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/li>\n<\/ul>\n<p>  <\/div>\n<\/div>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043d\u0430\u0438\u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0439\u0448\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u044b <a href=\"http:\/\/gulpjs.com\/plugins\/\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u2014 \u044d\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u0442\u043e \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u043d\u0430\u0434\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442.<br \/>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0444\u0430\u0439\u043b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a (gulpfile.js) \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0437\u0430\u0434\u0430\u0447\u0438 (\u0442\u0430\u0441\u043a\u0438)  <\/p>\n<pre><code class=\"javascript\">gulp.task('js',function(){                 \/\/ \u0422\u0430\u0441\u043a &quot;js&quot;     gulp.src('.\/assets\/js\/*.js')           \/\/ \u0421 \u0447\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c     .pipe(uglify())                            \/\/ \u0427\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u043c. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c     .pipe(gulp.dest('.\/public\/js\/'))    \/\/ \u041a\u0443\u0434\u0430 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442     .pipe(connect.reload());           \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 (\u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e) }); <\/code><\/pre>\n<p>  \u041d\u0430 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043c\u043e\u0435\u0433\u043e  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">gulpfile.js<\/b><\/p>\n<div class=\"spoiler_text\">var gulp = require(&#8216;gulp&#8217;);<br \/>  var concatCss = require(&#8216;gulp-concat-css&#8217;);<br \/>  var minifyCss = require(&#8216;gulp-minify-css&#8217;);<br \/>  var rename = require(\u00abgulp-rename\u00bb);<br \/>  var autoprefixer = require(&#8216;gulp-autoprefixer&#8217;);<br \/>  var livereload = require(&#8216;gulp-livereload&#8217;);<br \/>  var connect = require(&#8216;gulp-connect&#8217;);<br \/>  var sass = require(&#8216;gulp-sass&#8217;);<br \/>  var uglify = require(&#8216;gulp-uglify&#8217;);<br \/>  var imagemin = require(&#8216;gulp-imagemin&#8217;);<br \/>  var pngquant = require(&#8216;imagemin-pngquant&#8217;);<\/p>\n<p>  \/\/ \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435<br \/>  gulp.task(&#8216;css&#8217;, function () {<br \/>   gulp.src(&#8216;.\/assets\/css\/*.css&#8217;)<br \/>   .pipe(concatCss(\u00abstyle.min.css\u00bb))<br \/>   .pipe(minifyCss({compatibility: &#8216;ie8&#8217;}))<br \/>   .pipe(autoprefixer({<br \/>   browsers: [&#8216;last 10 versions&#8217;],<br \/>   cascade: false<br \/>   }))<br \/>   .pipe(gulp.dest(&#8216;.\/public\/css\/&#8217;));<\/p>\n<p>   gulp.src(&#8216;.\/assets\/css\/fight\/*.css&#8217;)<br \/>   .pipe(concatCss(\u00abfight.min.css\u00bb))<br \/>   .pipe(minifyCss({compatibility: &#8216;ie8&#8217;}))<br \/>   .pipe(autoprefixer({<br \/>   browsers: [&#8216;last 10 versions&#8217;],<br \/>   cascade: false<br \/>   }))<br \/>   .pipe(gulp.dest(&#8216;.\/public\/css\/&#8217;))<br \/>   .pipe(connect.reload());<br \/>  });<\/p>\n<p>  gulp.task(&#8216;sass&#8217;, function () {<br \/>   gulp.src(&#8216;.\/assets\/sass\/*.ccss&#8217;)<br \/>   .pipe(sass(\u00abstyle.css\u00bb))<br \/>   .pipe(minifyCss(&#187;))<br \/>   .pipe(rename(\u00abstyle.sass.min.css\u00bb))<br \/>   .pipe(autoprefixer({<br \/>   browsers: [&#8216;last 10 versions&#8217;],<br \/>   cascade: false<br \/>   }))<br \/>   .pipe(gulp.dest(&#8216;.\/public\/css\/&#8217;))<br \/>   .pipe(connect.reload());<br \/>  });<\/p>\n<p>  gulp.task(&#8216;html&#8217;,function(){<br \/>   gulp.src(&#8216;.\/assets\/*.html&#8217;)<br \/>   .pipe(gulp.dest(&#8216;.\/public\/&#8217;))<br \/>   .pipe(connect.reload());<br \/>  });<\/p>\n<p>  gulp.task(&#8216;fonts&#8217;,function(){<br \/>   gulp.src(&#8216;.\/assets\/font\/**\/*&#8217;)<br \/>   .pipe(gulp.dest(&#8216;.\/public\/font\/&#8217;))<br \/>   .pipe(connect.reload());<br \/>  });<\/p>\n<p>  gulp.task(&#8216;js&#8217;,function(){<br \/>   gulp.src(&#8216;.\/assets\/js\/*.js&#8217;)<br \/>   .pipe(uglify())<br \/>   .pipe(gulp.dest(&#8216;.\/public\/js\/&#8217;))<br \/>   .pipe(connect.reload());<br \/>  });<br \/>  gulp.task(&#8216;jslibs&#8217;,function(){<br \/>   gulp.src(&#8216;.\/assets\/js\/libs\/*.js&#8217;)<br \/>   .pipe(uglify())<br \/>   .pipe(gulp.dest(&#8216;.\/public\/js\/libs\/&#8217;))<br \/>   .pipe(connect.reload());<br \/>  });<br \/>  gulp.task(&#8216;jsmods&#8217;,function(){<br \/>   gulp.src(&#8216;.\/assets\/js\/modules\/**\/*.js&#8217;)<br \/>   .pipe(uglify())<br \/>   .pipe(gulp.dest(&#8216;.\/public\/js\/modules\/&#8217;))<br \/>   .pipe(connect.reload());<br \/>  });<\/p>\n<p>  gulp.task(&#8216;img&#8217;,function(){<br \/>   gulp.src(&#8216;.\/assets\/img\/*&#8217;)<br \/>   .pipe(imagemin({<br \/>   progressive: true,<br \/>   svgoPlugins: [{removeViewBox: false}],<br \/>   use: [pngquant()]<br \/>   }))<br \/>   .pipe(gulp.dest(&#8216;.\/public\/img\/&#8217;))<br \/>   .pipe(connect.reload());<br \/>  });<\/p>\n<p>  \/\/ Connect<br \/>  gulp.task(&#8216;connect&#8217;, function() {<br \/>   connect.server({<br \/>   root: &#8216;public&#8217;,<br \/>   livereload: true<br \/>   });<br \/>  });<\/p>\n<p>  \/\/ Watch<br \/>  gulp.task(&#8216;watch&#8217;,function(){<br \/>   gulp.watch(&quot;.\/assets\/css\/**\/*.css&quot;, [\u00abcss\u00bb]);<br \/>   gulp.watch(&quot;.\/assets\/*.html&quot;, [\u00abhtml\u00bb]);<br \/>   gulp.watch(&quot;.\/assets\/js\/*.js&quot;, [\u00abjs\u00bb]);<br \/>   gulp.watch(&quot;.\/assets\/js\/libs\/*.js&quot;, [\u00abjslibs\u00bb]);<br \/>   gulp.watch(&quot;.\/assets\/js\/modules\/**\/*.js&quot;, [\u00abjsmods\u00bb]);<br \/>  });<\/p>\n<p>  \/\/ Default<br \/>  gulp.task(&#8216;default&#8217;, [\u00abhtml\u00bb, \u00abcss\u00bb, \u00absass\u00bb, \u00abjs\u00bb,\u00abjslibs\u00bb, \u00abjsmods\u00bb, \u00abconnect\u00bb, \u00abwatch\u00bb]);  <\/div>\n<\/div>\n<p>  \u0417\u0430\u043e\u0441\u0442\u0440\u044e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043b\u0438\u0448\u044c \u043d\u0430 \u043f\u0430\u0440\u0435 \u0432\u0435\u0449\u0435\u0439.<br \/>  \u041b\u044e\u0431\u0430\u044f \u0438\u0437 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 (\u0442\u0430\u0441\u043a\u043e\u0432) \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0443  <\/p>\n<pre><code class=\"bash\">gulp task <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043c\u044b \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u00abgulp\u00bb, \u0447\u0442\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0441\u044f \u0442\u0430\u0441\u043a \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0442\u043e \u0435\u0441\u0442\u044c default.<\/p>\n<p>  \u0422\u0430\u0441\u043a watch \u2014 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0442\u0430\u0441\u043a \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u0444\u0430\u0439\u043b\u0430\u0445. \u0415\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u0430 (\u0441\u043c \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u0434), \u0447\u0442\u043e \u0443\u0432\u0435\u0440\u0435\u043d, \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u0441\u044f. \u042d\u0442\u043e\u0442 \u0442\u0430\u0441\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u043b\u044e\u0431\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0444\u0430\u0439\u043b, gulp \u044d\u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442 \u0438 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0435\u0440\u0435\u0442 \u043f\u0440\u043e\u0435\u043a\u0442, \u0430 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0449\u0435 \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0438 \u0432\u0430\u043c \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0432\u0437\u0433\u043b\u044f\u0434 \u043d\u0430 \u043d\u0443\u0436\u043d\u044b\u0439 \u043c\u043e\u043d\u0438\u0442\u043e\u0440, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<br \/>  \u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u0432\u044b\u0448\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0432\u0435\u0434\u0438\u0442\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 (\u043d\u0430\u0445\u043e\u0434\u044f\u0441\u044c \u0432 \u043f\u0430\u043f\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430)  <\/p>\n<pre><code class=\"bash\">gulp img gulp <\/code><\/pre>\n<p>  \u0420\u0430\u0431\u043e\u0442\u0443 \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 \u0432\u044b\u043d\u0435\u0441 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0430\u0441\u043a \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 (\u043c\u043e\u0435\u0433\u043e).<br \/>  \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0439\u0442\u0435 \u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u0443 \u0432\u0430\u0441 \u0437\u0430\u043f\u0443\u0449\u0435\u043d watch&#8217;\u0435\u0440 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440.<\/p>\n<p>  \u041f\u043e \u0441\u0443\u0442\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0443\u044e js \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0430 \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u0441\u043e\u0431\u0435\u0440\u0435\u0442 \u0432\u0441\u0435 \u044d\u0442\u043e \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b.<br \/>  \u0422\u0443\u0442 \u043c\u044b \u0432\u043f\u043b\u043e\u0442\u043d\u0443\u044e \u043f\u043e\u0434\u043e\u0448\u043b\u0438 \u043a \u0432\u043e\u043f\u0440\u043e\u0441\u0443 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0412\u044b\u0448\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 (\u0438\u0437\u0434\u0430\u043b\u0435\u043a\u0430) \u2014 \u043a\u0430\u0436\u0434\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (\u043c\u043e\u0434\u0443\u043b\u044e) \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b. \u041d\u0435 \u0437\u0430\u043f\u0443\u0442\u0430\u0435\u0448\u044c\u0441\u044f. \u041d\u043e \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u0433\u0434\u0430 \u043e\u0434\u0438\u043d \u043c\u043e\u0434\u0443\u043b\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0434\u0440\u0443\u0433\u043e\u0433\u043e, \u043e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445, \u0430 \u0442\u0435 \u0435\u0449\u0435 \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445.<br \/>  \u0414\u0430, \u0442\u0443\u0442 \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043d\u0430\u0434\u043e \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u0418 \u0442\u0443\u0442 \u043d\u0430\u043c \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 requirejs, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442 AMD (Asynchronous module definition) \u043f\u043e\u0434\u0445\u043e\u0434 (\u0435\u0441\u0442\u044c \u0435\u0449\u0435 common.js, \u043d\u043e \u043e \u043d\u0435\u043c \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435).<br \/>  <a name=\"requirejs\"><\/a>  <\/p>\n<h2>Require.js<\/h2>\n<p>  Require.js \u0431\u0443\u0434\u0435\u043c \u043e\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c \u043d\u0430 \u0436\u0438\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435. \u0412 <a href=\"http:\/\/habrahabr.ru\/post\/259907\/\">\u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u0435\u0439<\/a> \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043d\u0443\u044e \u0438\u0433\u0440\u0443\u0448\u043a\u0443. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u043f\u0440\u043e\u0441\u0442\u043e <a href=\"https:\/\/github.com\/seokirill\/PlayingCardsMatreshka\">\u043a\u0443\u0447\u0430 \u043a\u043e\u0434\u0430<\/a>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u0435\u0439\u0447\u0430\u0441 \u0438 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0433\u0440\u0435\u0431\u0430\u0442\u044c.<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 <a href=\"http:\/\/requirejs.org\/\">\u0441\u043a\u0430\u0447\u0430\u0435\u043c reuirejs<\/a> \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0432 \u043d\u0430\u0448\u0435\u043c index.html, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.  <\/p>\n<pre><code class=\"html\">&lt;script data-main=&quot;js\/config&quot; src=&quot;js\/libs\/require.js&quot;&gt;&lt;\/script&gt; <\/code><\/pre>\n<p>  \u0412 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 data-main \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043f\u0443\u0442\u044c \u043a \u0442\u043e\u0447\u043a\u0435 \u0432\u0445\u043e\u0434\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u043d\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435).<\/p>\n<p>  Config.js \u0432 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0430\u043b\u0438\u0430\u0441\u043e\u0432 (\u0445\u043e\u0442\u044f \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0438 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e)  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Config.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">requirejs.config({ \tpaths: { \t\t&quot;rClck&quot; : &quot;modules\/disable_rclck&quot;, \t\t&quot;app&quot; : &quot;app&quot;, \t\t&quot;socket&quot; : &quot;modules\/webSockets&quot;, \t\t&quot;Actions&quot; : &quot;modules\/Actions&quot;, \t\t&quot;User&quot; : &quot;modules\/User&quot;, \t\t&quot;userList&quot; : &quot;modules\/userlist&quot;, \t\t&quot;Matreshka&quot; : &quot;libs\/matreshka.min&quot;, \t\t&quot;Modal&quot; : &quot;modules\/Modal&quot;, \t\t&quot;fight&quot; : &quot;modules\/fight&quot;, \t\t&quot;jquery&quot; : &quot;libs\/jquery&quot;, \t\t&quot;myCards&quot; : &quot;modules\/myCards&quot;, \t\t&quot;opCards&quot; : &quot;modules\/opCards&quot;, \t\t&quot;mana&quot; : &quot;modules\/mana&quot; \t} });  require(['app'],function(app){ \tapp.menu(); }); <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 requirejs \u043f\u0440\u043e\u0441\u0442 \u2014 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 (\u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b \u043a\u0430\u043a \u043f\u0443\u0442\u0438, \u0442\u0430\u043a \u0438 \u0430\u043b\u0438\u0430\u0441\u044b, \u0432\u0441\u0435 \u0431\u0435\u0437 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f js \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f), \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u0441\u043b\u0435 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 (\u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c).  <\/p>\n<pre><code class=\"javascript\">require(['app'],function(app){ \tapp.menu(); }); <\/code><\/pre>\n<p>  \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u044c app, \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 menu() \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f.<br \/>  \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u043a\u043e\u043b\u043b\u0431\u044d\u043a, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0430\u0448 \u043c\u043e\u0434\u0443\u043b\u044c.  <\/p>\n<pre><code class=\"javascript\">define(['socket'],function(socket){ \/\/ \u0417\u0430\u0432\u0442\u0441\u0442\u044c \u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044f socket  \tvar app = { \t\tmenu: function(){ \t\t\trequire(['Actions', 'Modal'],function(Actions, Modal){ \/\/ \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u043e\u0441\u043b\u0435 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \t\t\t\tif (socket.readyState === 1) { \t\t\t\t\tActions.exec('loginFailed','\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u043b\u043e\u0433\u0438\u043d (\u043d\u0435 \u043c\u0435\u043d\u0435\u0435 4 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432)'); \t\t\t\t}else{ \t\t\t\t\tModal.box('\u041d\u0435\u0442 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c'); \t\t\t\t} \t\t\t}); \t\t} \t}  \treturn app; \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u043c\u043e\u0434\u0443\u043b\u044f }) <\/code><\/pre>\n<p>  \u041c\u0435\u0442\u043e\u0434 socket.readyState \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u0435\u0441\u0442\u044c \u043b\u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c. \u0415\u0441\u043b\u0438 \u0434\u0430, \u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 Actions.exec, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442, \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e (Modal.box).<\/p>\n<p>  Actions, socket \u0438 Modal \u2014 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u043d\u0430\u0440\u0430\u0432\u043d\u0435 \u0441 \u043c\u043e\u0434\u0443\u043b\u0435\u043c app. \u0423 \u043d\u0438\u0445 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0441\u0432\u043e\u044f \u043b\u043e\u0433\u0438\u043a\u0430, \u0441\u0432\u043e\u0438 \u043c\u0435\u0442\u043e\u0434\u044b.<\/p>\n<p>  \u0412\u0441\u0435, \u0447\u0442\u043e \u0440\u0430\u043d\u044c\u0448\u0435 \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u043e \u0432 <a href=\"https:\/\/github.com\/seokirill\/PlayingCardsMatreshka\/blob\/master\/js\/fight.js\">\u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435<\/a>, \u043c\u044b \u0440\u0430\u0437\u0431\u0438\u043b\u0438 \u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u0438. \u041f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u044d\u0442\u043e \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u0443\u0441\u043a\u0438 \u043a\u043e\u0434\u0430, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0435 \u0437\u0430 \u0440\u0430\u0437\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0431\u0443\u0434\u044c \u0442\u043e \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u043f\u043e WebSockets, \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0430\u043c\u0438 \u0438\u043b\u0438 \u00ab\u043f\u0440\u043e\u0447\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438\u00bb.<\/p>\n<p>  \u041a \u043f\u0440\u043e\u0447\u0438\u043c \u0437\u0430\u0434\u0430\u0447\u0430\u043c \u044f \u043e\u0442\u043d\u043e\u0448\u0443 \u0442\u043e, \u0447\u0442\u043e \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438. \u0420\u0430\u043d\u044c\u0448\u0435 \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 Actions  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Actions<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">var Actions = { \tsend: function(method, args){ \t\tconsole.log('send: ' + method); \t\targs = args || ''; \t\tsocketInfo.method = method; \t\tsocketInfo.args = args; \t\tsocket.send(JSON.stringify(socketInfo)); \t}, \tresume: function(){ \t\tUser = JSON.parse(localStorage['PlayingCardsUser']); \t\tthis.send('reConnect',User.login); \t}, \tsetMotion: function(login){ \t\tconsole.log('setMotion: ' + login); \t\tUser.currentMotion = login; \t\tthis.motionMsg(); \t\tthis.getCard(); \t\tthis.setTimer(); \t} ... <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0414\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON \u0432 \u0432\u0438\u0434\u0435<br \/>  <code> {'function': 'fooName', 'args': [\u043c\u0430\u0441\u0441\u0438\u0432\/\u043e\u0431\u044a\u0435\u043a\u0442 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432]} <\/code><\/p>\n<p>  \u0418 \u0440\u0430\u043d\u044c\u0448\u0435 \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0442\u0430\u043a:  <\/p>\n<pre><code class=\"javascript\">socket.onmessage = function (e){ \tif (typeof e.data === &quot;string&quot;){ \t\tvar request = JSON.parse(e.data); \t\tActions[request.function](request.args); \t}; } <\/code><\/pre>\n<p>  \u041d\u043e \u043f\u043e \u043c\u0435\u0440\u0435 \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u044f \u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442 Actions \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u0443\u0440\u043e\u0432\u043d\u044f, \u043a\u043e\u0433\u0434\u0430 \u0443\u0436\u0435 \u0442\u0440\u0443\u0434\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043f\u0430\u043c\u044f\u0442\u0438 \u0438 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043d\u0435\u043c. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u043e\u0431\u044c\u0435\u043c \u0435\u0433\u043e \u043d\u0430 \u043c\u0435\u043b\u043a\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 (\u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u042d\u0442\u0443 \u0438\u0434\u0435\u043e\u043b\u043e\u0433\u0438\u044e \u044f \u0443\u0432\u0438\u0434\u0435\u043b \u0432 gulp, \u0438 \u043e\u043d\u0430 \u043c\u043d\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0430\u0441\u044c).<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 Actions  <\/p>\n<pre><code class=\"javascript\">define([&quot;socket&quot;],function(socket){  \t\/\/ Config \tvar path = 'modules\/Actions\/';  \tvar Actions = { \t\texec: function(){ \t\t\tvar args = Array.prototype.slice.call(arguments); \t\t\tvar actionName = args.shift();  \t\t\trequire([path + actionName],function(action){ \/\/ \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c \t\t\t\taction.run.apply(action,args);                  \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0435\u0433\u043e \t\t\t});\t \t\t} \t}  \treturn Actions; }) <\/code><\/pre>\n<p>  \u0412 \u043c\u0435\u0442\u043e\u0434 exec \u043c\u043e\u0434\u0443\u043b\u044f Actions \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f (action), \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 \u044d\u0442\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c.<br \/>  \u0412 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:  <\/p>\n<pre><code class=\"javascript\">define(['myCards'],function(myCards){ \/\/ \u0417\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044f myCards  \tvar action = { \t\trun: function(card){             \/\/ \u041c\u0435\u0442\u043e\u0434 run()  \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u0432 Actions.js:    action.run.apply(action,args);       \t\t\tmyCards.hand.add(card); \/\/ \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u044f  \t\t} \t}  \treturn action; \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u043c\u043e\u0434\u0443\u043b\u044f }) <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u0435\u0440\u0442\u043a\u043e\u0439 \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 \u0434\u043e\u0431\u043e\u0440\u0430 \u043a\u0430\u0440\u0442  <\/p>\n<pre><code class=\"javascript\">myCards.hand.add(card); <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438 \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430. \u0427\u0442\u043e\u0431\u044b \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u0435\u0437\u0431\u043e\u043b\u0435\u0437\u043d\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a.<br \/>  \u0422\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0441\u0440\u0430\u0437\u0443 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434 myCards.hand.add(), \u043d\u043e \u043c\u044b \u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0435\u0441\u0442\u044c. \u041f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0437\u0433\u0440\u0435\u0441\u0442\u0438 \u043a\u0443\u0447\u0443 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u0436\u0435 \u0435\u0441\u0442\u044c, \u0440\u0430\u0437\u043b\u043e\u0436\u0438\u0442\u044c \u043f\u043e \u043f\u043e\u043b\u043e\u0447\u043a\u0430\u043c.<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u0438\u043c\u0435\u044f \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043e\u0434\u0438\u043d js \u0444\u0430\u0439\u043b, \u0433\u0434\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u0432\u0441\u0435 \u043e\u0442 \u0438 \u0434\u043e, \u043c\u044b \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b\u0438 \u0435\u0433\u043e \u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u0438, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0435 \u0437\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u0430\u0440\u0442 (\u043d\u0430 \u0441\u0442\u043e\u043b\u0435 \u0438 \u0432 \u0440\u0443\u043a\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430), websocket&#8217;\u043e\u0432 \u0438 \u043f\u0440\u043e\u0447\u0435\u0433\u043e. \u0410 \u0442\u0430\u043a \u0436\u0435 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0438 \u0432\u043d\u0435\u0434\u0440\u0438\u043c \u0435\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043b\u0443\u0447\u0448\u0435 \u0432\u043e \u0432\u0441\u0435\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u044c, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u043c\u0430\u043d\u0443:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">mana.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">define(['Matreshka'],function(Matreshka){ \/\/ \u0417\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044f Matreshka (js \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a) \t \t\/\/ var diamond = $('#icons #diamond').html(); \tvar diamond = '';  \t\/\/\/\/\/\/\/\/\/\/\/ \u041a\u0430\u0440\u0442\u044b \u0432 \u043c\u043e\u0435\u0439 \u0440\u0443\u043a\u0435 \tvar manaModel = Matreshka.Class({ \/\/ \u041c\u043e\u0434\u0435\u043b\u044c \u0441\u043f\u0438\u0441\u043a\u0430 \t\t'extends': Matreshka.Object, \t\tconstructor: function(data){ \t\t\tthis.jset(data); \t\t\tthis.on('render',function(){ \t\t\t\tthis.bindNode('active', ':sandbox', Matreshka.binders.className( 'active' )); \t\t\t}); \t\t} \t});   \tvar manaArray = Matreshka.Class({ \/\/ \u041a\u043b\u0430\u0441\u0441 \u0441\u043f\u0438\u0441\u043a\u0430 \t\t'extends': Matreshka.Array, \t\tModel: manaModel, \t\titemRenderer: '&lt;li&gt;&lt;\/li&gt;', \t\tconstructor: function(){ \t\t\tthis.bindNode('sandbox','#mana'); \/\/ \u0417\u0430\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0443 \t\t}, \t\tadd: function(){ \t\t\t\/\/ \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043a\u0440\u0438\u0441\u0442\u0430\u043b\u043b \t\t\tif (this.length &gt;= 10) return; \t\t\tthis.push({active:true}); \t\t}, \t\tspend: function(num){ \t\t\tvar num = num || 0; \t\t\tvar actives = this.filter(function(obj){ \t\t\t\tif (obj.active) return true; \t\t\t\treturn false; \t\t\t}); \t\t\tif(actives.length &lt; num) { \t\t\t\tconsole.log('\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u0430\u043d\u044b'); \t\t\t\treturn false; \t\t\t} \t\t\t\/\/ \u0414\u0435\u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c num \u043c\u0430\u043d\u044b \t\t\tfor (var i = this.length - 1; i &gt;= this.length - num; i--) { \t\t\t\tthis[i].active = false; \t\t\t}; \t\t\treturn true; \t\t}, \t\tsetAllActive: function(){ \t\t\tfor (var i = this.length - 1; i &gt;= 0; i--) { \t\t\t\tthis[i].active = true; \t\t\t}; \t\t} \t});  \tvar mana = new manaArray; \/\/ \u042d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 \u0441\u043f\u0438\u0441\u043a\u0430  \treturn mana; }) <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041c\u043e\u0434\u0443\u043b\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a (\u043c\u0430\u0441\u0441\u0438\u0432) \u043a\u0440\u0438\u0441\u0442\u0430\u043b\u043b\u043e\u0432 \u043c\u0430\u043d\u044b. \u0427\u0442\u043e \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0443\u043c\u0435\u0442\u044c?<\/p>\n<ul>\n<li>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0440\u0438\u0441\u0442\u0430\u043b\u043b \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0445\u043e\u0434\u0443: add()<\/li>\n<li>\u0422\u0440\u0430\u0442\u0438\u0442\u044c \u043f\u043e\u043b\u043d\u044b\u0435 (\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435) \u043a\u0440\u0438\u0441\u0442\u0430\u043b\u043b\u044b \u043c\u0430\u043d\u044b: spend()<\/li>\n<li>\u041f\u043e\u043f\u043e\u043b\u043d\u044f\u0442\u044c (\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438) \u043a\u0440\u0438\u0441\u0442\u0430\u043b\u043b\u044b \u043c\u0430\u043d\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0445\u043e\u0434: setAllActive()<\/li>\n<\/ul>\n<p>  \u0421\u043c\u044b\u0441\u043b \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0440\u0443\u0433\u0438\u043c \u043c\u043e\u0434\u0443\u043b\u044f\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u044d\u0442\u0438 \u043c\u0435\u0442\u043e\u0434\u044b. \u042d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u0441\u0435 \u0434\u043b\u044f \u0442\u043e\u0439 \u0436\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0431\u0435\u0437\u0431\u043e\u043b\u0435\u0437\u043d\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c. \u0413\u043b\u0430\u0432\u043d\u043e\u0435, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043d\u0435\u0434\u0440\u0438\u043c \u043d\u0430\u0448 \u043d\u043e\u0432\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0432 \u0438\u043c\u0435\u044e\u0449\u0443\u044e\u0441\u044f \u0438\u0433\u0440\u0443\u0448\u043a\u0443, \u043f\u0443\u0441\u0442\u044c \u043e\u0442\u043d\u044b\u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043a\u0430\u0440\u0442.<br \/>  \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u0440\u0438\u0441\u0442\u0430\u043b\u043b\u043e\u0432 \u043c\u0430\u043d\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0445\u043e\u0434. \u041a\u0430\u0436\u0434\u044b\u0439 \u0445\u043e\u0434 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u0432\u044b\u0437\u043e\u0432\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f (\u043c\u043e\u0434\u0443\u043b\u044f, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u0435\u043c Actions \u0447\u0435\u0440\u0435\u0437 \u043d\u0430\u0448 \u043c\u0435\u0442\u043e\u0434 exec) setMotion, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0442\u043e, \u043a\u0430\u043a\u043e\u0439 \u0438\u0433\u0440\u043e\u043a \u0441\u0435\u0439\u0447\u0430\u0441 \u0445\u043e\u0434\u0438\u0442.  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">setMotion.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">define(['Actions', 'User', 'myCards','mana'],function(Actions, User, myCards, mana){   \tvar action = { \t\trun: function(login){  \t\t\tUser.currentMotion = login; \t\t\tActions.exec('motionMsg');  \/\/ \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0435\u0439 \u0441\u0435\u0439\u0447\u0430\u0441 \u0445\u043e\u0434 \t\t\tActions.exec('setTimer');     \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0442\u0430\u0439\u043c\u0435\u0440\u0430 (\u0445\u043e\u0434 \u0434\u043b\u0438\u0442\u0441\u044f 2 \u043c\u0438\u043d\u0443\u0442\u044b) \t\t\tif (User.meCurrent()) {          \/\/ \u0415\u0441\u043b\u0438 \u043c\u043e\u0439 \u0445\u043e\u0434 \t\t\t\tmyCards.arena.enableAll();  \/\/ \u0410\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u043c \u043c\u043e\u0438 \u043a\u0430\u0440\u0442\u044b \u043d\u0430 \u0430\u0440\u0435\u043d\u0435. \u0421\u043f\u044f\u0449\u0438\u0435 \u043f\u0440\u043e\u0441\u044b\u043f\u0430\u044e\u0442\u0441\u044f \t\t\t\tActions.exec('getCard');       \/\/  \u0414\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0443 \t\t\t\tmana.setAllActive();            \/\/ \u0414\u0435\u043b\u0430\u0435\u043c \u0432\u0441\u0435 \u043a\u0440\u0438\u0441\u0442\u0430\u043b\u043b\u044b \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \t\t\t\tmana.add();                         \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u0440\u0438\u0441\u0442\u0430\u043b\u043b \u043c\u0430\u043d\u044b \t\t\t}; \t\t} \t}  \treturn action; }) <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u044b\u043c. \u041c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432\u044b\u0437\u043e\u0432 \u044d\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 (\u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u0445\u043e\u0434\u0430). \u0418 \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c \u043d\u0430\u0448 \u043c\u043e\u0434\u0443\u043b\u044c, \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e. \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0443 \u0436\u0435 \u043b\u043e\u0433\u0438\u043a\u0443.<\/p>\n<p>  \u041a\u0430\u043a \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043c\u0430\u043d\u0443? \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0432\u044b\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u0440\u0442 \u0438\u0437 \u0440\u0443\u043a\u0438 \u043d\u0430 \u0441\u0442\u043e\u043b. \u0412\u043d\u0435\u0441\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432 \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434:  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0411\u044b\u043b\u043e<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">\t\t\t\tthis.on('click::sandbox',function(){ \/\/ \u041a\u043b\u0438\u043a \u043f\u043e \u043a\u0430\u0440\u0442\u0435 \u0432 \u0440\u0443\u043a\u0435 \t\t\t\t\tif(!User.meCurrent() || myCards.arena.length &gt;= 7) return;  \/\/ \u0415\u0441\u043b\u0438 \u0445\u043e\u0436\u0443 \u043d\u0435 \u044f \u0438\u043b\u0438 \u043d\u0430 \u0430\u0440\u0435\u043d\u0435 \u043c\u043d\u043e\u0433\u043e \u043a\u0430\u0440\u0442 - false \t\t\t\t\tmyCards.arena.push(this); \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u0430\u0440\u0442\u0443 \u043d\u0430 \u0430\u0440\u0435\u043d\u0443 \t\t\t\t\tmyCards.hand.splice(myCards.hand.indexOf(this),1); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0435\u0435 \u0436\u0435 \u0438\u0437 \u0440\u0443\u043a\u0438 \t\t\t\t\tActions.exec('send', 'putCard',this.toJSON());  \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u044d\u0442\u043e \u0441\u043e\u043f\u0435\u0440\u043d\u0438\u043a\u0443 \t\t\t\t}); <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0421\u0442\u0430\u043b\u043e<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">\t\t\t\tthis.on('click::sandbox',function(){ \/\/ \u041a\u043b\u0438\u043a \u043f\u043e \u043a\u0430\u0440\u0442\u0435 \u0432 \u0440\u0443\u043a\u0435 \t\t\t\t\tif(!User.meCurrent() || myCards.arena.length &gt;= 7) return;                                         if(!mana.spend(this.mana)) return;                       \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435 \u0443\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u043e\u0435 \u043a\u043e\u043b-\u0432\u043e \u043c\u0430\u043d\u044b - false \t\t\t\t\tmyCards.arena.push(this);  \t\t\t\t\tmyCards.hand.splice(myCards.hand.indexOf(this),1); \t\t\t\t\tActions.exec('send', 'putCard',this.toJSON());  \t\t\t\t}); <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u041f\u0440\u0438\u043c\u0435\u043d\u0438\u0432 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0432 \u043e\u0441\u0432\u043e\u0435\u043d\u0438\u0438 \u0432\u0435\u0449\u0438, \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u0437\u0430\u0439\u043c\u0435\u0442 \u0443 \u0432\u0430\u0441 \u0431\u043e\u043b\u0435\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0434\u043d\u044f, \u043c\u044b \u0441\u043e\u0432\u0435\u0440\u0448\u0438\u043b\u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043a\u0430\u0447\u0435\u043a \u0432\u043f\u0435\u0440\u0435\u0434 \u043d\u0430 \u043f\u0443\u0442\u0438 \u043a \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e.<br \/>  \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043a\u043e\u0434 \u0435\u0449\u0435 \u0434\u0430\u043b\u0435\u043a \u043e\u0442 \u0438\u0434\u0435\u0430\u043b\u0430, \u043d\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0435\u0435, \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0435\u0435 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0434 \u043d\u0438\u043c \u0434\u0430\u043b\u044c\u0448\u0435. \u0412\u0435\u0434\u044c \u043f\u0440\u043e\u0449\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0431\u044f \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u043a\u0443\u0441\u043e\u0447\u0435\u043a, \u0447\u0435\u043c \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442.<\/p>\n<p>  \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0443\u043b\u0443\u0447\u0448\u0430\u0442\u044c \u044d\u0442\u0443 \u0438\u0433\u0440\u0443\u0448\u043a\u0443 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439. \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0431\u0438\u0442\u044c \u0440\u0443\u043a\u0443, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0432\u0437\u044f\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u0432\u043e\u0439 \u0441\u0442\u0430\u0440\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 (\u043d\u0435 \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u0447\u0442\u043e\u0431 \u0431\u044b\u043b\u043e \u0433\u0434\u0435 \u0448\u0438\u0448\u0435\u043a \u043d\u0430\u0431\u0438\u0442\u044c) \u0438 \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043d\u0430\u043c\u0438.<br \/>  \u041f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u044c\u0435 \u2014 \u043c\u0430\u0442\u044c \u0443\u0447\u0435\u043d\u044c\u044f.<\/p>\n<h2>\u0421\u0441\u044b\u043b\u043a\u0438<\/h2>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/seokirill\/PlayingCardsMatreshka\">\u0427\u0442\u043e \u0431\u044b\u043b\u043e<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/seokirill\/ModulePlayingCards\">\u0427\u0442\u043e \u0441\u0442\u0430\u043b\u043e<\/a><\/li>\n<li>(\u0434\u0435\u043c\u043e \u043f\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c \u043f\u043e\u043a\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e)<\/li>\n<\/ul>\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=\"http:\/\/habrahabr.ru\/post\/264869\/\"> http:\/\/habrahabr.ru\/post\/264869\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<ul>\n<li><a href=\"#water\">\u0412\u043e\u0434\u0430<\/a><\/li>\n<li><a href=\"#gulp\">Gulp<\/a><\/li>\n<li><a href=\"#requirejs\">Require.js<\/a><\/li>\n<\/ul>\n<p>  <a name=\"water\"><\/a>  <\/p>\n<h2>\u041f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435<\/h2>\n<p>  \u041a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u0441 \u043a\u0430\u043a\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u043e\u043d\u043e \u0440\u0435\u0448\u0430\u0435\u0442, \u043d\u043e \u0438 \u043e\u0442 \u0442\u0430\u043a\u0438\u0445, \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0432\u0442\u043e\u0440\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u044b\u0445 \u0444\u0430\u043a\u0442\u043e\u0440\u043e\u0432 \u043a\u0430\u043a \u00ab\u043a\u0440\u0430\u0441\u043e\u0442\u0430 \u043a\u043e\u0434\u0430\u00bb.<\/p>\n<p>  \u041f\u043e\u0434 \u043a\u0440\u0430\u0441\u043e\u0442\u043e\u0439 \u043a\u043e\u0434\u0430 \u044f (\u043f\u043e\u043b\u0430\u0433\u0430\u044e, \u0438 \u043c\u043d\u043e\u0433\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0435) \u043f\u043e\u043d\u0438\u043c\u0430\u044e:<\/p>\n<ul>\n<li>\u0427\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/li>\n<li>\u041f\u0440\u043e\u0441\u0442\u043e\u0442\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/li>\n<li>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/li>\n<\/ul>\n<p>  \u041a\u0430\u0436\u0434\u044b\u0439 \u043d\u0430 \u0437\u0430\u0440\u0435 \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0443\u0442\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043f\u0438\u0441\u0430\u043b \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u0440\u0435\u0448\u0438\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u0443\u044e (\u0447\u0430\u0441\u0442\u043e \u0434\u0430\u0436\u0435 \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u0443\u044e) \u0437\u0430\u0434\u0430\u0447\u0443, \u043d\u043e \u043f\u0440\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0447\u0442\u043e-\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u043b\u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u043f\u043e\u0445\u043e\u0436\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b.<br \/>  \u0414\u0430 \u0438 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0430 \u0441\u043e\u043c\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f \u0441 \u0434\u0432\u0443\u043c\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0441\u0432\u043e\u044e \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0443 \u043f\u043e\u0432\u044b\u0441\u044f\u0442 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043d\u0430\u0432\u0435\u0434\u0443\u0442 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 \u0433\u043e\u043b\u043e\u0432\u0435.  <\/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-263669","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/263669","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=263669"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/263669\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=263669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=263669"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=263669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}