Memulai SASS Dengan Gulp

Seorang Front End Developer tentu sudah tahu apa itu SASS, namun bagi yang belum tau, saya akan menjelaskannya secara singkat. SASS (Syntactically Awesome StyleSheets) merupakan bahasa yang dikembangkan di atas CSS dengan fitur-fitur yang tidak dimiliki CSS seperti variables, nesting, mixins dan lain-lain. SASS sering disebut juga dengan CSS Preprocessor. Sebagai salah satu CSS Preprocessor, dengan SASS penulisan CSS pun lebih mudah, cepat dan terstruktur ketimbang kita menulis CSS dengan cara traditional.

Untuk menjalankan SASS di komputer kita, maka kita membutuhkan Ruby terinstall terlebih dahulu. Untuk informasi lebih lengkap bagaimana menginstall SASS, bisa dibaca di sini. Namun pada artikel pertama dan artikel-artikel saya yang selanjutnya, saya akan menggunakan SASS dengan Gulp.

Gulp

Sebelum memulai installasi, akan saya jelaskan terlebih dahulu apa itu Gulp (untuk informasi lebih lanjut bisa dibaca di sini). Gulp merupakan tool untuk menjalankan task-task secara otomatis berbasis NodeJS atau yang sering disebut Task Runner, salah satunya adalah untuk melakukan compile SASS menjadi CSS. Agar dapat menjalankan SASS, Gulp telah menyediakan sebuah package yang bernama gulp-sass. Karena task runner ini berbasis NodeJS, pastikan bahwa NodeJS dan npm (package manager) telah terinstall di komputer kita.

Installasi Gulp

Pertama, install Gulp secara global (supaya kita bisa menggunakannya pada projek-projek lainnya) dengan perintah npm install -g gulp. Setelah itu masuk ke dalam direktor projek kita dengan perintah cd. Selanjutnya kita akan membuat package.json dengan perintah npm init pada console, lalu masukkan informasi sesuai kebutuhan. Berikut contoh isi dari package.json yang saya buat.

Kemudian masukkan perintah npm install --save-dev gulp untuk menginstall package gulp sebagai devDependeny di dalam package.json. Lalu install package gulp-sass dengan perintah npm install --save-dev gulp-sass. Maka package.json kita akan berubah menjadi seperti berikut ini.

Struktur Project

Sekarang kita akan mengatur struktur direktori projek kita seperti berikut ini. Struktur direktori ini juga akan saya gunakan pada artikel-artikel selanjutnya.

+ src
+ css
+ dist
+ sass
- style.scss
+ node_modules
- package.json
- gulpfile.js

Mengatur Gulpfile.js

Di dalam struktur direktori kita, terdapat file bernama gulpfile.js, disinilah kita akan membuat task-task untuk menjalankan SASS. Masukkan code seperti berikut ini ke dalam gulpfile.js kita.

Pada code di atas terdapat 3 task yaitu styles, watch dan default. Task styles digunakan untuk menjalankan SASS (compile dari SASS menjadi CSS dengan destinasi folder src/css). Task watch digunakan untuk melihat perubahan pada file SASS kita, sedangkan task default akan menjalankan task watch.

Mengcompile SASS

Di dalam folder dist/sass terdapat file style.scss, masukkan code seperti berikut ke dalam file tersebut.

Kemudian jalankan perintah gulp styles pada console, maka akan terlihat console menjalankan task styles.

skyshi@Skyshi-Sulis:/opt/lampp/htdocs/FirstSASS$ gulp styles
[07:43:48] Using gulpfile /opt/lampp/htdocs/FirstSASS/gulpfile.js
[07:43:48] Starting ‘styles’…
[07:43:48] Finished ‘styles’ after 13 ms

Perintah di atas akan mengcompile SASS menjadi CSS dan disimpan di dalam folder src/css dengan nama file style.css. Berikut isi dari file style.css

Untuk mempersingkat waktu, gunakan perintah gulp, karena setiap perubahan SASS akan langsung dicompile menjadi CSS.


Cukup sekian artikel pertama dari saya, semoga bermanfaat dan nantikan artikel selajutnya tentang fitur-fitur utama SASS yang sering dipakai oleh Front End Developer.

“SASS, Makes CSS Fun Again”