{"id":178743,"date":"2013-05-05T12:41:03","date_gmt":"2013-05-05T08:41:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=178743"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=178743","title":{"rendered":"<span class=\"post_title\">\u0412\u0440\u0435\u043c\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438. \u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 Source Maps<\/span>"},"content":{"rendered":"<div class=\"content html_format\">   \t\u0412 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432\u0430\u0448 \u043a\u043e\u0434 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043a\u043e\u0434\u0430 \u043d\u0430 \u00ab\u0431\u043e\u0435\u0432\u043e\u043c\u00bb \u0441\u0435\u0440\u0432\u0435\u0440\u0435 (production) \u043f\u043e\u0441\u043b\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438, \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439. \u0422\u0443\u0442-\u0442\u043e \u0438 \u0432\u0441\u0442\u0443\u043f\u0430\u044e\u0442 \u0432 \u0438\u0433\u0440\u0443 \u043a\u0430\u0440\u0442\u044b \u043a\u043e\u0434\u0430 (source maps), \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u0442\u043e\u0447\u043d\u043e\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0412 \u044d\u0442\u043e\u043c \u0432\u0432\u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u0432\u043e\u0437\u044c\u043c\u0451\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u0432 JavaScript \u0441 \u0446\u0435\u043b\u044c\u044e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u043a\u0430\u0440\u0442 \u043a\u043e\u0434\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<blockquote><p><i><font color=\"#009999\">(\u043e\u0442 \u043f\u0435\u0440\u0435\u0432.)<\/font> <font color=\"#005555\">\u041e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 (SourceMap) \u0443\u0436\u0435 \u0431\u044b\u043b\u0430 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f (<a href=\"http:\/\/habrahabr.ru\/post\/148098\/\">\u043f\u0435\u0440\u0435\u0432\u043e\u0434<\/a>) \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0433\u043e\u0434 \u043d\u0430\u0437\u0430\u0434. \u0421\u0435\u0439\u0447\u0430\u0441 \u044d\u0442\u0430 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u043d\u0430\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u043e \u043e\u0442\u0432\u043e\u0451\u0432\u044b\u0432\u0430\u0435\u0442 \u0441\u0432\u043e\u0451 \u043c\u0435\u0441\u0442\u043e \u043f\u043e\u0434 \u0441\u043e\u043b\u043d\u0446\u0435\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u043e\u0433\u0434\u0430 \u0440\u0430\u0437\u0433\u043e\u0432\u043e\u0440\u044b \u043e \u043c\u0430\u043f\u043f\u0438\u043d\u0433\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u043b\u0438\u0441\u044c, \u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 1.6.1 <a href=\"http:\/\/habrahabr.ru\/post\/171649\/\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f map-\u0444\u0430\u0439\u043b\u043e\u0432<\/a> \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 Coffeescript. \u0412 Jetbrains Webstorm 6.0\/Phpstorm (\u043c\u0430\u0440\u0442 2013) \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c <a href=\"http:\/\/blog.jetbrains.com\/webide\/2013\/03\/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui-and-much-more\/\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 SourceMap \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u0434\u043e\u043c<\/a>. <a href=\"http:\/\/blogs.msdn.com\/b\/typescript\/archive\/2012\/11\/15\/announcing-typescript-0-8-1.aspx\">Typescript \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443<\/a> \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 0.8.1 (\u043d\u043e\u044f\u0431\u0440\u044c 2012). \u0412\u0441\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u044e\u0442 \u0447\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0443\u0447\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u00ab\u0430\u0441\u0441\u0435\u043c\u0431\u043b\u0435\u0440\u043e\u043c\u00bb \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442, \u0432\u0441\u0435\u043c \u043d\u0430\u0434\u043e \u0437\u043d\u0430\u0442\u044c, \u043e\u0442\u043a\u0443\u0434\u0430 \u0443 \u043a\u043e\u0434\u0430 \u043d\u043e\u0433\u0438 \u0440\u0430\u0441\u0442\u0443\u0442. \u0420\u0435\u0447\u044c \u0434\u0430\u0436\u0435 \u043d\u0435 \u0438\u0434\u0451\u0442 \u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0441\u0448\u0438\u0432\u043a\u0438 \u043a\u043e\u0434\u043e\u0432 \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u2014 \u0432 UglifyJS, Closure Compiler \u0438 GWT (\u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c) \u043e\u043d\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u0420\u0435\u0447\u044c \u2014 \u0438\u043c\u0435\u043d\u043d\u043e \u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430\u0445 \u043a\u043e\u0434\u0430 JS \u0438 CSS.<\/p>\n<p>  \u0412\u043e\u0442 \u0438 \u043d\u0435\u0434\u0430\u0432\u043d\u043e (\u0432 \u044f\u043d\u0432\u0430\u0440\u0435 2013) \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u044d\u0442\u0430 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f, \u043f\u043e\u044f\u0441\u043d\u044f\u044e\u0449\u0430\u044f \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u043a\u043e\u0434\u043e\u0432\u044b\u0445 \u043a\u0430\u0440\u0442. \u0425\u043e\u0442\u044f \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0442\u043e\u0436\u0435 \u0431\u044b\u043b\u0430 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0439, \u043d\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u0448\u0430\u0435\u0442 \u0438 \u0432\u0442\u043e\u0440\u0443\u044e \u0438\u043c\u0435\u0442\u044c \u0432 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0435, \u043e\u043d\u0430 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \u0438 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f\u043c\u0438, \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u2014 \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c.<\/p>\n<p>  \u041f\u0435\u0440\u0435\u0439\u0442\u0438 \u043f\u043e\u0440\u043e\u0433 \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u043d\u0438\u044f \u043a \u043e\u043f\u044b\u0442\u0443 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0430\u0440\u044c\u0435\u0440. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0443\u0447\u0435\u0431\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u043a\u043e\u0434\u043e\u0432\u044b\u0445 \u043a\u0430\u0440\u0442, \u043c\u044b \u043c\u0435\u0436\u0434\u0443 \u0434\u0435\u043b\u043e\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0443 \u0441\u0435\u0431\u044f \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u0440\u0430\u0431\u043e\u0447\u0443\u044e \u0441\u0440\u0435\u0434\u0443 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u2014 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u044b \u0438 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u043d\u0430\u043b\u0438, \u043d\u043e \u0431\u043e\u044f\u043b\u0438\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 \u0432 \u0441\u0431\u043e\u0440\u0435, \u0438 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u0434 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u044d\u043a\u0437\u043e\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0430\u0445\u0430\u0440\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430.<\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 Grunt 0.4+, \u0442\u043e \u0434\u043b\u044f \u043d\u0435\u0451 \u0431\u0443\u0434\u0443\u0442 \u043d\u0443\u0436\u043d\u044b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0447\u0435\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0432 \u0441\u0442\u0430\u0442\u044c\u0435. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u0441 0.3.9 \u043d\u0430 0.4\u0445 \u2014 \u0432 <a href=\"http:\/\/habrahabr.ru\/post\/170937\/\">habrahabr.ru\/post\/170937\/<\/a>.<\/p>\n<p>  \u0410\u0432\u0442\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b \u0438\u0437 \u041c\u0430\u0441. \u0414\u043b\u044f \u0425\u0440\u043e\u043c\u0430 \u043e\u043d\u0438 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043e\u0442 Windows-\u0432\u0435\u0440\u0441\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b \u0438\u0437 \u0440\u0443\u0441\u0441\u043a\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0425\u0440\u043e\u043c\u0430 \u0432 Windows.<\/p>\n<p>  \u0414\u043b\u044f \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u043b\u044e\u0431\u043e\u0439 \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c. \u0415\u0441\u043b\u0438 \u0441 Linux \u0438 MacOS \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442, \u0442\u043e \u0432\u0430\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0432\u0441\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043f\u043e\u0434 Windows. \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u043b\u0438\u0441\u044c \u0438 \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0432 \u0441\u0440\u0435\u0434\u0435 Windows XP \u0438 \u043d\u0430 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 (\u043d\u0430 \u0430\u043f\u0440\u0435\u043b\u044c 2013) \u0432\u0435\u0440\u0441\u0438\u044f\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u0432 2 \u0438\u0437 5 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0432\u044b\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435-\u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0435 \u043a\u0430\u043a \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. (\u0410\u0432\u0442\u043e\u0440\u0443 \u0441\u0442\u0430\u0442\u044c\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0430\u0445.) \u041e\u043d\u0438 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u2014 \u043a\u0430\u043a \u0432 \u043f\u043b\u0430\u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043d\u043e\u0432\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 (\u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e Grunt 0.4 \u0438 Coffeescript 1.6.1), \u0442\u0430\u043a \u0438 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0432 \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432\u0441\u0435\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043d\u0430 Windows.<\/p>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u2014 \u0430\u0440\u0445\u0438\u0432 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435 \u0430\u0432\u0442\u043e\u0440\u0430. \u0418\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432 \u043d\u0451\u043c \u0435\u0441\u0442\u044c \u043f\u0443\u0442\u0438 \u0434\u043b\u0438\u043d\u043e\u0439 \u0431\u043e\u043b\u044c\u0448\u0435 260 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u043e\u043d \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 WinRar (\u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0435 \u043f\u0443\u0442\u0438 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0441 \u043d\u0438\u043c\u0438 \u0432\u0441\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b). \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438 \u0440\u0430\u0441\u043f\u0430\u043a\u043e\u0432\u0430\u0442\u044c (\u0438\u0437 \u043b\u044e\u0431\u043e\u043f\u044b\u0442\u0441\u0442\u0432\u0430) \u0432\u0435\u0441\u044c \u0430\u0440\u0445\u0438\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043b\u0435\u0436\u0430\u0442 \u0438\u043d\u0441\u0442\u0430\u043b\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0444\u0430\u0439\u043b\u044b, \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <b>7zip<\/b> \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u0430\u0440\u0445\u0438\u0432\u0430\u0442\u043e\u0440, \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043e\u0442 WinRar.<\/p>\n<p>  \u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432, \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0439 \u0438 \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u043e\u043a \u043d\u0430\u043a\u043e\u043f\u0438\u043b\u043e\u0441\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e (\u0417\u0434\u0435\u0441\u044c \u0438 \u0434\u0430\u043b\u0435\u0435 \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u043c \u00ab\u0446\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\u00bb \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u0435\u043d\u0438\u044f.) \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u044d\u0442\u043e \u043d\u0435 \u043d\u043e\u0432\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f, \u0430 \u043f\u0435\u0440\u0435\u0432\u043e\u0434, \u0441 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f\u043c\u0438 \u0438 \u0443\u0447\u0451\u0442\u043e\u043c \u043c\u0435\u0441\u0442\u043d\u044b\u0445 \u0438 \u043a\u0438\u0440\u0438\u043b\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u043e\u0442\u0434\u0430\u0442\u044c \u0434\u0430\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0438 \u0440\u0435\u0434\u043a\u043e\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043e \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044e \u043a \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u043e\u0432\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438.<\/p>\n<p>  \u041d\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u0431\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u043e \u044d\u0442\u043e\u0439 \u0442\u0435\u043c\u0435 \u2014 \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0451\u043d\u043d\u0430\u044f \u0433\u043e\u0434 \u043d\u0430\u0437\u0430\u0434 \u0438 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u0430\u044f \u2014 \u0443\u0441\u0442\u0430\u0440\u0435\u043b\u0438 (\u043c\u043d\u043e\u0433\u043e \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043d\u044b\u043d\u0435\u0448\u043d\u0435\u043c\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0439), \u0432 \u044d\u0442\u043e\u043c, \u0442\u0430\u043a \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0435 \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u0442\u044b \u0432\u0441\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0430\u0442\u044c\u044f \u0441\u0442\u0430\u043b\u0430 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u043c \u043a\u0430\u043a \u043f\u043e \u043c\u0435\u043f\u043f\u0438\u043d\u0433\u0443, \u043a\u0430\u043a \u0438 \u043f\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f.<\/font><\/i><\/p><\/blockquote>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043a\u0430\u0440\u0442\u044b \u043a\u043e\u0434\u0430 (source maps)?<\/h3>\n<p>  \u041a\u043e\u0434\u043e\u0432\u044b\u0435 \u043a\u0430\u0440\u0442\u044b \u0434\u0430\u044e\u0442 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0439 \u043e\u0442 \u044f\u0437\u044b\u043a\u0430 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043a\u0430\u0437\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u043a\u043e\u0434\u043e\u0432 (sources), \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0432\u0430\u043c\u0438 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u043f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0432\u0435\u0441\u044c \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u043a\u043e\u0434\u043e\u0432, \u0441\u0442\u0430\u043d\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0443\u0447\u0430\u0441\u0442\u043a\u0430 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0438 \u0435\u0433\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u0441\u0442\u0440\u043e\u0447\u0435\u043a. \u041a\u0430\u0440\u0442\u0430 \u043a\u043e\u0434\u0430 \u0445\u0440\u0430\u043d\u0438\u0442 \u044d\u0442\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u0435\u0441\u0442\u043e \u043e\u0448\u0438\u0431\u043a\u0438, \u0442\u043e \u043e\u043d\u0430 \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u0442\u043e\u0447\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0435\u0451 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435! \u042d\u0442\u043e \u0434\u0430\u0451\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c \u0438 \u0434\u0430\u0436\u0435 \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u043c!<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u0431\u0443\u0434\u0435\u043c \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u043a\u043e\u0434\u043e\u0432 JS + SASS, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0434\u043e\u0432\u044b\u0445 \u043a\u0430\u0440\u0442. \u0421\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0434\u0435\u043c\u043e-\u0444\u0430\u0439\u043b\u044b \u2014 \u0438 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c!<\/p>\n<blockquote><p><i>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f Grunt (0.4), \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043d\u0435 <a href=\"https:\/\/github.com\/NETTUTS\/Source-Maps-101\">\u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0430\u0432\u0442\u043e\u0440\u0430<\/a>, \u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0451\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430. \u0412 \u043d\u0438\u0445 \u043b\u0435\u0436\u0430\u0442 \u043a\u0430\u043a \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u0442\u0430\u043a \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0438\u043d\u0441\u0442\u0430\u043b\u043b\u044f\u0446\u0438\u0439 \u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0441\u0442\u044c \u0441\u0432\u043e\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 &#8212;\u043f\u0440\u0438\u043c.\u043f\u0435\u0440\u0435\u0432. .<\/i><\/p><\/blockquote>\n<h3>\u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b<\/h3>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043a \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 Chrome \u0432\u0435\u0440\u0441\u0438\u0438 23 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 JS \u0438 SASS SourceMaps. Firefox \u0442\u043e\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0443\u0449\u0435\u043c, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u0430 \u0442\u0435\u043c\u0430 \u0443 \u043d\u0435\u0433\u043e \u0432 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0441\u0442\u0430\u0434\u0438\u0438 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f. \u0421 \u044d\u0442\u0438\u043c\u0438 \u043e\u0433\u043e\u0432\u043e\u0440\u043a\u0430\u043c\u0438, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0440\u0442\u0430\u043c\u0438 \u043a\u043e\u0434\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<blockquote><p><i>(\u043f\u0440\u0438\u043c. \u043f\u0435\u0440\u0435\u0432.:)<\/i> \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 SourceMap \u0434\u043b\u044f SASS \u0432 Firefox+Firebug. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u043e\u0432\u043e\u0435 \u043e Firefox: <a href=\"http:\/\/paulrouget.com\/e\/devtoolsnext\/\">Future of Firefox DevTools<\/a> (17 Mar 2013) <a href=\"http:\/\/habrahabr.ru\/post\/173373\/\">\u0438\u043b\u0438 \u0432 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0435<\/a>:<br \/>  \u00ab\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 CoffeeScript. \u0414\u043b\u044f \u0435\u0451 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 SourceMap. Nick Fitzgerald \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u0432\u0435\u0440\u0441\u0438\u044e \u043e\u0442\u043b\u0430\u0434\u0447\u0438\u043a\u0430, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0435\u0433\u043e SourceMap \u0438 CoffeeScript<br \/>  <a href=\"http:\/\/i.imgur.com\/W6pPhKw.png\"><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/W6pPhKw.png\"\/><\/a><br \/>  \u0420\u0430\u0431\u043e\u0442\u0430 \u041d\u0438\u043a\u0430 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0444\u0430\u0439\u043b\u043e\u0432 CSS \u0438 JS.\u00bb<\/p>\n<p>  <b>*)<\/b> <a href=\"https:\/\/wiki.mozilla.org\/DevTools\/Features\/SourceMap\">wiki.mozilla.org\/DevTools\/Features\/SourceMap<\/a><\/p><\/blockquote>\n<h3>Source Maps \u0432 \u0425\u0440\u043e\u043c\u0435<\/h3>\n<p>  \u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043c\u0435\u043f\u043f\u0438\u043d\u0433\u0430 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445:<br \/>  1) \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043e\u043a\u043d\u043e Chrome Developer Tools: View -&gt; Developer -&gt; Developer Tools (F12);<br \/>  2) \u043d\u0430\u0436\u0430\u0442\u044c \u00abSettings\u00bb \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443;<br \/>  3) \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u00abGeneral\u00bb \u0438 \u201cEnable source maps\u201d.<br \/>  <img decoding=\"async\" src=\"http:\/\/cdn.tutsplus.com\/net.tutsplus.com\/authors\/sayanee-basu\/source-maps-enable.png\"\/>  <\/p>\n<blockquote><p><i>\u0414\u043b\u044f Windows <font color=\"#009999\">(\u043e\u0442 \u043f\u0435\u0440\u0435\u0432.)<\/font>:<\/i><br \/>  1) \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 (\u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0443) (F12);<br \/>  2) \u0432 \u043e\u043a\u043d\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u2014 \u00abSettings\u00bb \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443;<br \/>  3) \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u00abGeneral\u00bb \u0438 \u201cEnable source maps\u201d \u0432 \u0431\u043b\u043e\u043a\u0435 \u00abSources\u00bb.<br \/>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img decoding=\"async\" src=\"http:\/\/img59.imageshack.us\/img59\/5624\/sourcemaps01.png\"\/><\/p><\/blockquote>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430<\/h3>\n<p>  <a href=\"https:\/\/github.com\/NETTUTS\/Source-Maps-101\">\u0421\u043a\u0430\u0447\u0430\u0439\u0442\u0435 \u0434\u0435\u043c\u043e-\u0430\u0440\u0445\u0438\u0432<\/a> \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u00abstart\u00bb. \u0424\u0430\u0439\u043b\u044b \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b \u2014 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e JavaScript \u0432 scripts\/script.js. \u041f\u043e\u0441\u043b\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043d\u0438\u044f index.html \u0441\u043a\u0440\u0438\u043f\u0442 \u043c\u0435\u043d\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e \u0432\u0432\u043e\u0434\u0443 \u043a\u043e\u0434\u0430 \u0446\u0432\u0435\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c.<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/cdn.tutsplus.com\/net.tutsplus.com\/authors\/sayanee-basu\/source-maps-demo.png\"\/><\/p>\n<pre><code class=\"bash\">$ tree \u251c\u2500\u2500 index.html \u251c\u2500\u2500 scripts \u2502   \u251c\u2500\u2500 jquery.d.ts \u2502   \u251c\u2500\u2500 script.coffee.coffee \u2502   \u251c\u2500\u2500 script.js \u2502   \u2514\u2500\u2500 script.typescript.ts \u2514\u2500\u2500 styles     \u251c\u2500\u2500 style.css     \u2514\u2500\u2500 style.sass <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 \u043d\u0430 JavaScript, TypeScript \u0438 CoffeeScript.<br \/>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u044b, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0431\u043e\u0440\u043a\u0443 \u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0444\u0430\u0439\u043b\u044b \u043a\u043e\u0434\u043e\u0432\u044b\u0445 \u043a\u0430\u0440\u0442.<\/p>\n<p>  \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c 5 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0438 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0439. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0439 \u0432\u0430\u043c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440.<\/p>\n<p>  \u0412\u0430\u0440\u0438\u0430\u043d\u0442\u044b:<br \/>  <b>1.<\/b> <b>Closure Compiler<\/b>.<br \/>  <b>2.<\/b> <b>GruntJS \u0441 JSMin<\/b>.<br \/>  <b>3.<\/b> <b>Uglifyjs 2<\/b>.<br \/>  <b>4.<\/b> <b>CoffeeScript Redux<\/b>.<br \/>  <b>5.<\/b> <b>TypeScript<\/b>.<\/p>\n<blockquote><p><i>\u041f\u043e\u0441\u043b\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0434\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c \u043f\u0430\u0440\u043a \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043f\u043e\u043f\u043e\u043b\u043d\u0438\u043b\u0441\u044f \u0434\u0432\u0443\u043c\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u043c\u0438.<\/i><\/p>\n<p>  <b>2.\u0430<\/b> <b>GruntJS (0.4.\u0445) \u0441 JSMin<\/b>.<br \/>  <b>4.\u0430<\/b> <b>CoffeeScript \u2014 \u043d\u0435 Redux, \u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439, \u0432\u0435\u0440\u0441\u0438\u0438 1.6.2<\/b>.<\/p>\n<p>  <i>\u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u2014 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u043e\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e \u0444\u0435\u0432\u0440\u0430\u043b\u044f 2013 \u0432\u0435\u0440\u0441\u0438\u0438 0.3.\u0445. \u0412\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u2014 \u0437\u0430\u043f\u0443\u0441\u043a \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u0430\u043f\u043f\u0438\u043d\u0433\u0430, \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0435\u0433\u043e\u0441\u044f \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 1.6.1 \u0432 Coffeescript \u0432 \u0444\u0435\u0432\u0440\u0430\u043b\u0435 2013. (\u0441 \u0441\u0435\u043d\u0442\u044f\u0431\u0440\u044f 2012 \u044d\u0442\u0443 \u0440\u043e\u043b\u044c \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u043b \u043a\u043b\u043e\u043d \u2014 Coffeescript Redux.)<\/i><\/p><\/blockquote>\n<blockquote><p><i><font color=\"#555555\">(\u043e\u0442 \u043f\u0435\u0440\u0435\u0432.)<\/font><\/i> \u041f\u0435\u0440\u0432\u043e\u0435 \u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 \u043a\u043e\u0434\u043e\u043c \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043c\u0443\u0449\u0435\u043d\u0438\u0435. \u041d\u0435\u0442, \u0430\u0432\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u043f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. \u0421\u0442\u0430\u0442\u044c\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0430. \u041d\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e \u0445\u0440\u043e\u043c\u0430\u0435\u0442. \u0421\u043f\u043e\u0441\u043e\u0431 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u0438\u0441\u044c \u0438 \u0441\u0442\u0438\u0440\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0442 \u0438\u0434\u0435\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u2014 \u0432\u0441\u0451 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u043c. \u041f\u043e\u043a\u0430\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u2014 \u0442\u043e\u0436\u0435. \u041d\u0438\u0447\u0442\u043e \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0447\u0435\u0440\u0435\u0437 URL \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 option \u0432 \u044f\u043a\u043e\u0440\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442 \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u042d\u0442\u043e \u043d\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430, \u0445\u043e\u0442\u044f \u043d\u0435\u0434\u0430\u043b\u0435\u043a\u043e \u0434\u043e \u043d\u0435\u0451, \u043d\u043e \u0443\u0436\u0435 \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u0434\u0435.<\/p>\n<pre><code class=\"javascript\">var lHash = location.hash.substr(1).split('='); if(lHash && lHash.length ==2 && lHash[0] =='option') \tvar optionName = lHash[1]; if(optionName && !parseInt(optionName)) \toptionName = {closure:1,jsmin:2,uglifyjs:3,coffeescript:4,typescript:5}[optionName.toLowerCase()]; console.log(optionName); optionName = optionName ||0; var loadScript; (loadScript = function(i){ \tvar scr = document.createElement('SCRIPT'); \tscr.setAttribute('type', 'application\/javascript'); \tscr.src ='scripts\/script.' \t\t+ ('|closure|jsmin-grunt|uglify|coffee.min|typescript.min'.split('|')[i]) \t\t+(i?'.':'') +'js'; \tdocument.getElementsByTagName('head')[0].appendChild(scr); })(optionName); <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0438\u0437\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u043e\u0442 \u043a\u0443\u0447\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u0432 \u043a\u043e\u0434\u0435, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043d\u0438\u043c\u0438 \u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c. \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044f\u043a\u043e\u0440\u044f #option=&lt;\u0447\u0438\u0441\u043b\u043e&gt; \u0438\u043b\u0438 #option=&lt;\u0438\u043c\u044f_\u043f\u0440\u0438\u043c\u0435\u0440\u0430&gt; \u0438\u043b\u0438 \u043e\u0441\u0442\u0443\u0442\u0441\u0442\u0432\u0438\u0435 (\u0438\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430) \u044f\u043a\u043e\u0440\u044f \u0432\u044b\u0437\u043e\u0432\u0443\u0442 \u043a \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u043d\u0443\u0436\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432, \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0432 scr.src. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0432\u043e\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043f\u043e\u0434 \u0441\u0432\u043e\u0438\u043c\u0438 \u0438\u043c\u0435\u043d\u0430\u043c\u0438.<\/p>\n<p>  \u0418 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c \u0431\u0435\u043a\u0433\u0440\u0430\u0443\u043d\u0434\u0430 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043d\u0435\u0434\u0440\u0443\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u2014 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0448\u0430\u0440\u043f\u0430 \u043f\u0435\u0440\u0435\u0434 \u043a\u043e\u0434\u043e\u043c. \u041f\u043e\u043d\u044f\u0442\u043d\u043e \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u0432 \u0441\u043b\u043e\u0432\u0435\u0441\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u0435, \u043d\u043e \u043c\u0430\u043b\u043e \u043a\u0442\u043e \u043f\u0440\u0438\u0432\u044b\u043a \u0441 \u043d\u0438\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u043c:  <\/p>\n<pre><code class=\"javascript\">var colr = $(&quot;#color&quot;).val().toUpperCase() \t, cL = colr.length; for(var i in cL) \tif(cL[i] &lt;'0'|| cL[i] &gt;'9'&& cL[i] &lt;'A'|| cL[i] &gt;'F') \/\/\u043d\u0430\u0439\u0434\u0435\u043d \u043d\u0435 hex-\u0441\u0438\u043c\u0432\u043e\u043b \t\tbreak; document.body.style.backgroundColor = (colr.charAt[0] !='#' && i &lt; cL ?'':'#') + colr; <\/code><\/pre>\n<p>  \u041d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0437\u0433\u043b\u044f\u0434\u0430 \u0441\u043b\u043e\u0436\u043d\u043e, \u043d\u043e \u0443\u0436\u0435 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0442\u0442\u043e\u0440\u0436\u0435\u043d\u0438\u044f \u0438\u0437-\u0437\u0430 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u0418\u043d\u0430\u0447\u0435, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043d\u043e\u0432\u0435\u0439\u0448\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438, \u0430 \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u044c \u0432 \u043a\u043e\u0434\u0435 \u0434\u0440\u0443\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0435 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438. \u0423\u0436\u0435 \u043f\u043e\u0442\u043e\u043c \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u043f\u043e\u0436\u0435\u043b\u0430\u043d\u0438\u044f \u0432 \u0431\u043e\u043b\u0435\u0435 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435, \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u043a\u043e\u0434\u043e\u0432 \u043d\u0435 \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 loadScript \u0438 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u044f\u043a\u043e\u0440\u0435\u0439, \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0451 \u044d\u0442\u043e \u0432 \u043a\u043e\u0444\u0435-\u0441\u043a\u0440\u0438\u043f\u0442\u0435 \u0438 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u0441\u0432\u043e\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u0441\u0431\u043e\u0440\u043a\u0438. \u0412\u0435\u0434\u044c \u043a \u0441\u0431\u043e\u0440\u043a\u0430\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043c\u044b \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043c \u043e\u0442 \u0436\u0435\u043b\u0430\u043d\u0438\u044f \u043d\u0435 \u0441\u043e\u0433\u043b\u0430\u0448\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u044b \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0439.  <\/p><\/blockquote>\n<h3>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1: Closure Compiler<\/h3>\n<p>  \u0413\u0443\u0433\u043b\u043e\u0432\u0441\u043a\u0438\u0439 <a href=\"https:\/\/developers.google.com\/closure\/compiler\/\">Closure Compiler<\/a> \u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 JavaScript. \u041e\u043d \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u0434, \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 \u043a\u0443\u0441\u043e\u0447\u043a\u0438, \u0430 \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0435\u0441\u044f \u2014 \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u043e\u0436\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c Source Map.<\/p>\n<p>  \u0414\u0435\u043b\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0448\u0430\u0433\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430:  <\/p>\n<ul>\n<li>\u0421\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c <a href=\"http:\/\/code.google.com\/p\/closure-compiler\/downloads\/detail?name=compiler-latest.zip\">\u043d\u043e\u0432\u0435\u0439\u0448\u0438\u0439 Closure Compiler<\/a>;<\/li>\n<li>\u041a\u043b\u0430\u0434\u0451\u043c \u0444\u0430\u0439\u043b <code>compiler.jar<\/code> \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0441\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438;<\/li>\n<li>\u0412 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 &quot;<code>scripts\/<\/code>&quot; \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u0432 production \u0444\u0430\u0439\u043b <code>script.closure.js<\/code><\/li>\n<\/ul>\n<pre><code class=\"dos\">java -jar compiler.jar --js script.js --js_output_file script.closure.js <\/code><\/pre>\n<ul>\n<li>\u0423\u0431\u0435\u0436\u0434\u0430\u0435\u043c\u0441\u044f, \u0447\u0442\u043e <code>index.html<\/code> \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c, \u0440\u0430\u0441\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0432 \u00abOption A\u00bb.<\/li>\n<\/ul>\n<p>  <img decoding=\"async\" src=\"http:\/\/cdn.tutsplus.com\/net.tutsplus.com\/authors\/sayanee-basu\/source-maps-closure.png\"\/><br \/>  \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c <code>index.html<\/code> \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0430\u043d\u0435\u043b\u044c Source \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0441\u043a\u0440\u0438\u043f\u0442\u0430 <code>script.closure.js<\/code>; \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u0432\u044f\u0437\u0438 \u0441 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c \u043a\u043e\u0434\u043e\u0432 \u0441 \u043d\u0443\u0436\u043d\u044b\u043c\u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c\u0438. \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b \u043a\u0430\u0440\u0442\u044b \u043a\u043e\u0434\u043e\u0432 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432:<\/p>\n<pre><code class=\"dos\">java -jar compiler.jar --js script.js --create_source_map script.closure.js.map --source_map_format=V3 --js_output_file script.closure.js <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e Closure Compiler \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 2 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u2014 <code>--create_source_map<\/code> and <code>--source_map_format<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u043a\u0430\u0440\u0442\u044b <code>script.closure.js.map<\/code> \u0441 Source Map \u0432\u0435\u0440\u0441\u0438\u0438 3. \u041d\u043e \u0438 \u044d\u0442\u043e \u043d\u0435 \u0432\u0441\u0451. \u0427\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 URL \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 \u043a \u043a\u043e\u043d\u0446\u0443 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 <code>script.closure.js<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438\u0445.  <\/p>\n<pre><code class=\"javascript\">\/\/@ sourceMappingURL=script.closure.js.map <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0447\u0435\u0440\u0435\u0437 \u043f\u0430\u043d\u0435\u043b\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u043e\u0431\u0430 \u0444\u0430\u0439\u043b\u0430 \u2014 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 <code>script.closure.js<\/code>. \u0425\u043e\u0442\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, Source Map \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0435\u0433\u043e \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c.<\/p>\n<p>  \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043e\u0442\u043b\u0430\u0434\u043a\u0443 \u0441 \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0430. \u041d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u043a\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u0440\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432. \u0411\u0443\u0434\u0435\u043c \u043d\u0430\u0434\u0435\u044f\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043e\u043d\u0438 \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f!<br \/>  <img decoding=\"async\" src=\"http:\/\/cdn.tutsplus.com\/net.tutsplus.com\/authors\/sayanee-basu\/source-maps-closure-map.png\"\/>  <\/p>\n<blockquote><p>\u041a\u0438\u0440\u0438\u043b\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0438\u043c\u0435\u044e\u0442 \u0441\u0447\u0430\u0442\u044c\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u0441\u044f\u043a, \u0434\u0430\u0436\u0435 \u0434\u0432\u0430: \u043e\u0434\u0438\u043d \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0434\u0440\u0443\u0433\u043e\u0439 \u2014 \u0432 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0435. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441\u0438\u043c\u0432\u043e\u043b\u044b UTF-8 \u0432 \u0444\u0430\u0439\u043b\u0435, \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u043c \u043f\u043e \u043c\u0430\u043f\u043f\u0438\u043d\u0433\u0443:<\/p>\n<p>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img decoding=\"async\" src=\"http:\/\/img577.imageshack.us\/img577\/3687\/sourcemaps04.png\"\/><\/p>\n<p>  \u041a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u2014 \u0438 \u0442\u043e\u0433\u043e \u0445\u0443\u0436\u0435: \u043a\u0438\u0440\u0438\u043b\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0445 \u043d\u0430\u0434\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0434 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0435\u0439 (\u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e).<\/p><\/blockquote>\n<h3>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2: \u0417\u0430\u0434\u0430\u0447\u0430 GruntJS \u0434\u043b\u044f JSMin<\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 <a href=\"http:\/\/gruntjs.com\/\">Grunt.js<\/a> \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0442\u043e \u043e\u043d \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u043a\u043e\u0434\u043e\u0432\u044b\u0445 \u043a\u0430\u0440\u0442 \u0438\u0437 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b JSMin. \u041a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u043a\u0430\u0440\u0442\u0430 \u043a\u043e\u0434\u043e\u0432. <i>(\u041d\u0430\u0434\u043e \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430 <code>Grunt<\/code> \u0432\u0435\u0440\u0441\u0438\u0438 0.4 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u043e\u0439 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 0.3. &#8212;\u043f\u0440\u0438\u043c.\u043f\u0435\u0440\u0435\u0432.)<\/i><\/p>\n<p>  \u0428\u0430\u0433\u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0441 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c <code>JSMin<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Grunt<\/code>.<\/p>\n<p>  <b>1.<\/b> \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 <code>Grunt<\/code> \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 (<a href=\"http:\/\/habrahabr.ru\/post\/177395\/\">\u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u0432\u0435\u0436\u0435\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/a>) \u0432 nodeJS <code>gruntfile<\/code> \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <code>grunt.js<\/code>, \u0440\u0430\u0437\u043c\u0435\u0449\u0451\u043d\u043d\u044b\u0439 \u0432 \u043a\u043e\u0440\u043d\u0435 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 &quot;<code>start\/<\/code>&quot;.<\/p>\n<pre><code class=\"bash\">$ npm install -g grunt $ npm view grunt version npm http GET https:\/\/registry.npmjs.org\/grunt npm http 200 https:\/\/registry.npmjs.org\/grunt 0.3.17 $ grunt init:gruntfile <\/code><\/pre>\n<blockquote>\n<h3>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 Grunt 0.4.x<\/h3>\n<p>  <i>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0441\u0442\u0430\u0440\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f, \u043d\u043e \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0435\u0451 \u0434\u043e 0.4.x, \u0442\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0431\u0443\u0434\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u043c.<\/i> \u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u0443\u0434\u0430\u043b\u0438\u0442\u0435 \u0441\u0442\u0430\u0440\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e Grunt 0.3.x (\u0435\u0441\u043b\u0438 \u0431\u044b\u043b\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u043a\u0430\u043a \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f).  <\/p>\n<pre><code class=\"bash\">npm uninstall -g grunt <\/code><\/pre>\n<p>  \u041e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 \u0437\u0430\u0434\u0430\u0447 \u0432 Grunt 0.4, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043d\u0430\u0434\u043e\u043b\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0434\u0443\u043b\u044c Grunt \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0451\u043d \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u2014 \u044f\u0434\u0440\u043e \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432\u0441\u0435 \u043a\u043e\u0434\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438\u0437 \u044f\u0434\u0440\u0430. \u0412 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0434\u0443\u043b\u0435\u0439.<\/p>\n<p>  \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u043a\u0430\u043a \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c grunt-cli.  <\/p>\n<pre><code class=\"bash\">npm install -g grunt-cli <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"http:\/\/img705.imageshack.us\/img705\/437\/sourcemaps05grunt.png\"\/><br \/>  \u0414\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u2014 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 Gruntfile. \u0415\u0441\u043b\u0438 \u0440\u0430\u043d\u044c\u0448\u0435 \u043e\u043d \u043d\u0430\u0437\u044b\u0432\u0430\u043b\u0441\u044f grunt.js, \u0442\u043e \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u2014 Gruntfile.js \u0438\u043b\u0438 Gruntfile.coffee. \u0412\u0442\u043e\u0440\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0444\u0430\u0439\u043b \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u2014 \u044d\u0442\u043e package.json \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439\u0441\u044f \u0432 npm (Node.js package manager).<\/p>\n<p>  \u0412 \u043a\u0430\u0436\u0434\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435 \u0432 \u043f\u0430\u043f\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438\u043d\u0441\u0442\u0430\u043b\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c grunt.  <\/p>\n<pre><code class=\"bash\">npm install grunt <\/code><\/pre>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0430\u0439\u0434\u0451\u043c \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 \u00abstart\/\u00bb \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0442\u0430\u043c \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443. \u041a\u0430\u043a \u0438 \u0432 0.3.x-\u0432\u0435\u0440\u0441\u0438\u0438, \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043f\u0430\u043f\u043a\u0430 node_modules \u0438 \u0432 \u043d\u0435\u0439 \u2014 \u043f\u0430\u043f\u043a\u0430 \u043c\u043e\u0434\u0443\u043b\u044f grunt.<\/p>\n<p>  \u0420\u0430\u0437\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043d\u0438\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043f\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0441 \u0446\u0435\u043b\u044c\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u0441\u0431\u0440\u0449\u0438\u043a\u0430 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435. grunt-cli \u2014 \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u0430, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0449\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432 \u043d\u0443\u0436\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. ( <a href=\"http:\/\/gruntjs.com\/getting-started\">gruntjs.com\/getting-started<\/a> )<\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435, \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u00abstart\/\u00bb) \u0433\u043e\u0442\u043e\u0432\u0438\u043c <code>Gruntfile.js<\/code> \u0438 <code>package.json<\/code>. <code>package.json<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u0432\u0430\u0448\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0438 \u0432 \u043d\u0451\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u2014 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u0445 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430. \u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430\u043f\u0438\u0448\u0435\u043c:  <\/p>\n<pre><code class=\"javascript\">{   &quot;name&quot;: &quot;colors&quot;,   &quot;version&quot;: &quot;0.1.0&quot;,   &quot;devDependencies&quot;: {     &quot;grunt&quot;: &quot;~0.4.1&quot;,     &quot;grunt-jsmin-sourcemap&quot;: &quot;~1.5.6&quot;   } } <\/code><\/pre>\n<p>  \u0412\u043c\u0435\u0441\u0442\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u0443\u043d\u043a\u0442\u0430 2 \u0434\u043b\u044f \u0432\u0435\u0440\u0441\u0438\u0438 0.3.\u0445 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c   <\/p>\n<pre><code class=\"bash\">npm install grunt --save-dev <\/code><\/pre>\n<p>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u0442\u044f\u043d\u0443\u0442\u044c \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0437 <code>package.json<\/code>.  <\/p><\/blockquote>\n<p>  <b>2.<\/b> <i>(\u0414\u043b\u044f \u0432\u0435\u0440\u0441\u0438\u0438 0.3.\u0445).<\/i> \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043f\u043b\u0430\u0433\u0438\u043d <a href=\"https:\/\/github.com\/twolfson\/grunt-jsmin-sourcemap\">grunt-jsmin-sourcemap<\/a>. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>node_modules\/grunt-jsmin-sourcemap<\/code>.  <\/p>\n<pre><code class=\"bash\">$ npm install grunt-jsmin-sourcemap <\/code><\/pre>\n<p>  <b>3.<\/b> \u041e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 <code>grunt.js<\/code> <i>(\u0434\u043b\u044f \u0432\u0435\u0440\u0441\u0438\u0438 0.4 \u2014 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 <code>Gruntfile.js<\/code> \u0432 \u00abstart\/\u00bb)<\/i> \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0434\u0430\u0447\u0443 <code>jsmin-sourcemap<\/code> \u2014 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e:<\/p>\n<pre><code class=\"javascript\">module.exports = function(grunt) {   grunt.loadNpmTasks('grunt-jsmin-sourcemap');   grunt.initConfig({     'jsmin-sourcemap': {       all: {         src: ['scripts\/script.js'],         dest: 'scripts\/script.jsmin-grunt.js',         destMap: 'scripts\/script.jsmin-grunt.js.map'       }     }   });   grunt.registerTask('default', 'jsmin-sourcemap'); }; <\/code><\/pre>\n<p>  <b>4.<\/b> \u0412\u0435\u0440\u043d\u0438\u0442\u0435\u0441\u044c \u043a \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 grunt:  <\/p>\n<pre><code class=\"bash\">E:\\Projects\\nodeJS\\SourceMaps101\\start&gt; grunt <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u0437\u0430\u0434\u0430\u0447\u0443 jsmin-sourcemap \u043a\u0430\u043a \u0437\u0430\u0434\u0430\u0447\u0443 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0441\u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0432 \u0444\u0430\u0439\u043b\u0435 <code>grunt.js<\/code> <i>(\u0438\u043b\u0438 <code>Gruntfile.js<\/code>)<\/i>. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430:  <\/p>\n<pre><code class=\"bash\">Running &quot;jsmin-sourcemap:all&quot; (jsmin-sourcemap) task   Done, without errors. <\/code><\/pre>\n<p>  <\/p>\n<blockquote><p><i>\u0414\u0430\u043b\u0435\u0435, \u0431\u0443\u0434\u0435\u043c \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 complete-ru, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0430\u0432\u0442\u043e\u0440\u0430 \u043e\u0442 \u0441\u0432\u043e\u0438\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0438\u0437-\u0437\u0430 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 Grunt. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0441\u0432\u0435\u0440\u0438\u0442\u044c \u0432\u0430\u0448\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441 \u0442\u0435\u043c\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c\u0438, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b \u043d\u0430 Windows \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432. &#8212;\u043f\u0440\u0438\u043c.\u043f\u0435\u0440\u0435\u0432.<\/i><\/p><\/blockquote>\n<p>  <b>5.<\/b> \u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 Source Map <i>script.jsmin-grunt.js.map<\/i> \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d \u0444\u0430\u0439\u043b \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432: <code>&quot;sources&quot;:[&quot;script.js&quot;]<\/code>.<br \/>  <i>(\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0442\u0430\u043c \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043b\u0441\u044f <code>&quot;sources&quot;:[&quot;scripts\/script.js&quot;]<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0440\u0443\u043a\u0430\u043c\u0438 \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u0442\u044c. \u2014 \u043f\u0440\u0438\u043c.\u043f\u0435\u0440\u0435\u0432.)<\/i><\/p>\n<p>  <b>6.<\/b> \u0420\u0430\u0441\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0439\u0442\u0435 <code>Option B<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b <i>script.grunt-jsmin.js<\/i> \u043a <i>index.html<\/i>, \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0435\u0433\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. <\/p>\n<blockquote><p><i>(\u041c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b index-ru.html \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0441 \u044f\u043a\u043e\u0440\u0435\u043c: <a href=\"http:\/\/localhost\/index-ru.html#option=jsmin\">localhost\/index-ru.html#option=jsmin<\/a>. \u2014 \u043f\u0440\u0438\u043c.\u043f\u0435\u0440\u0435\u0432.)<\/p>\n<p>  <font color=\"#555555\">\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0443 \u043d\u0430\u0441 \u0442\u043e\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u043c\u0430\u043f\u043f\u0438\u043d\u0433 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u2014 \u043d\u0435 \u0437\u0440\u044f \u043c\u044b \u043f\u0440\u043e\u0434\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u0441\u043a\u0432\u043e\u0437\u044c \u0438\u043d\u0441\u0442\u0430\u043b\u043b\u044f\u0446\u0438\u044e \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430. \u0414\u0430\u043b\u044c\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u043b\u0435\u0433\u0447\u0435, \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u2014 \u0443 \u043d\u0430\u0441 \u0432 \u043a\u0430\u0440\u043c\u0430\u043d\u0435.<\/p>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438 \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c \u043a\u043e\u0441\u044f\u0447\u043a\u0438 \u0441\u0431\u043e\u0440\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0442\u0435\u043c, \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u2014 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442\u044b \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438 \u0438 \u0432\u0435\u0440\u0441\u0438\u044e \u0437\u0430 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438. \u0422\u0430\u043a\u0430\u044f \u043e\u043d\u0430 \u2014 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043d\u0430 \u0440\u0430\u043d\u043d\u0438\u0445 \u0441\u0442\u0430\u0434\u0438\u044f\u0445 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c, \u043e\u0447\u0435\u043d\u044c \u0432\u043e\u0441\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0440\u044b\u043d\u043a\u043e\u043c.<\/font><\/i><\/p><\/blockquote>\n<p>  \u0421 <code>Grunt<\/code> \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c <code>jsmin-sourcemap<\/code> \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u0431\u043e\u0440\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 2 \u0444\u0430\u0439\u043b\u0430: \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u0441\u043e \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u043d\u0430 \u043c\u0430\u043f\u043f\u0438\u043d\u0433-\u0444\u0430\u0439\u043b \u0432 \u043a\u043e\u043d\u0446\u0435 \u0438 \u0441\u0430\u043c \u0444\u0430\u0439\u043b \u043a\u0430\u0440\u0442\u044b \u043a\u043e\u0434\u043e\u0432. \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0443, \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u043e\u0431\u0430 \u0444\u0430\u0439\u043b\u0430.<br \/>  <img decoding=\"async\" src=\"http:\/\/cdn.tutsplus.com\/net.tutsplus.com\/authors\/sayanee-basu\/source-maps-gruntjsmin.png\"\/><\/p>\n<h3>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 3: UglifyJS<\/h3>\n<p>  <a href=\"https:\/\/github.com\/mishoo\/UglifyJS2\">UglifyJS2<\/a> \u2014 \u0434\u0440\u0443\u0433\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0442\u043e\u0440-\u043a\u043e\u043c\u043f\u0440\u0435\u0441\u0441\u043e\u0440 JS. \u041a\u0430\u043a \u0438 \u0432 2 \u043f\u0440\u0435\u0436\u043d\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0441\u043a\u0440\u0438\u043f\u0442\u0430, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f URL \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u043a\u0430\u0440\u0442\u044b \u0438 \u0441\u0430\u043c \u0444\u0430\u0439\u043b \u043a\u0430\u0440\u0442\u044b, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0441\u0436\u0430\u0442\u044b\u043c\u0438 \u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c\u0438 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430\u043c\u0438 JavaScript. \u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 &quot;<code>start<\/code>&quot;:<br \/>  <b>1.<\/b> \u0418\u043d\u0441\u0442\u0430\u043b\u043b\u0438\u0440\u0443\u0439\u0442\u0435 \u043c\u043e\u0434\u0443\u043b\u044c <i>uglify-js<\/i> (\u0441\u043e\u0437\u0434\u0430\u0441\u0441\u0442\u0441\u044f \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>nocde_module\/uglify-js<\/code> ):  <\/p>\n<pre><code class=\"bash\">$ npm install uglify-js -g $ npm view uglify-js version 2.2.3 $ cd scripts\/ <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"http:\/\/imageshack.us\/a\/img199\/6513\/sourcemaps06.png\"\/><\/p>\n<p>  <b>2.<\/b> \u0412 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u201c<code>scripts<\/code>\u201d \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0438 \u043a\u0430\u0440\u0442\u044b:  <\/p>\n<pre><code class=\"bash\">uglifyjs --source-map script.uglify.js.map --output script.uglify.js script.js <\/code><\/pre>\n<p>  <\/p>\n<blockquote><p><i>(\u041d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u2014 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0448\u0430\u043c\u0430\u043d\u0441\u0442\u0432\u0430 \u0440\u0443\u043a\u0430\u043c\u0438, \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.)<\/i><\/p><\/blockquote>\n<p>  3. \u0412 <code>index.html<\/code> \u0440\u0430\u0441\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u00abOption C\u00bb.<br \/>  <img decoding=\"async\" src=\"http:\/\/cdn.tutsplus.com\/net.tutsplus.com\/authors\/sayanee-basu\/source-maps-uglify.png\"\/><\/p>\n<h3>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 4: CoffeeScript Redux<\/h3>\n<p>  <\/p>\n<blockquote><p><i>\u0422\u0430\u043a \u043a\u0430\u043a \u043a \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0431\u043e\u0440\u043a\u0430 Coffescript \u043e\u0442 \u0414\u0436\u0435\u0440\u0435\u043c\u0438 \u0410\u0448\u043a\u0435\u043d\u0430\u0441\u0430 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043b\u0430 \u043c\u0435\u043f\u043f\u0438\u043d\u0433, \u0431\u044b\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u043a\u043b\u043e\u043d, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0441 \u043c\u0435\u043f\u043f\u0438\u043d\u0433\u043e\u043c. \u0412 \u0432\u0435\u0440\u0441\u0438\u0438 Coffescript 1.6.1+ \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u044f\u0437\u044b\u043a (\u0447\u0442\u043e, \u0432\u043f\u0440\u043e\u0447\u0435\u043c, \u043d\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432 \u043a\u043b\u043e\u043d\u0430).<\/p>\n<p>  \u041a\u043b\u043e\u043d \u044d\u0442\u043e\u0442, \u043a\u0441\u0442\u0430\u0442\u0438, \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u043b \u0437\u0430\u044f\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043a\u0430\u043a \u0446\u0435\u043b\u044c <a href=\"http:\/\/www.kickstarter.com\/projects\/michaelficarra\/make-a-better-coffeescript-compiler\">12 \u0442\u044b\u0441 $ \u043d\u0430 \u041a\u0438\u043a\u0441\u0442\u0430\u0440\u0442\u0435\u0440\u0435<\/a> \u043d\u0430 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435.<\/i> <\/p><\/blockquote>\n<p>  \u0412 \u043f\u0435\u0440\u0432\u044b\u0445 3 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e 1 \u0448\u0430\u0433 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438. \u0414\u043b\u044f \u044f\u0437\u044b\u043a\u043e\u0432 \u0442\u0438\u043f\u0430 CoffeeScript \u043d\u0443\u0436\u043d\u043e 2 \u0448\u0430\u0433\u0430: \u0438\u0437 CoffeeScript \u0432 JavaScript, \u0430 \u0437\u0430\u0442\u0435\u043c \u2014 \u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 JS. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u0443\u044e \u043a\u043e\u0434\u043e\u0432\u0443\u044e \u043a\u0430\u0440\u0442\u0443 \u2014 \u0438\u0437 CoffeeScript \u0438 \u0438\u0437 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 CoffeeScript Redux <i>(\u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 Coffeescript \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043b \u043a\u0430\u0440\u0442 \u0434\u043e \u0432\u0435\u0440\u0441\u0438\u0438 1.6.1 \u2014 \u043f\u0440\u0438\u043c. \u043f\u0435\u0440\u0435\u0432.)<\/i>.<\/p>\n<h4>\u0428\u0430\u0433 1: \u0438\u0437 CoffeeScript \u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 JavaScript<\/h4>\n<p>  \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 &quot;<code>start<\/code>&quot; \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0448\u0430\u0433\u0430\u0445 \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0439 \u043c\u0435\u0436\u0434\u0443 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0438 \u0444\u0430\u0439\u043b\u043e\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u043a\u043e\u0434\u043e\u0432.<br \/>  <b>1.<\/b> \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c CoffeeScript \u0441 \u043e\u043f\u0446\u0438\u0435\u0439 -g \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430.<br \/>  <b>2.<\/b> \u041a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c <code>script.coffee.coffee<\/code> \u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 JS:  <\/p>\n<pre><code class=\"bash\">$ coffee -c scripts\/script.coffee.coffee <\/code><\/pre>\n<p>  <b>3.<\/b> \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c <a href=\"https:\/\/github.com\/michaelficarra\/CoffeeScriptRedux\">CoffeeScript Redux<\/a>:  <\/p>\n<pre><code class=\"bash\">$ git clone https:\/\/github.com\/michaelficarra\/CoffeeScriptRedux.git coffee-redux $ cd coffee-redux $ npm install $ make -j test $ cd .. <\/code><\/pre>\n<p>  <b>4.<\/b> \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b \u043c\u0430\u043f\u043f\u0438\u043d\u0433\u0430 <code>script.coffee.js.map<\/code>, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043f\u0440\u043e\u0441\u0442\u044b\u043c JS \u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c CoffeeScript.  <\/p>\n<pre><code class=\"bash\">$ coffee-redux\/bin\/coffee --source-map -i scripts\/script.coffee.coffee &gt; scripts\/script.coffee.js.map <\/code><\/pre>\n<p>  <b>5.<\/b> \u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043d\u0446\u0435 \u0444\u0430\u0439\u043b\u0430 <code>script.coffee.js<\/code> \u0435\u0441\u0442\u044c URL-\u0430\u0434\u0440\u0435\u0441 \u043a\u0430\u0440\u0442\u044b \u043a\u043e\u0434\u043e\u0432:  <\/p>\n<pre><code class=\"javascript\">\/\/@ sourceMappingURL=script.coffee.js.map <\/code><\/pre>\n<p>  <b>6.<\/b> \u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0444\u0430\u0439\u043b <code>script.coffee.js.map<\/code> \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0444\u0430\u0439\u043b:  <\/p>\n<pre><code class=\"javascript\">&quot;file&quot;:&quot;script.coffee.coffee&quot;, and source file as &quot;sources&quot;:[&quot;script.coffee.coffee&quot;] <\/code><\/pre>\n<blockquote>\n<h3>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 Coffeescript<\/h3>\n<p>  <i>\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0432\u043c\u0435\u0441\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043b\u043e\u043d\u043e\u043c \u043a\u043e\u0444\u0435-\u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u043c.<\/i><br \/>  \u041f\u0443\u043d\u043a\u0442\u044b 1 \u0438 2 \u2014 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439.<br \/>  \u041f\u0443\u043d\u043a\u0442 3 \u2014 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c.<br \/>  <b>4.<\/b>   <\/p>\n<pre><code class=\"bash\">coffee -o script.c -cm script.coffee.coffee <\/code><\/pre>\n<p>  (&quot;-cm&quot; \u2014 \u044d\u0442\u043e \u0441\u043e\u043a\u0440\u0430\u0449\u0451\u043d\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b &quot;&#8212;compile&quot; \u0438 &quot;&#8212;map&quot;.)<br \/>  <b>5.<\/b> \u041a\u043e\u0441\u044f\u043a\u0438.<br \/>  C \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u2014 \u0441\u0440\u0430\u0437\u0443 \u043f\u0430\u0440\u0430 \u0431\u0430\u0433\u043e\u0432. 1) \u0444\u0430\u0439\u043b script.coffee.js \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u2014 \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u2014 script.js, \u0437\u0430\u0442\u0438\u0440\u0430\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0444\u0430\u0439\u043b \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 (\u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u0438\u043c\u0435\u043d\u0435\u043c \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043a\u0438 \u0432 \u041e\u0421); 2) \u0435\u0441\u043b\u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 \u043d\u0435\u0442, \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u00ab\u043b\u0435\u0432\u044b\u0439\u00bb \u043f\u0443\u0441\u0442\u043e\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 &quot;\/-p\/&quot; \u043d\u0430\u0440\u044f\u0434\u0443 \u0441 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u043c.<\/p>\n<p>  \u0414\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043f\u0443\u0442\u0435\u0439 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u043a 6-\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u043d\u0435\u0441\u0436\u0430\u0442\u044b\u0439 coffeescript, \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0443\u0442\u0435\u0439 \u0432 \u043d\u0451\u043c.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u0430\u0440\u0442\u0443 \u043a\u043e\u0434\u043e\u0432 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 (\u0430 \u043d\u0435 \u0434\u0432\u0443\u043c\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438), \u0442\u043e \u0432 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u0432\u0438\u0434\u0430  <\/p>\n<pre><code class=\"javascript\">\/* \/\/@ sourceMappingURL=script.map *\/ <\/code><\/pre>\n<p>\u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0432 \u0425\u0440\u043e\u043c\u0435 \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0438\u0434\u0430.<br \/>  \u0418 \u00abfile\u00bb: \u00abscript.js\u00bb \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u043f\u0443\u0442\u0438 \u0432 \u043a\u0430\u0440\u0442\u0435 \u043a\u043e\u0434\u043e\u0432 \u0442\u043e\u0436\u0435 \u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c. \u0422\u0430\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f:  <\/p>\n<pre><code class=\"javascript\">  &quot;file&quot;: &quot;script.js&quot;,   &quot;sourceRoot&quot;: &quot;..&quot;,   &quot;sources&quot;: [     &quot;script.coffee.coffee&quot;   ], <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u0442\u0430\u043a\u043e\u0435 \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0435 \u0438\u043c\u044f \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430, script.c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0445\u043e\u0440\u043e\u0448\u043e \u043b\u0451\u0433 \u0432 \u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442.  <\/p>\n<pre><code class=\"javascript\">var lHash = location.hash.substr(1).split('='); if(lHash && lHash.length ==2 && lHash[0] =='option') \tvar optionName = lHash[1]; if(optionName && !parseInt(optionName)) \toptionName = {closure:1,jsmin:2,uglifyjs:3,coffeescript:4,typescript:5,'coff':6}[optionName.toLowerCase()]; console.log(optionName); optionName = optionName ||0; var loadScript; (loadScript = function(i){ \tvar scr = document.createElement('SCRIPT'); \tscr.setAttribute('type', 'application\/javascript'); \tscr.src ='scripts\/script.'+ ('|closure|jsmin-grunt|uglify|coffee.min|typescript.min|c\/script'.split('|')[i]) +(i?'.':'') +'js'; \tdocument.getElementsByTagName('head')[0].appendChild(scr); })(optionName); <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 6 \u0438\u043b\u0438 <code>coff<\/code> \u0431\u0443\u0434\u0435\u0442 \u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u0441\u043a\u0440\u0438\u043f\u0442 \u0438\u0437 \u043f\u0443\u0442\u0438 <code>scripts\/script.c\/script.js<\/code>. \u0412\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u0435\u0437 \u0437\u0430\u043f\u043b\u0430\u0442\u043e\u043a, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435. \u0425\u043e\u0440\u043e\u0448\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0430\u0432\u0442\u043e\u0440\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430!<\/p>\n<p>  \u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u043e\u0444\u0435\u0441\u043a\u0440\u0438\u043f\u0442 \u0432 \u043e\u0442\u043b\u0430\u0434\u043a\u0435 \u0425\u0440\u043e\u043c\u0430.<br \/>  <img decoding=\"async\" src=\"http:\/\/img441.imageshack.us\/img441\/8117\/soorcemaps07.png\"\/><br \/>  \u0412\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0425\u0440\u043e\u043c \u0432\u0441\u0451 \u0442\u0430\u043a \u0436\u0435 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 utf-8. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 <code>scr.setAttribute('charset', 'utf-8');<\/code> \u0442\u043e\u0436\u0435 \u043d\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442.  <\/p><\/blockquote>\n<h4>\u0428\u0430\u0433 2: \u0438\u0437 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e JavaScript \u0432 \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 JS<\/h4>\n<p>  <b>1.<\/b> \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c UglifyJS, \u0447\u0442\u043e\u0431\u044b \u0441\u0436\u0430\u0442\u044c JS \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u0434\u043e\u0432\u0443\u044e \u043a\u0430\u0440\u0442\u0443. \u041d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043f\u0440\u0438\u043c\u0435\u0442 \u043a\u043e\u0434\u043e\u0432\u0443\u044e \u043a\u0430\u0440\u0442\u0443 \u043e\u0442 CoffeeScript, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0434\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u043a\u043e\u0434\u043e\u0432. \u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432 &quot;<code>scripts<\/code>&quot;:  <\/p>\n<pre><code class=\"bash\">$ cd scripts\/ $ uglifyjs script.coffee.js -o script.coffee.min.js --source-map script.coffee.min.js.map --in-source-map script.coffee.js.map <\/code><\/pre>\n<p>  <\/p>\n<blockquote><p><i>\u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0432\u0435\u0442\u043a\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0432\u0438\u0434 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u2014 <\/i>  <\/p>\n<pre><code class=\"bash\">uglifyjs script.c\/script.js -o script.coffee.min.js --source-map script.coffee.min.js.map --in-source-map script.c\/script.map <\/code><\/pre>\n<\/blockquote>\n<p>  <b>2.<\/b> \u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0444\u0430\u0439\u043b \u043a\u0430\u0440\u0442\u044b \u043a\u043e\u0434\u043e\u0432 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u0432\u0438\u0434\u0430   <\/p>\n<pre><code class=\"bash\">&quot;file&quot;:&quot;script.coffee.min.js&quot; <\/code><\/pre>\n<p>  \u2026 \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u043a\u043e\u0434\u044b \u0432\u0438\u0434\u0430  <\/p>\n<pre><code class=\"bash\">&quot;sources&quot;:[&quot;script.coffee.coffee&quot;] <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"http:\/\/cdn.tutsplus.com\/net.tutsplus.com\/authors\/sayanee-basu\/source-maps-coffee.png\"\/>  <\/p>\n<blockquote><p>\u041f\u0438\u0448\u0435\u043c \u0432 \u0430\u0434\u0440\u0435\u0441\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435  <\/p>\n<pre><code class=\"dos\">http:\/\/localhost\/#option=coffeescript <\/code><\/pre>\n<p>  \u2026 \u0418 \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0441 \u043f\u0443\u0442\u0451\u043c \u0432 \u0444\u0430\u0439\u043b\u0435 \u0442\u0432\u043e\u0440\u0438\u0442\u0441\u044f \u043d\u0435\u043b\u0430\u0434\u043d\u043e\u0435. <code>&quot;sources&quot;:[&quot;script.coffee.coffee&quot;]<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043d\u043e \u043d\u0435 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b. \u041d\u043e \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u043d\u0430\u043f\u0438\u0441\u0430\u0432 (\u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c \u043f\u0435\u0440\u0435\u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440)  <\/p>\n<pre><code class=\"javascript\">&quot;sources&quot;:[&quot;\/scripts\/script.coffee.coffee&quot;] <\/code><\/pre>\n<p>  \u0412\u0441\u0451 \u0436\u0435, \u0441\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u0443\u0441\u043b\u043e\u0436\u043d\u0451\u043d\u043d\u044b\u0435 \u043f\u0443\u0442\u0438 \u0441 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u043c <code>script.c<\/code>, \u0438 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043d\u0435 \u0442\u0430\u043a, \u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c, \u0438 \u044d\u0442\u0430 \u043f\u0440\u0430\u0432\u043a\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u0445\u0430\u043a \u0441\u044b\u0440\u043e\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430.<\/p><\/blockquote>\n<h3>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 5: TypeScript<\/h3>\n<p>  TypeScript, \u043a\u0430\u043a \u0438 CoffeeScript, \u0442\u043e\u0436\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 2 \u044d\u0442\u0430\u043f\u0430: TypeScript -&gt; \u043f\u0440\u043e\u0441\u0442\u043e\u0439 JavaScript -&gt; \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 JavaScript. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u043a\u0440\u0438\u043f\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043b\u0430\u0433\u0438\u043d jQuery, \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 2 \u0444\u0430\u0439\u043b\u0430 TypeScript \u0441 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 <code>script.typescript.ts<\/code> \u0438 <code>jquery.d.ts<\/code>.<\/p>\n<blockquote><p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 Typescript:  <\/p>\n<pre><code class=\"bash\">npm install -g typescript <\/code><\/pre>\n<\/blockquote>\n<p>  <\/p>\n<h4>\u0428\u0430\u0433 1: \u0438\u0437 TypeScript \u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 JavaScript<\/h4>\n<p>  \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u00abscripts\u00bb \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435:  <\/p>\n<pre><code class=\"bash\">$ tsc script.typescript.ts -sourcemap <\/code><\/pre>\n<p>  \u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0444\u0430\u0439\u043b <code>script.typescript.js<\/code> \u0441\u043e \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u0432 \u043a\u043e\u043d\u0446\u0435:  <\/p>\n<pre><code class=\"javascript\">\/\/@ sourceMappingURL=script.typescript.js.map <\/code><\/pre>\n<p>\u0418 \u0432 \u0442\u043e\u0439 \u0436\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0444\u0430\u0439\u043b \u043a\u0430\u0440\u0442\u044b <code>script.typescript.js.map<\/code>.<\/p>\n<blockquote><p>Crhbgn \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u043b\u0441\u044f \u043d\u0430 \u043d\u0435\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0434\u043b\u044f jQuery \u0438 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u2014 \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u0434\u0435:  <\/p>\n<blockquote><p>\/script.typescript.ts(7,8): The property &#8216;keyCode&#8217; does not exist on value of type &#8216;JQueryEventObject&#8217;<\/p><\/blockquote>\n<p>  \u041d\u043e \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u0440\u0438\u043d\u044f\u043b; \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 Javascript, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043b.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u043a\u043e\u0434\u043e\u0432, \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u043a\u0435\u0448\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.  <\/p><\/blockquote>\n<h4>\u0428\u0430\u0433 2: \u0438\u0437 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e JavaScript \u0432 \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 JS<\/h4>\n<p>  \u041a\u0430\u043a \u0438 \u0434\u043b\u044f CoffeweScript, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 UglifyJS:  <\/p>\n<pre><code class=\"bash\">$ uglifyjs script.typescript.js -o script.typescript.min.js --source-map script.typescript.min.js.map --in-source-map script.typescript.js.map <\/code><\/pre>\n<p>  \u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0438 \u0432 <code> index.html<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0441\u043a\u0440\u0438\u043f\u0442\u0430: <code>scripts\/script.typescript.min.js<\/code> \u0438 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0435\u0433\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<br \/>  <img decoding=\"async\" src=\"http:\/\/cdn.tutsplus.com\/net.tutsplus.com\/authors\/sayanee-basu\/source-maps-typescript.png\"\/>  <\/p>\n<blockquote><p><i>\u041e\u0448\u0438\u0431\u043e\u043a, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u043c \u0438 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c, \u043d\u0430 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u043a\u043e\u0434\u0435 \u0437\u0430\u043c\u0435\u0447\u0435\u043d\u043e \u043d\u0435 \u0431\u044b\u043b\u043e. \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u043a\u043e\u0434\u044b \u0438 \u043c\u0435\u043f\u043f\u0438\u043d\u0433 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0431\u0435\u0437 \u0440\u0443\u0447\u043d\u044b\u0445 \u043f\u0440\u0430\u0432\u043e\u043a \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432.<\/i><\/p><\/blockquote>\n<h3>\u041a\u0430\u0440\u0442\u044b \u043a\u043e\u0434\u043e\u0432 \u0434\u043b\u044f SASS<\/h3>\n<p>  \u041a\u0440\u043e\u043c\u0435 JavaScript, Chrome \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 SASS \u0438 SCSS \u0434\u043b\u044f \u043a\u0430\u0440\u0442 \u043a\u043e\u0434\u043e\u0432. \u0414\u043b\u044f \u043c\u0435\u043f\u043f\u0438\u043d\u0433\u0430 SASS \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432 \u0425\u0440\u043e\u043c\u0435 \u0438 \u0437\u0430\u0442\u0435\u043c \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c SASS \u0432 CSS \u0441 \u043e\u0442\u043b\u0430\u0434\u043e\u0447\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438.<\/p>\n<p>  <b>1.<\/b> \u041f\u0435\u0440\u0435\u0434 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u0440\u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u0437 \u043e\u043a\u043d\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0431\u0443\u0434\u0435\u043c \u0432\u0438\u0434\u0435\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 CSS. \u042d\u0442\u043e \u043d\u0435 \u0442\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e.<br \/>  <img decoding=\"async\" src=\"http:\/\/cdn.tutsplus.com\/net.tutsplus.com\/authors\/sayanee-basu\/source-maps-onlycss.png\"\/><br \/>  <b>2.<\/b> \u0417\u0430\u0445\u043e\u0434\u0438\u043c \u0432 chrome:\/\/flags\/.<br \/>  <b>3.<\/b> \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u00abEnable <b>Developer Tools experiments<\/b>\u00bb (\u0432 \u0440\u0443\u0441\u0441\u043a\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0425\u0440\u043e\u043c\u0430 \u2014 \u00ab\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u00bb).<br \/>  <img decoding=\"async\" src=\"http:\/\/cdn.tutsplus.com\/net.tutsplus.com\/authors\/sayanee-basu\/source-maps-devtoolsexp.png\"\/><br \/>  \u0412 Windows:<\/p>\n<p>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img decoding=\"async\" src=\"http:\/\/img11.imageshack.us\/img11\/4923\/sourcemaps02.png\"\/><\/p>\n<p>  <b>4.<\/b> \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c <code>Dev Tools -&gt; Setting -&gt; Experiments -&gt; Check \u201cSupport for SASS\u201d<\/code>.<br \/>  <img decoding=\"async\" src=\"http:\/\/cdn.tutsplus.com\/net.tutsplus.com\/authors\/sayanee-basu\/source-maps-sass.png\"\/><br \/>  \u0412 Windows:<br \/>  \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 (\u2630) -&gt; \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b -&gt; \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 -&gt; Settings (\u23e3 \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443) -&gt; Experiments -&gt; <b>Support for Sass<\/b>.<\/p>\n<p>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img decoding=\"async\" src=\"http:\/\/img832.imageshack.us\/img832\/9397\/sourcemaps03.png\"\/><\/p>\n<p>  <b>5.<\/b> \u041a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c SASS \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 &quot;<code>styles<\/code>&quot; \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435. \u042d\u0442\u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u044f\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043f\u0440\u0430\u0432\u0438\u043b \u0441 <code>@media -sass-debug-info<\/code>  <\/p>\n<pre><code class=\"bash\">$ cd styles\/ $ sass --debug-info --watch style.sass:style.css <\/code><\/pre>\n<p>  <b>6.<\/b> \u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043e\u043a\u043d\u043e Developer Tools \u043f\u0435\u0440\u0435\u043e\u0442\u043a\u0440\u044b\u0442\u043e \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u0430.<br \/>  <b>7.<\/b> \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 Dev.Tools, \u0431\u0443\u0434\u0435\u043c \u0432\u0438\u0434\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a SASS-\u0444\u0430\u0439\u043b\u0443.<br \/>  <img decoding=\"async\" src=\"http:\/\/cdn.tutsplus.com\/net.tutsplus.com\/authors\/sayanee-basu\/source-maps-onlysass.png\"\/><br \/>  \u041a\u0440\u043e\u043c\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 SASS, \u0435\u0441\u043b\u0438 \u0437\u0430\u043f\u0443\u0449\u0435\u043d LiveReload \u0432 \u0444\u043e\u043d\u0435, \u0442\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 SASS-\u0444\u0430\u0439\u043b\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u2014 \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 <b>Firefox<\/b> \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0447\u0435\u0440\u0435\u0437 Firebug. \u0412 \u043d\u0451\u043c \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 SASS-\u0444\u0430\u0439\u043b\u0430. <br \/>  <img decoding=\"async\" src=\"http:\/\/cdn.tutsplus.com\/net.tutsplus.com\/authors\/sayanee-basu\/source-maps-sass-firefox.png\"\/><\/p>\n<h3>\u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043a\u043e\u0434\u043e\u0432\u044b\u0445 \u043a\u0430\u0440\u0442\u0430\u0445<\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043b\u044e\u0431\u043e\u0439 <code>*.map<\/code> \u0444\u0430\u0439\u043b, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u043c. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON \u043f\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043a\u0430\u0440\u0442 \u0432\u0435\u0440\u0441\u0438\u0438 3. \u041e\u0431\u044b\u0447\u043d\u043e, \u0438\u043c\u0435\u0435\u0442\u0441\u044f 5 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:<br \/>  <b>1.<\/b> <b>version<\/b>: \u0432\u0435\u0440\u0441\u0438\u044f \u043a\u0430\u0440\u0442\u044b (\u043e\u0431\u044b\u0447\u043d\u043e 3).<br \/>  <b>2.<\/b> <b>file<\/b>: \u0438\u043c\u044f \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430.<br \/>  <b>3.<\/b> <b>sources<\/b>: \u0438\u043c\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430.<br \/>  <b>4.<\/b> <b>names<\/b>: \u0441\u0438\u043c\u0432\u043e\u043b\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0434\u043b\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0439.<br \/>  <b>5.<\/b> <b>mappings<\/b>: \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0439.<br \/>  <img decoding=\"async\" src=\"http:\/\/cdn.tutsplus.com\/net.tutsplus.com\/authors\/sayanee-basu\/source-maps-file.png\"\/><\/p>\n<h3>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438<\/h3>\n<p>  \u041a\u0430\u0440\u0442\u044b \u043a\u043e\u0434\u043e\u0432 \u0432\u0441\u0451 \u0435\u0449\u0451 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0434\u0438\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043d\u043e \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0432 \u0421\u0435\u0442\u0438. \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0442\u0430\u043a\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435.  <\/p>\n<ul>\n<li> <a href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/developertools\/sourcemaps\/\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 JavaScript Source Maps<\/a> by Ryan Seddon, HTML5 Rocks, 21 \u043c\u0430\u0440\u0442\u0430 2012; <a href=\"http:\/\/habrahabr.ru\/post\/148098\/\">\u041f\u0435\u0440\u0435\u0432\u043e\u0434<\/a>.<\/li>\n<li> <a href=\"http:\/\/addyosmani.com\/blog\/the-breakpoint-episode-3-source-maps-shortcut-secrets-and-jsrun\/\">The Breakpoint Episode 3: JavaScript Source Maps<\/a> by the Google Developer Team<\/li>\n<li> <a href=\"http:\/\/addyosmani.com\/blog\/the-breakpoint-episode-2-sass-source-maps-feature-inspection-and-more\/\">The Breakpoint Episode 2: SASS Source Maps<\/a> by the Google Developer Team<\/li>\n<li> <a href=\"https:\/\/github.com\/ryanseddon\/source-map\/wiki\/Source-maps%3A-languages%2C-tools-and-other-info\">Source Maps wiki<\/a> on languages, tools, articles on Source Maps<\/li>\n<li> <a href=\"http:\/\/www.thecssninja.com\/JavaScript\/multi-level-sourcemaps\">Multi Level Source Maps<\/a> with CoffeeScript and TypeScript by Ryan Seddon<\/li>\n<li> <a href=\"https:\/\/docs.google.com\/document\/d\/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k\/edit?hl=en_US&amp;pli=1&amp;pli=1\">Source Maps Version 3 proposal<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p> <img decoding=\"async\" src=\"http:\/\/st.habrate.ru\/pixel.gif\"\/><br \/>  \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u0432 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b \u043a\u0430\u0440\u0442 \u043a\u043e\u0434\u043e\u0432. \u0425\u043e\u0442\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0430, \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0435\u0441\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0436\u0438\u0434\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0439 \u043e\u0442\u043b\u0430\u0434\u043a\u0438, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435, \u0432 \u0432\u0438\u0434\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u0438 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c.<\/p>\n<blockquote><p><img decoding=\"async\" src=\"http:\/\/m3.licdn.com\/mpr\/pub\/image-F1XtkI4Zld6aTDY77Lo-VD_oDPPNmHEYYMyzeVBkD4bcdV8wF1Xzo5AZD_XdmAH71Q8Z\/sayanee-basu.jpg\" align=\"left\"\/>&nbsp;<br \/>  &nbsp;<br \/>  <i>\u0410\u0432\u0442\u043e\u0440<\/i>: Sayanee Basu, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u0437 \u0421\u0438\u043d\u0433\u0430\u043f\u0443\u0440\u0430. \u0412 <a href=\"http:\/\/sg.linkedin.com\/in\/sayanee\">\u0435\u0451 \u043f\u0440\u043e\u0444\u0438\u043b\u0435<\/a> \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0437\u043d\u0430\u043d\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 Ruby \u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043d\u0438\u043c \u0441\u0430\u0445\u0430\u0440\u043d\u044b\u0445 \u043c\u0435\u0442\u0430\u044f\u0437\u044b\u043a\u043e\u0432. \u041e\u0442\u0441\u044e\u0434\u0430 \u2014 \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u043a \u0441\u044b\u0440\u0446\u043e\u0432\u044b\u043c \u043a\u0430\u0440\u0442\u0430\u043c.<br \/>  &nbsp;<br \/>  &nbsp;<br \/>  <font color=\"#555555\"><i>\u041c\u043e\u0436\u043d\u043e \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u044c\u0441\u044f \u0441 \u0430\u0432\u0442\u043e\u0440\u043e\u043c, \u0447\u0442\u043e \u00ab\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0430\u00bb \u0438 \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u2014 \u043f\u043e\u0447\u0442\u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0438 \u0431\u0430\u0433\u0438 \u0441 \u043f\u0443\u0442\u044f\u043c\u0438 \u043a \u0444\u0430\u0439\u043b\u0430\u043c. \u0418\u043c\u0435\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u044b\u0440\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438; \u043e\u0442\u0434\u0430\u043b\u0451\u043d\u043d\u0430\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u044f \u2014 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a \u0431\u044b\u043b\u043e \u0441 nodeJS \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434. \u041d\u043e \u043e\u0431\u044a\u0451\u043c \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043e\u043a \u043d\u0435 \u0442\u0430\u043a\u043e\u0439 \u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u0432\u043e\u043f\u0440\u043e\u0441 \u043d\u0435 \u0433\u043e\u0434\u0430, \u0430 \u043c\u0435\u0441\u044f\u0446\u0435\u0432, \u0438 \u0447\u0442\u043e \u0432\u0441\u0435\u043b\u044f\u0435\u0442 \u043d\u0430\u0434\u0435\u0436\u0434\u0443 \u2014 \u0447\u0430\u0441\u0442\u044c \u0431\u0430\u0433\u043e\u0432 \u043b\u0435\u0436\u0438\u0442 \u0432 \u043f\u043e\u0434\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u0434\u0430\u0445, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 nodeJS. \u041f\u0440\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u0442\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f. \u041d\u043e \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0433\u0438\u043a\u043e\u0432\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0442\u0430\u043a\u0438\u043c \u0436\u0435, \u043a\u0430\u043a \u0443 \u0442\u0435\u0445, \u043a\u0442\u043e \u0441\u0442\u0430\u0432\u0438\u0442 \u0430\u043b\u044c\u0444\u0430-\u0432\u0435\u0440\u0441\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043d\u0435 \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f, \u0430 \u0434\u043b\u044f \u0434\u0435\u043b\u0430.<\/p>\n<p>  (\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u0435\u0441\u0442\u0438 \u0441 \u043f\u043e\u043b\u0435\u0439 \u0431\u0443\u0434\u0443\u0442 \u0432\u0438\u0434\u0438\u043c\u043e, \u0447\u0435\u0440\u0435\u0437 \u043f\u0430\u0440\u0443 \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043f\u0440\u043e Firefox \u0441 \u0435\u0433\u043e \u0443\u043c\u0435\u043d\u0438\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e \u0432\u0441\u0435\u043c \u044d\u0442\u0438\u043c \u0443\u0441\u0442\u0430\u043a\u0430\u043d\u0438\u0432\u0430\u044e\u0449\u0438\u043c\u0441\u044f \u0445\u043e\u0437\u044f\u0439\u0441\u0442\u0432\u043e\u043c.)<\/p>\n<p>  \u041d\u0443\u0436\u043d\u043e \u043b\u0438 \u0441 \u044d\u0442\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u0435\u0439\u0447\u0430\u0441? \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 Coffeescript, \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0443\u0436\u0435 \u043d\u0430\u0441\u0442\u0430\u043b\u043e. \u0423\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043d\u0435\u043e\u0446\u0435\u043d\u0438\u043c\u044b\u0439 \u043e\u043f\u044b\u0442 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u043d\u044c\u0448\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441 2 \u044f\u0437\u044b\u043a\u0430\u043c\u0438, \u043f\u043e\u043c\u043d\u044f, \u0447\u0442\u043e \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f JS.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0443\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Grunt, \u0442\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u041a\u043e\u0444\u0435 \u0438 SASS \u2014 \u0441\u0435\u0439\u0447\u0430\u0441 \u0434\u0438\u0441\u0442\u0430\u043d\u0446\u0438\u044f \u0432\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u043b\u0430 \u0435\u0449\u0451 \u043a\u043e\u0440\u043e\u0447\u0435. \u041d\u043e, \u0441\u0443\u0434\u044f \u0434\u0430\u0436\u0435 \u043f\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c, \u043d\u0430\u0434\u043e \u0431\u044b\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u0441 \u0433\u043e\u043b\u043e\u0432\u043e\u0439 \u043e\u043a\u0443\u043d\u0443\u0442\u044c\u0441\u044f \u0432\u043e \u0432\u0435\u0441\u044c \u0441\u0442\u0435\u043a \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u0438\u0449\u0430 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0432\u044b\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u0431\u0430\u0433\u043e\u0432 \u0441\u0431\u043e\u0440\u043a\u0438. \u0425\u043e\u0440\u043e\u0448\u043e \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0431\u0430\u0433\u0438 \u0431\u0443\u0434\u0443\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u2014 \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043d\u0430\u0434\u0441\u0442\u0440\u043e\u0435\u0447\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0432\u0435\u043a\u0442\u043e\u0440 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0438\u0433\u0440\u043e\u043a\u043e\u0432 \u0440\u044b\u043d\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u043d\u0435\u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0435 \u043e\u0441\u0442\u0430\u0432\u044f\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f \u0434\u044b\u0445\u0430\u043d\u0438\u0435 \u0434\u043e\u0433\u043e\u043d\u044f\u044e\u0449\u0438\u0445, \u0430 \u0444\u0438\u043d\u0438\u0448 \u0431\u043b\u0438\u0437\u043e\u043a.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u043e\u0439\u0434\u0451\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0430\u0432\u0442\u043e\u0440\u043e\u043c, \u0438\u043b\u0438 \u0435\u0449\u0451 \u043b\u0443\u0447\u0448\u0435, \u0437\u0430\u0442\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u041e\u0432\u0438\u0442\u0435 \u043a\u043e\u0434\u044b \u0438\u0437 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043f\u0440\u043e\u0438\u043d\u0441\u0442\u0430\u043b\u043b\u0438\u0440\u0443\u0435\u0442\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 nodeJS, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u043f\u043e \u043e\u0441\u0432\u043e\u0435\u043d\u0438\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/i><\/font><\/p>\n<p>  <b>1)<\/b> <a href=\"http:\/\/www.aaron-powell.com\/web\/typescript-source-maps\">Using Source Maps with TypeScript<\/a>, Aaron Powell, Oct 3 2012;<br \/>  <b>2)<\/b> <a href=\"https:\/\/github.com\/mozilla\/source-map\">github.com\/mozilla\/source-map<\/a> \u2014 This is a library to generate and consume <a href=\"https:\/\/docs.google.com\/document\/d\/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k\/edit\">the source map format<\/a>.<br \/>  <b>3)<\/b> <a href=\"http:\/\/globaldev.co.uk\/2013\/01\/happy-debugging-with-javascript-source-maps\/\">Happy debugging with JavaScript source maps<\/a> by James Allardice, 25 January 2013. <br \/>  <b>4)<\/b> <a href=\"http:\/\/bower.io\/\">bower.io\/<\/a> \u2014 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043e\u0442 Twitter.<br \/>  <b>5)<\/b> <a href=\"http:\/\/kevinpelgrims.com\/blog\/2011\/12\/28\/building-coffeescript-with-sublime-on-windows\">kevinpelgrims.com\/blog\/2011\/12\/28\/building-coffeescript-with-sublime-on-windows<\/a><br \/>  <b>6)<\/b> <a href=\"http:\/\/jashkenas.github.io\/coffee-script\/documentation\/docs\/sourcemap.html\">sourcemap.litcoffee<\/a>.<br \/>  <b>7)<\/b> <a href=\"https:\/\/github.com\/evanw\/node-source-map-support\">github.com\/evanw\/node-source-map-support<\/a><br \/>  <b>8)<\/b> <a href=\"http:\/\/habrahabr.ru\/post\/178711\/\">\u041f\u0435\u0440\u0435\u0432\u043e\u0434\u044b, \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0443 <\/a> (2013-05)  <\/p><\/blockquote>\n<div class=\"clear\"><\/div>\n<\/p><\/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\/178743\/\"> http:\/\/habrahabr.ru\/post\/178743\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">   \t\u0412 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432\u0430\u0448 \u043a\u043e\u0434 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043a\u043e\u0434\u0430 \u043d\u0430 \u00ab\u0431\u043e\u0435\u0432\u043e\u043c\u00bb \u0441\u0435\u0440\u0432\u0435\u0440\u0435 (production) \u043f\u043e\u0441\u043b\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438, \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439. \u0422\u0443\u0442-\u0442\u043e \u0438 \u0432\u0441\u0442\u0443\u043f\u0430\u044e\u0442 \u0432 \u0438\u0433\u0440\u0443 \u043a\u0430\u0440\u0442\u044b \u043a\u043e\u0434\u0430 (source maps), \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u0442\u043e\u0447\u043d\u043e\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0412 \u044d\u0442\u043e\u043c \u0432\u0432\u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u0432\u043e\u0437\u044c\u043c\u0451\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u0432 JavaScript \u0441 \u0446\u0435\u043b\u044c\u044e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u043a\u0430\u0440\u0442 \u043a\u043e\u0434\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\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-178743","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/178743","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=178743"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/178743\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=178743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=178743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=178743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}