Gulp adalah javascript task runner yang membantu kita untuk melakukan otomatisasi task-task berikut ini:<\/p>\n
- \n
- membundle dan minifying library-library dan CSS stylesheet.<\/li>\n
- Refresh web browser setelah file disimpan.<\/li>\n
- Mempercepat menjalankan unit test.<\/li>\n
- Menjalankan code analysis.<\/li>\n
- Menyalin file yang telah dimodifikasi kedalam output directory.<\/li>\n<\/ul>\n
Untuk lebih mengerti apa fungsinya Gulp, maka kita akan melakukan praktek secara langsung.<\/p>\n
<\/p>\n
{Membuat Project<\/em><\/strong>}<\/p>\n
Langkah pertama adalah membuat project ASP.NET Core Web Application pada Visual Studio 2017 dengan nama BundlerMinifier.<\/p>\n
![\"blog01\"](\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog01.jpg\" "\\"blog01\\"")
<\/p>\nKemudian klik OK, kemudian pada window New ASP.NET Core Web Application pilih Web Application.<\/p>\n
![\"blog02\"](\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog02.jpg\" "\\"blog02\\"")
<\/p>\nKemudian klik tombol OK.<\/p>\n
<\/p>\n
{bundleconfig.json<\/em><\/strong>}<\/p>\n
Selanjutnya pada project dapat dilihat file bundleconfig.json dengan isi sebagai berikut.<\/p>\n
\n\/\/ Configure bundling and minification for the project.<\/span>\r\n\/\/ More info at https:\/\/go.microsoft.com\/fwlink\/?LinkId=808241<\/span>\r\n[\r\n {\r\n \"outputFileName\"<\/span>: \"wwwroot\/css\/site.min.css\"<\/span>,\r\n \/\/ An array of relative input file paths. Globbing patterns supported<\/span>\r\n \"inputFiles\"<\/span>: [\r\n \"wwwroot\/css\/site.css\"<\/span>\r\n ]\r\n },\r\n {\r\n \"outputFileName\"<\/span>: \"wwwroot\/js\/site.min.js\"<\/span>,\r\n \"inputFiles\"<\/span>: [\r\n \"wwwroot\/js\/site.js\"<\/span>\r\n ],\r\n \/\/ Optionally specify minification options<\/span>\r\n \"minify\"<\/span>: {\r\n \"enabled\"<\/span>: true<\/span>,\r\n \"renameLocals\"<\/span>: true<\/span>\r\n },\r\n \/\/ Optionally generate .map file<\/span>\r\n \"sourceMap\"<\/span>: false<\/span>\r\n }\r\n]<\/pre>\n<\/p>\n<\/div>\n
Saat membuat file ini pada VS2017 dapat dilihat tawaran untuk menggunakan extension untuk membantu proses ini seperti pada gambar di bawah.<\/p>\n
![\"blog03\"](\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog03.jpg\" "\\"blog03\\"")
<\/p>\nKlik tawaran tersebut, dan akan ditampilkan tawaran sebagai berikut.<\/p>\n
![\"blog04\"](\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog04.jpg\" "\\"blog04\\"")
<\/p>\nCentak checkbox yang tersedia, kemudian klik Install.\u00a0 Setelah proses installasi selesai, maka VS2017 perlu direstart.<\/p>\n
<\/p>\n
{Bundling & Minifying<\/em><\/strong>}<\/p>\n
Untuk membundle beberapa file, maka file-file tersebut dapat dipilih dengan cara menekan tombol Control+Klik file-file yang diinginkan pada Solution Explorer seperti pada gambar di bawah ini.<\/p>\n
![\"blog06\"](\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog06.jpg\" "\\"blog06\\"")
<\/p>\nHasilnya dapat dilihat pada gambar dibawah ini.<\/p>\n
![\"blog07\"](\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog07.jpg\" "\\"blog07\\"")
<\/p>\nNama file hasil bundling ini adalah jquery-validation-bundle.js, yang berisi gabungan file additional-method.js dan jquery-validate.js.\u00a0 Sedangkan file jquery-validation-bundle.min.js adalah file jquery-validation-bundle.js yang telah diminifying.<\/p>\n
<\/p>\n
{Bundle on Build<\/em><\/strong>}<\/p>\n
Pada project yang kita buat telah tersedia file bundleconfig.json.\u00a0 Dengan memanfaatkan file ini, kita dapat melakukan proses bundle secara otomatis saat proses build selesai dilakukan.\u00a0 Caranya adalah, klik kanan pada file tersebut kemudian pilih Budler & Minifier > Enable bundle on build.<\/p>\n
![\"blog08\"](\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog08.jpg\" "\\"blog08\\"")
<\/p>\nSelanjutnya akan dilakukan proses installasi package yang diperlukan untuk melakukan bundle secara otomatis ini.\u00a0 Nama file-file hasil bundle dan minify sesuai dengan konfigurasi yang telah dilakukan pada file bundleconfig.json.<\/p>\n
Sebagai contoh setelah project dibuild, maka dapat dilihat ada proses tambahan, yaitu bundler, seperti yang dilihat pada gambar di bawah ini.<\/p>\n
![\"blog09\"](\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog09.jpg\" "\\"blog09\\"")
<\/p>\nHasilnya dapat dilihat pada file-file yang ada di Solution Explorer.<\/p>\n
![\"blog10\"](\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog10.jpg\" "\\"blog10\\"")
<\/p>\nPada gambar di atas dapat dilihat file site.css memiliki file site.min.css yang merupakan hasil minifying.\u00a0 Begitu juga file site.js memiliki file site.min.js.<\/p>\n
<\/p>\n
{Gulp<\/em><\/strong>}<\/p>\n
Jika telah biasa melakukan proses otomatisasi dengan Gulp maka file bundleconfig.json digunakan untuk tujuan tersebut. Caranya adalah dengan klik kanan pada file bundleconfig.json, kemudian pilih Bundles & Minifier > Convert to Gulp.\u00a0 Kemudian akan dilakukan proses installasi package yang diperlukan.\u00a0 Maka dapat dilihat terdapat tambahan file baru yaitu gulpfile.js dengan isi sebagai berikut.<\/p>\n
\n\"use strict\"<\/span>;<\/pre>\nvar<\/span> gulp = require(“gulp”<\/span>),
\nconcat = require(“gulp-concat”<\/span>),
\ncssmin = require(“gulp-cssmin”<\/span>),
\nhtmlmin = require(“gulp-htmlmin”<\/span>),
\nuglify = require(“gulp-uglify”<\/span>),
\nmerge = require(“merge-stream”<\/span>),
\ndel = require(“del”<\/span>),
\nbundleconfig = require(“.\/bundleconfig.json”<\/span>);<\/p>\nvar<\/span> regex = {
\ncss: \/\\.css$\/,
\nhtml: \/\\.(html|htm)$\/,
\njs: \/\\.js$\/
\n};<\/p>\ngulp.task(“min”<\/span>, [“min:js”<\/span>, “min:css”<\/span>, “min:html”<\/span>]);<\/p>\n
gulp.task(“min:js”<\/span>, function<\/span> () {
\nvar<\/span> tasks = getBundles(regex.js).map(function<\/span> (bundle) {
\nreturn<\/span> gulp.src(bundle.inputFiles, { base<\/span>: “.”<\/span> })
\n.pipe(concat(bundle.outputFileName))
\n.pipe(uglify())
\n.pipe(gulp.dest(“.”<\/span>));
\n});
\nreturn<\/span> merge(tasks);
\n});<\/p>\ngulp.task(“min:css”<\/span>, function<\/span> () {
\nvar<\/span> tasks = getBundles(regex.css).map(function<\/span> (bundle) {
\nreturn<\/span> gulp.src(bundle.inputFiles, { base<\/span>: “.”<\/span> })
\n.pipe(concat(bundle.outputFileName))
\n.pipe(cssmin())
\n.pipe(gulp.dest(“.”<\/span>));
\n});
\nreturn<\/span> merge(tasks);
\n});<\/p>\ngulp.task(“min:html”<\/span>, function<\/span> () {
\nvar<\/span> tasks = getBundles(regex.html).map(function<\/span> (bundle) {
\nreturn<\/span> gulp.src(bundle.inputFiles, { base<\/span>: “.”<\/span> })
\n.pipe(concat(bundle.outputFileName))
\n.pipe(htmlmin({ collapseWhitespace: true<\/span>, minifyCSS: true<\/span>, minifyJS: true<\/span> }))
\n.pipe(gulp.dest(“.”<\/span>));
\n});
\nreturn<\/span> merge(tasks);
\n});<\/p>\ngulp.task(“clean”<\/span>, function<\/span> () {
\nvar<\/span> files = bundleconfig.map(function<\/span> (bundle) {
\nreturn<\/span> bundle.outputFileName;
\n});<\/p>\nreturn<\/span> del(files);
\n});<\/p>\ngulp.task(“watch”<\/span>, function<\/span> () {
\ngetBundles(regex.js).forEach(function<\/span> (bundle) {
\ngulp.watch(bundle.inputFiles, [“min:js”<\/span>]);
\n});<\/p>\ngetBundles(regex.css).forEach(function<\/span> (bundle) {
\ngulp.watch(bundle.inputFiles, [“min:css”<\/span>]);
\n});<\/p>\ngetBundles(regex.html).forEach(function<\/span> (bundle) {
\ngulp.watch(bundle.inputFiles, [“min:html”<\/span>]);
\n});
\n});<\/p>\nfunction<\/span> getBundles(regexPattern) {
\nreturn<\/span> bundleconfig.filter(function<\/span> (bundle) {
\nreturn<\/span> regexPattern.test(bundle.outputFileName);
\n});
\n}<\/p>\n<\/p>\n<\/div>\n
Jika ingin memanfaatkan Gulp pada Visual Studio 2017, maka dapat dilakukan dengan menggunakan Task Runner Explorer.\u00a0 Untuk menaktifkan fitur ini dengan cara pilih View > Other Windows > Taks Runner Explorer.\u00a0 Hasilnya dapat dilihat pada area bawah Visual Studio 2017.<\/p>\n
![\"blog11\"](\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog11.jpg\" "\\"blog11\\"")
<\/p>\n","protected":false},"excerpt":{"rendered":"Hal pertama yang harus kita ketahui adalah \u201capa itu GULP?\u201d dan \u201capa fungsi GULP?\u201d setelah itu baru kita akan belajar bagaimana menggunakannya. Karena tidak ada gunanya menghabiskanw aktu terlebih dahulu jika kita tidak tahu apa manfaatnya kan? Masalah yang mungkin…<\/p>\n","protected":false},"author":1,"featured_media":3466,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[169,170],"class_list":["post-3471","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwaredev","tag-visual-studio","tag-vs-2017"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog07.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-TZ","_links":{"self":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/3471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3471"}],"version-history":[{"count":2,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/3471\/revisions"}],"predecessor-version":[{"id":3473,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/3471\/revisions\/3473"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/media\/3466"}],"wp:attachment":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}