Ask Mengatasi masalah wiredep pada Bootstrap AdityaDees

Jika anda menggunakan gulp atau grunt atau sejenisnya, maka mungkin anda pernah mengalami masalah pada waktu mem-wiredep style dari bootstrap. Tepatnya bootstrap versi di atas 3.3.4.

Wiredep adalah suatu tool atau package node.js yang memungkinkan developer untuk memasangkan/menghubungkan komponen bower ke dalam HTML secara otomatis berdasarkan urutan dependensinya.

Penjelasannya adalah sebagai berikut. Jika anda mengembangkan sebuah web app, maka pada saat anda menambahkan misalkan javascript atau css tertentu, misalkan bootstrap.js, bootstrap.css, jquery.js dan sejenisnya, maka setelah mendownload library-library tersebut, selanjutnya anda perlu menambahkannya ke dalam HTML sesuai dengan urutannya. Nah, yang anda atau kita lakukan tersebut di atas sebenarnya dapat dilakukan secara otomatis. Yaitu dengan menggunakan wiredep yang digabung dengan gulp atau grunt atau tasker yang lainnya.

Dengan menggunakan wiredep , maka kita yang perlu menginstall package dengan menggunakan bower, dan secara otomatis package-packager tersebut akan ditambahkan ke dalam HTML sesuai dengan urutan.

Nah, wiredep ini ternyata bermasalah jika anda menambahkan package Bootstrap. Dikarenakan wiredep hanya secara otomatis hanya menambahkan bootstrap.js saja, sedangkan bootstrap.css tidak ditambahkan. Untuk lebih jelas, silahkan perhatikan screenshot di bawah ini.

Lalu bagaimana solusinya ?

1. Tambahkan manual

Cara paling mudah adalah dengan menambahkan secara manual bootstrap.css ditempatnya. Hal ini memang mudah tetapi tidak menyelesaikan masalah. Karena jika anda menambahkan paket/library baru, maka wiredep akan mengenerate ulang sehingga perubahan anda akan hilang.

2. Menggunakan Bootstrap versi 3.3.4

Cara lainnya adalah dengan downgrade bootstrap ke versi 3.3.4. Pada Bootstrap versi ini dilaporkan tidak mengalami masalah wiredep. Anda dapat menginstall/downgrade bootstrap 3.3.4 dengan perintah berikut:

bower install --save bootstrap#3.3.4

3. Override bower.json

Solusi lain adalah dengan mengoverride file bower.json. Secara singkat, dengan override ini, kita dapat mengatur ulang apa yang harus dilakukan boleh bower/wiredeb terhadap suatu library. 

Silahkan buka file bower.json anda, kemudian tambahkan override di bawah dependencies. Seperti contoh di bawah ini :

"dependencies": {
    "mediaelement": "^2.23.1",
    "jquery": "^3.1.1",
    "bootstrap": "^3.3.7"
}, 
"overrides": {
    "bootstrap": {
        "main": ["dist/js/bootstrap.js",
            "dist/css/bootstrap.css"
        ]
    }
},
"devDependencies": {
    "chai": "^3.5.0",
    "mocha": "^3.1.0"
}

Dengan override di atas, kita "memaksa" bower/wiredep agar menambahkan bootstrap.js dan bootstrap.css di tempat yang sesuai.

Kemudian lakukan wiredep secara manual dengan perintah.

gulp wiredep

Dan di bawah ini adalah hasil dari wiredep setelah ditambahkan override. Silahkan bandingkan dengan screenshot di atas sebelum dilakukan override.

Sekian dan selamat mencoba.