Cara Menggunakan gulp.js + scss
Halo sobat web-DPLover di artikel ini akan sedikit menjelaskan bagaimana cara menggunakan dua tools yang sering digunakan dalam pengembangan suatu website khususnya untuk sisi stylesheetnya. Stylesheet dalam dunia website bertujuan untuk meningkatkan UI (User Interface) dan nilai estetika dari suatu website. gulp.js merupakan suatu toolskit yang digunakan untuk mengautomasi dan enhance workflow javascript, dengan kemampuan ini gulp sering digunakan untuk mengcompile stylesheet dalam bentuk Sass kedalam stylesheet bentuk css. Sass adalah suatu teknologi stylesheet terbaru yang mempermudah web-DPLover dalam mengcustomisasi website. Untuk pertama-tama dimulai dengan check version node yand ada di device web-DPLover dengan cara :
pastikan NPM (Node Package Manager) dan node.js sudah terinstal di device sobat web-DPLover. jika belum dapat menginstal di https://nodejs.org/en/, disarankan untuk menginstal yang LTS (Long Term Support). Selanjutnya dilanjutkan dengan menginstal gulp-cli dapat dilihat panduannya di https://gulpjs.com/ atau mengikuti tutorial di dalam artikel ini, jalan kan perintah dibawah ini di terminal sobat web-DPLover :
lalu pastikan sudah terinstal dengan check versionnya, jalan kan :
jika sudah terinstal dengan benar, maka dilanjutkan dengan membuat suatu folder untuk memulai menggunakan sass + gulp.js. untuk membuat file seperti biasa dapat dilakukan melalui terminal seperti :
lalu dilanjutkan membuat dua file dengan, _nama_.html, _nama_.scss dan gulpfile.js, _nama_.scss yang diartikel ini diberi nama custom.scss akan menjadi file tempat sobat web-DPLover untuk memulai menulis code untuk Stylesheet dari _nama_.html pada artikel ini disebut custom.html sobat web-DPLover, dan satu lagi file bernama gulpfile.js, file ini yang akan menjadi landasan command-command untuk compile scss menjadi css yang akan di baca oleh custom.html.
selanjutnya melakukan inisiasi untuk memulai instal package yang di butuhkan dalam compile scss menjadi css pada gulp file. tinggal menjalankan “npm init” pada terminal, dan pastikan terminal sobat web-DPLover tepat pada folder file ini. setelah inisiasi maka secara otomatis akan men-generate folder package.json.
jika sudah dilanjutkan dengan menginstal beberapa depedencies package yang di butuhkan dalam project ini. dalam artikel ini menggunakan beberapa depedencies yaitu : gulp, gulp-autoprefixer, gulp-clean-css, gulp-concat, gulp-sass, gulp-sourcemaps. dan melakukan instalasi package dengan cara :
sehingga pada file package.json muncul depedencies sebagia berikut :
lalu tambahkan source code ini pada gulpfile.js :
lalu mulai sedikit code di custom.scss yang di persiapkan untuk custom.html sobat web-DPLover, contoh sebagai berikut :
lalu dengan menjalankan :
gulp ; gulp watch pada terminal secara otomatis mengenerate file custom.css yang akan di kaitkan dengan custom.html.
lalu custom.css bisa di kaitkan pada custom.html dengan cara :
<link rel="stylesheet" href="./custom.css">sekian penjelasan mengenai gulp + sass pada artikel ini, semoga dapat membantu sobat web-DPLover dalam mengembangkan ilmu “perwebsitetannya”. Thanks!
