Konversi SASS ke CSS menggunakan GruntJS

Dipostingan sebelumnya kita udan nyiapin environment development buat gruntjs. Trs udah nyoba2in juga gimana caranya ngebuat dan ngerunning task. So dipostingan ini kita akan mencoba mengkompile atw mengkonvert sass ke css menggunakan gruntjs.

Pertama-tama, mari kita buat kode sass yang sangat sederhana saja seperti terlihat pada gambar dibawah :

Jadi intinya kita ngebuat folder baru 'sass'. Terus didalem sass ini ada file adimixins.scss yang isinya bisa dilihat diatas. Terus mixins tersebut diload di styles.scss....
Siiipssss.... Berikutnya kita install dl package dari npm yaitu node-sass dan grunt-sass buat ngekonvert file sass tersebut diatas ke csss. Cara installnya bisa dilihat dicommand prompt screen dibawah :

Jadi sekarang kita udah punya grunt-sass dan node-sass di packge.json kita seperti terlihat dibawah :

Okie berikutnya kita load grunt-sass di Gruntfile.js. Untuk ngeload kita bisa liad contohnya di  grunt-sass pagenya. Dari page tersebut kita masukin kode dibawah :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

module.exports = function(grunt) { const sass = require('node-sass'); // Configuration grunt.initConfig({ // pass in options to plugins // refenrece to files etc sass: { options: { implementation: sass }, dist: { files: [{ src: 'sass/styles.scss', dest: 'css/main.css' }] } } }); // Load plugins grunt.loadNpmTasks('grunt-sass'); // Register tasks grunt.registerTask('convert-sass', 'sass'); grunt.registerTask('run', function() { console.log('running task from grunt'); }); grunt.registerTask('testajjah', function() { console.log('running test task from grunt'); }); grunt.registerTask('allTasks', ['run', 'testajjah']) }

Kode diatas intinya ngebuat konfigurasi sassnya. Jadi styles.scss (di sass/styles.css) yang bakalan dikonvert ke css yang lokasinya di css/main.css. Trs di line 22, kita ngeload grunt-sassnya dan diline 26 kita ngebuat grunt task yang baru. So klu kita run 'grunt convert-sass', hasilnya adalah :

Siipss... sekian untuk proses konversinya... semoga bermanfaat... :-)

Nyiampin Development Environment Buat GruntJS

Okie sebelum membuat development environment GruntJs, pertama-tama kita udah harus punya nodejs dl. Soalnya GruntJS itu pake NPM. Daan untuk postingan ini dipakai nodejs dan npm version seperti terlihat dibawah :

Siips... setelah iut kita install grunt cli secara global. Caranya tinggal execute command "npm install grunt-cli -g"

Terus berikutnya kita ngebuat package.json dari npm init (yang default2 dl ajjah buat npm initnya)

Klu udah... berikutnya kita install grunt secara local. Jadi tinggal eksekusi " npm i grunt --save-dev"

Hasilnya seperti ini :

Jadi versi terbaru grunt saat ini adalah 1.0.3...

Siips... berikutnya kita buat Gruntfile.js dan isikan kode seperti ini

Seperti terlihat pada Gruntfile.js diatas, jadi pada dasarnya kita punya 3 biji komponent utama di grunt, yaitu configuration, load plugins dan register task. Ketiga kompoennt tersebut akan dibahas lebih jauh dipostingan berikutnya. Daan saat ini kita bisa ngetest Grunt Task kita dengan perintah
"grunt <nama task". Contohnya :

So, kita ngejalanin task "testajjah" dan didalam task tersebut ada console yang bakalan ngeprint "running test task from grunt" seperti terlihat pada kode dan command prompt screen diatas. yeeeii...

Berikutnya kita bikin 1 biji task di grunt buat ngerunning 2 biji task yang udah kita bikin diatas. Kodenya seperti ini :

 Hasilnya :

Siipss... sampai disini... semoga bisa membantu ehehe... :-)