Dimensi TutupBotol: sass

Monday, November 26, 2018

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 :

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 :