{"id":59,"date":"2019-02-05T10:08:21","date_gmt":"2019-02-05T10:08:21","guid":{"rendered":"http:\/\/blog.yusufcelik.net\/?p=59"},"modified":"2019-02-05T10:09:06","modified_gmt":"2019-02-05T10:09:06","slug":"grunt-js-minify-etme","status":"publish","type":"post","link":"http:\/\/blog.yusufcelik.net\/index.php\/2019\/02\/05\/grunt-js-minify-etme\/","title":{"rendered":"Grunt.js minify etme"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"913\" height=\"351\" src=\"https:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/Grunt-JavaScript.jpg\" alt=\"\" class=\"wp-image-62\" srcset=\"http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/Grunt-JavaScript.jpg 913w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/Grunt-JavaScript-300x115.jpg 300w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/Grunt-JavaScript-768x295.jpg 768w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/Grunt-JavaScript-830x319.jpg 830w\" sizes=\"(max-width: 913px) 100vw, 913px\" \/><\/figure>\n\n\n\n<p>Merhaba yazd\u0131\u011f\u0131m ilk blog yaz\u0131s\u0131 oldu\u011fundan biraz eksikler olabilir \ud83d\ude0a Kusura bakmay\u0131n. \u0130lk yaz\u0131da projelerinizde kulland\u0131\u011f\u0131n\u0131z js, css vb. Dosyalar\u0131 <strong>Grunt.js<\/strong> kullanarak nas\u0131l min hale getirebilece\u011fimizi g\u00f6sterece\u011fim.<\/p>\n\n\n\n<p>Visual Studio\u2019da GruntBlog ad\u0131nda &nbsp;yeni bir <strong>ASP.Net Core Web Application<\/strong> projesi olu\u015fturuyoruz. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"540\" height=\"375\" src=\"https:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-1.png\" alt=\"\" class=\"wp-image-61\" srcset=\"http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-1.png 540w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-1-300x208.png 300w\" sizes=\"(max-width: 540px) 100vw, 540px\" \/><\/figure>\n\n\n\n<p>A\u00e7\u0131lan ekrandan MVC projesi se\u00e7iyoruz. Daha sonra projemize <strong>package.json<\/strong> ad\u0131nda bir <strong>npm <\/strong>config dosyas\u0131 ekliyoruz. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"624\" height=\"435\" src=\"https:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-2.png\" alt=\"\" class=\"wp-image-63\" srcset=\"http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-2.png 624w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-2-300x209.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>Olu\u015fan config dosyas\u0131n\u0131n i\u00e7eri\u011fi resimdeki gibidir.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"497\" height=\"266\" src=\"https:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-3.png\" alt=\"\" class=\"wp-image-64\" srcset=\"http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-3.png 497w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-3-300x161.png 300w\" sizes=\"(max-width: 497px) 100vw, 497px\" \/><\/figure>\n\n\n\n<p>\u015eimdi devDependencies k\u0131sm\u0131na Grunt.js\u2019de kullanmak istedi\u011fimiz mod\u00fclleri ekliyoruz. Ben a\u015fa\u011f\u0131ya mod\u00fclleri ve a\u00e7\u0131klamalar\u0131n\u0131 ekledim. Projenize uygun olanlar\u0131 istedi\u011finiz \u015fekilde ekleyebilirsiniz.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"624\" height=\"147\" src=\"https:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-4.png\" alt=\"\" class=\"wp-image-65\" srcset=\"http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-4.png 624w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-4-300x71.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>Mod\u00fclleri ekledi\u011fimizde projemizin dizininde bulunan npm klas\u00f6r\u00fc restore edilmelidir. \u00c7\u00fcnk\u00fc grunt i\u00e7in gerekli olan mod\u00fcller projeye y\u00fcklenmelidir.&nbsp;<\/p>\n\n\n\n<p><strong>NOT<\/strong>: Y\u00fckleme esnas\u0131nda ekledi\u011fim yorum sat\u0131rlar\u0131n\u0131 eklemeyin \ud83d\ude0a<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"558\" height=\"286\" src=\"https:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-6.png\" alt=\"\" class=\"wp-image-67\" srcset=\"http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-6.png 558w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-6-300x154.png 300w\" sizes=\"(max-width: 558px) 100vw, 558px\" \/><\/figure>\n\n\n\n<p>Y\u00fckleme detaylar\u0131n\u0131 Visual Studio\u2019daki Output ekran\u0131ndan g\u00f6rebilirsiniz. Ayr\u0131ca y\u00fckeleme bitti\u011finde npm klas\u00f6r\u00fcnde config dosyas\u0131na ekledi\u011fimiz mod\u00fcller eklenmi\u015f olacakt\u0131r.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"336\" height=\"246\" src=\"https:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-7.png\" alt=\"\" class=\"wp-image-68\" srcset=\"http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-7.png 336w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-7-300x220.png 300w\" sizes=\"(max-width: 336px) 100vw, 336px\" \/><\/figure><\/div>\n\n\n\n<p>Bu kadar ayar yapt\u0131ktan sonra art\u0131k kod yazmaya ge\u00e7ebiliriz \ud83d\ude0a\n\u0130lk olarak Grunt mod\u00fcllerini y\u00f6netebilece\u011fimiz kodlar\u0131 yazmak i\u00e7in Grunt.js\nad\u0131nda bir javascript dosyas\u0131 olu\u015fturuyoruz. <\/p>\n\n\n\n<p>Gruntfile.js i\u00e7erisine basit bir task olu\u015fturuyoruz. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"624\" height=\"152\" src=\"https:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-8.png\" alt=\"\" class=\"wp-image-69\" srcset=\"http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-8.png 624w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-8-300x73.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>Olu\u015fturdu\u011fumuz Task\u2019lar\u0131 kullanabilmemiz i\u00e7in&nbsp; \u201dExtension and Updates\u201d se\u00e7ene\u011finden bir Task runner y\u00fckl\u00fcyoruz.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"624\" height=\"428\" src=\"https:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-9.png\" alt=\"\" class=\"wp-image-70\" srcset=\"http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-9.png 624w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-9-300x206.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>Art\u0131k Task runner&nbsp; explorer sayesinde yazd\u0131\u011f\u0131m\u0131z task \u0131 control edebiliriz. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"624\" height=\"212\" src=\"https:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-10.png\" alt=\"\" class=\"wp-image-71\" srcset=\"http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-10.png 624w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-10-300x102.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi console ekran\u0131na Hello world! Mesaj\u0131n\u0131 Verdi.\n<\/p>\n\n\n\n<p>Bir adet js ve jsmin isminde projemize bo\u015f klas\u00f6r ekliyoruz. js klas\u00f6r\u00fc i\u00e7erisine bir js dosyas\u0131 olu\u015fturuyoruz ve i\u00e7erisine basit bir toplama fonksiyonu yaz\u0131yoruz.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"457\" height=\"254\" src=\"https:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-11.png\" alt=\"\" class=\"wp-image-72\" srcset=\"http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-11.png 457w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-11-300x167.png 300w\" sizes=\"(max-width: 457px) 100vw, 457px\" \/><\/figure>\n\n\n\n<p>Art\u0131k yazd\u0131\u011f\u0131m\u0131z js kodunu minify etmeye geldi s\u0131ra \ud83d\ude0a\n<\/p>\n\n\n\n<p>Yukar\u0131da da belirtti\u011fim gibi bu i\u015flemi yapabilmek i\u00e7in <strong>grunt-contrib-uglify<\/strong> mod\u00fcl\u00fcn\u00fc kullanmam\u0131z gerekiyor. Gruntfile.js dosyas\u0131na mod\u00fcl\u00fc y\u00fckl\u00fcyoruz. Ve gerekli kaynak klas\u00f6r ve hedef klas\u00f6r\u00fc belirliyoruz. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"624\" height=\"416\" src=\"https:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-12.png\" alt=\"\" class=\"wp-image-73\" srcset=\"http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-12.png 624w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-12-300x200.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>Task runner\u2019dan uglify se\u00e7ene\u011fini \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131zda jsmin klas\u00f6r\u00fcne js dosyas\u0131 i\u00e7erisindeki kodlar minify edilerek olu\u015fturulacakt\u0131r.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"624\" height=\"295\" src=\"https:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-14.png\" alt=\"\" class=\"wp-image-75\" srcset=\"http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-14.png 624w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-14-300x142.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><figcaption><br><br><\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"339\" height=\"129\" src=\"https:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-15.png\" alt=\"\" class=\"wp-image-76\" srcset=\"http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-15.png 339w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-15-300x114.png 300w\" sizes=\"(max-width: 339px) 100vw, 339px\" \/><\/figure><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"567\" height=\"124\" src=\"https:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-16.png\" alt=\"\" class=\"wp-image-77\" srcset=\"http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-16.png 567w, http:\/\/blog.yusufcelik.net\/wp-content\/uploads\/2019\/02\/image-16-300x66.png 300w\" sizes=\"(max-width: 567px) 100vw, 567px\" \/><\/figure>\n\n\n\n<p>G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi js dosyam\u0131z\u0131n i\u00e7erisindeki kodlar minify hale getirildi. \ud83d\ude0a <\/p>\n\n\n\n<p>Umar\u0131m yaz\u0131n\u0131n yarar\u0131 olmu\u015ftur. \ud83d\ude0a<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Merhaba yazd\u0131\u011f\u0131m ilk blog yaz\u0131s\u0131 oldu\u011fundan biraz eksikler olabilir \ud83d\ude0a Kusura bakmay\u0131n. \u0130lk yaz\u0131da projelerinizde kulland\u0131\u011f\u0131n\u0131z js, css vb. Dosyalar\u0131 Grunt.js kullanarak nas\u0131l min hale getirebilece\u011fimizi g\u00f6sterece\u011fim. Visual Studio\u2019da GruntBlog ad\u0131nda &nbsp;yeni bir ASP.Net&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":62,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/posts\/59"}],"collection":[{"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/comments?post=59"}],"version-history":[{"count":2,"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/posts\/59\/revisions"}],"predecessor-version":[{"id":79,"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/posts\/59\/revisions\/79"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/media\/62"}],"wp:attachment":[{"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/media?parent=59"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/categories?post=59"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.yusufcelik.net\/index.php\/wp-json\/wp\/v2\/tags?post=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}