> ## Content Index
> Fetch the complete content index at: https://debug.my.id/llms.txt
> Use this file to discover other available public pages before exploring further.

# Mengatasi masalah wiredep pada Bootstrap
- URL: https://debug.my.id/mengatasi-masalah-wiredep-bootstrap/
- Published: 2016-04-10T12:39:00.000Z
- Updated: 2025-06-24T15:58:54.000Z
- Author: Tukang Debug
- Tags: JavaScript, Tip/trik

Jika anda menggunakan **gulp** atau **grunt** atau sejenisnya, maka Anda mungkin pernah mengalami masalah pada waktu [mem-wiredep](https://debug.my.id/mengatasi-masalah-wiredep-bootstrap/) style dari bootstrap. Tepatnya bootstrap versi di atas 3.3.4.

**Wiredep** adalah suatu tool atau package [**node.js**](https://debug.my.id/apakah-nodejs-dan-cara-install-di-windows-linux-mac/) 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 hanya perlu meng-install 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.

![](https://debug.my.id/content/images/2025/06/image-54.png)

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:

```bash
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 :

```json
"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.

```bash
gulp wiredep
```

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

![](https://debug.my.id/content/images/2025/06/image-55.png)

Sekian tip dan trik kali ini, selamat mencoba dan semoga yang sedikit ini bermanfaat.