Hal pertama yang harus kita ketahui adalah “apa itu GULP?” dan “apa fungsi GULP?” 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 sering kita hadapi dalam “web application development” adalah kadang harus melakukan hal yang sama berulang kali. Bisa melakukan pengulangan task di satu project. Atau melakukan pengulangan setiap memulai membuat project. Sebagai contoh, kita akan membuat banyak file javascript, file CSS, file HTML, kemudian kita perlu melakukan “minifying” semua itu sebelum di upload.
Nah, GULP membantu kita untuk otomatisasi proses-proses taks yang berulang tersebut.
{What is Gulp}
Gulp adalah javascript task runner yang membantu kita untuk melakukan otomatisasi task-task berikut ini:
- membundle dan minifying library-library dan CSS stylesheet.
- Refresh web browser setelah file disimpan.
- Mempercepat menjalankan unit test.
- Menjalankan code analysis.
- Menyalin file yang telah dimodifikasi kedalam output directory.
Untuk lebih mengerti apa fungsinya Gulp, maka kita akan melakukan praktek secara langsung.
{Membuat Project}
Langkah pertama adalah membuat project ASP.NET Core Web Application pada Visual Studio 2017 dengan nama BundlerMinifier.
Kemudian klik OK, kemudian pada window New ASP.NET Core Web Application pilih Web Application.
Kemudian klik tombol OK.
{bundleconfig.json}
Selanjutnya pada project dapat dilihat file bundleconfig.json dengan isi sebagai berikut.
// Configure bundling and minification for the project. // More info at https://go.microsoft.com/fwlink/?LinkId=808241 [ { "outputFileName": "wwwroot/css/site.min.css", // An array of relative input file paths. Globbing patterns supported "inputFiles": [ "wwwroot/css/site.css" ] }, { "outputFileName": "wwwroot/js/site.min.js", "inputFiles": [ "wwwroot/js/site.js" ], // Optionally specify minification options "minify": { "enabled": true, "renameLocals": true }, // Optionally generate .map file "sourceMap": false } ]
Saat membuat file ini pada VS2017 dapat dilihat tawaran untuk menggunakan extension untuk membantu proses ini seperti pada gambar di bawah.
Klik tawaran tersebut, dan akan ditampilkan tawaran sebagai berikut.
Centak checkbox yang tersedia, kemudian klik Install. Setelah proses installasi selesai, maka VS2017 perlu direstart.
{Bundling & Minifying}
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.
Hasilnya dapat dilihat pada gambar dibawah ini.
Nama file hasil bundling ini adalah jquery-validation-bundle.js, yang berisi gabungan file additional-method.js dan jquery-validate.js. Sedangkan file jquery-validation-bundle.min.js adalah file jquery-validation-bundle.js yang telah diminifying.
{Bundle on Build}
Pada project yang kita buat telah tersedia file bundleconfig.json. Dengan memanfaatkan file ini, kita dapat melakukan proses bundle secara otomatis saat proses build selesai dilakukan. Caranya adalah, klik kanan pada file tersebut kemudian pilih Budler & Minifier > Enable bundle on build.
Selanjutnya akan dilakukan proses installasi package yang diperlukan untuk melakukan bundle secara otomatis ini. Nama file-file hasil bundle dan minify sesuai dengan konfigurasi yang telah dilakukan pada file bundleconfig.json.
Sebagai contoh setelah project dibuild, maka dapat dilihat ada proses tambahan, yaitu bundler, seperti yang dilihat pada gambar di bawah ini.
Hasilnya dapat dilihat pada file-file yang ada di Solution Explorer.
Pada gambar di atas dapat dilihat file site.css memiliki file site.min.css yang merupakan hasil minifying. Begitu juga file site.js memiliki file site.min.js.
{Gulp}
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. Kemudian akan dilakukan proses installasi package yang diperlukan. Maka dapat dilihat terdapat tambahan file baru yaitu gulpfile.js dengan isi sebagai berikut.
"use strict";
var gulp = require(“gulp”),
concat = require(“gulp-concat”),
cssmin = require(“gulp-cssmin”),
htmlmin = require(“gulp-htmlmin”),
uglify = require(“gulp-uglify”),
merge = require(“merge-stream”),
del = require(“del”),
bundleconfig = require(“./bundleconfig.json”);
var regex = {
css: /\.css$/,
html: /\.(html|htm)$/,
js: /\.js$/
};
gulp.task(“min”, [“min:js”, “min:css”, “min:html”]);
gulp.task(“min:js”, function () {
var tasks = getBundles(regex.js).map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: “.” })
.pipe(concat(bundle.outputFileName))
.pipe(uglify())
.pipe(gulp.dest(“.”));
});
return merge(tasks);
});
gulp.task(“min:css”, function () {
var tasks = getBundles(regex.css).map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: “.” })
.pipe(concat(bundle.outputFileName))
.pipe(cssmin())
.pipe(gulp.dest(“.”));
});
return merge(tasks);
});
gulp.task(“min:html”, function () {
var tasks = getBundles(regex.html).map(function (bundle) {
return gulp.src(bundle.inputFiles, { base: “.” })
.pipe(concat(bundle.outputFileName))
.pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
.pipe(gulp.dest(“.”));
});
return merge(tasks);
});
gulp.task(“clean”, function () {
var files = bundleconfig.map(function (bundle) {
return bundle.outputFileName;
});
return del(files);
});
gulp.task(“watch”, function () {
getBundles(regex.js).forEach(function (bundle) {
gulp.watch(bundle.inputFiles, [“min:js”]);
});
getBundles(regex.css).forEach(function (bundle) {
gulp.watch(bundle.inputFiles, [“min:css”]);
});
getBundles(regex.html).forEach(function (bundle) {
gulp.watch(bundle.inputFiles, [“min:html”]);
});
});
function getBundles(regexPattern) {
return bundleconfig.filter(function (bundle) {
return regexPattern.test(bundle.outputFileName);
});
}
Jika ingin memanfaatkan Gulp pada Visual Studio 2017, maka dapat dilakukan dengan menggunakan Task Runner Explorer. Untuk menaktifkan fitur ini dengan cara pilih View > Other Windows > Taks Runner Explorer. Hasilnya dapat dilihat pada area bawah Visual Studio 2017.
ilmu baru bg sy,
om reza kasih tutor buat realtime app dg aspnet donk misal pake aspnet.api..
makasih
realtime app sudah ada di buku ASP.NET SignalR http://www.rezafaisal.net/?p=902