Setup SASS dengan Node.js dan Gulp

Sudah mengenal SASS bukan ? Kalau belum, saya pernah membuat presentasinya di speakerdeck dan bisa dilihat disini. Saya coba cek di codepolitan hanya ada artikel ini tentang sass tapi semoga bisa menjadi intro buat Anda yang belum mengenal. Jika diberika kelonggaran waktu semoga bisa menulis beberapa tulisan lagi tentang hal ini di codepolitan.

Seperti yang kita tahu bahwa untuk menjalankan SASS kita harus memasang Ruby di komputer kita, yang sayangnya tidak semua frontend developer mau melakukannya. Pada tulisan kali ini saya akan coba membahas minimal setup atau paling tidak setup yang sering saya gunakan ketika ingin menggunakan SASS untuk mengerjakan project web development namun menggunakan environment NodeJS yang tentunya lebih familiar dengan frontend developer.

Langsung saja, pertama pastikan NodeJS sudah terpasang dengan baik di komputer Anda, atau kalau belum bisa download disini, silahkan download versi LTS yang terbaru. Bagi Anda yang baru saja memasang NodeJS, Anda bisa mengecek version dengan cara mengetikan perintah node -v && npm -v.

Setelah NodeJS dan npm terpasang dengan baik, saya sarankan Anda bisa memasang Gulp-CLI dan Gulp sebagai global depedency dengan cara mengetikan perintah npm i -g gulp-cli gulp.

untuk lebih lengkapnya, bisa dilihat di official website nya disini.

Untuk setup project tentu yang pertama perlu kita butuhkan adalah package.json yang berisi depedency yang dibutuhkan. Ada beberapa plugin Gulp juga yang akan kita panggil sebagai minimal kebutuhan atau kebutuhan umum sebagian project yang sering saya gunakan, kurang lebih sebagai berikut :

  {
   "name": "project-stup-gulp",
   "version": "0.0.1",
   "license": "MIT",
   "devDependencies": {
    "autoprefixer": "^6.5.1",
    "browser-sync": "^2.18.8",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^3.0.2",
    "gulp-header": "^1.8.8",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.4.0",
    "gulp-watch": "^4.3.11"
  }
}

Setelah membuat package.json, kita bisa melakukan install depedency menggunakan perintah sebagai berikut di dalam root folder project kita npm install. Untuk memastikan npm install tersebut berhasil pastikan bahwa ada folder dengan nama node_modules di dalam root folder project kita.

Setelah itu untuk menjalankan gulp dibutuhkan file Gulpfile.js di dalam root folder yang berisi tugas-tugas yang nantinya akan di eksekusi oleh Gulp pada saat dijalankan. Tugas (task) di dalam Gulpfile.js tergantung dari setup folder yang akan kita buat, tapi saya akan buat kurang lebih seperti ini :

|---dist
|---src
      |---scss
package.json
Gulpfile.js

Langkah berikutnya kita akan coba buat minimal task yang ada pada Gulpfile.js untuk meng-compile file .scss menjadi file .css. Berikut contoh sederhananya :

var gulp = require('gulp');

var autoprefixer = require('gulp-autoprefixer');
var clean = require('gulp-clean');
var sass = require('gulp-sass');

var input = ['./src/**/*.scss'];
var output = './dist';

gulp.task('clean', function() {
    return gulp.src([output], { read: false })
        .pipe(clean({ force: true }));
});

gulp.task('sass', ['clean'], function() {

    return gulp
        .src(input)
        .pipe(sass({outputStyle: 'compact'}))
        .pipe(autoprefixer({browsers: ['last 2 versions', '> 5%', 'Firefox ESR']}))
        .pipe(gulp.dest(output));
});

gulp.task('build:dev', ['clean', 'sass'']);
gulp.task('default', ['build:dev']);

Setelah ini kita bisa menjalankan task ini dengan mengetikan perintah gulp atau gulp build:dev. Namun karena saya lebih senang mengetikkan perintah npm jadi kita bisa menambahkan kedalam package.json kita script untuk running task tersebut seperti :

 "scripts": {
    "dev": "gulp build:dev"
  },

Sehingga kita bisa menjalankannya dengan npm run dev saja. Tutorial ini hanya berisi tentang bagaimana compile .scss file menjadi .css menggunakan gulp, jika Anda butuh seperti auto reload atau browser sync atau beberapa gulp task yang umum digunakan Anda bisa langsung lihat contoh source codenya disini.

Demikian artikel sederhana ini dibuat dan semoga bermanfaat bagi mereka diluar sana yang masih belajar.

Ditulis oleh Irfan Maulana di sela-sela waktu istirahat bekerja. :-)

Salam.