Integrasi twitter bootstrap dan laravel menggunakan bower


Pada kesempatan kali ini saya akan memberikan tutorial tentang bagaimana cara mengintegrasikan Twitter Bootstrap dan Laravel menggunakan Bower. Oiya, pada kesempatan kali ini saya menggunakan environment development menggunakan Laravel Homestead pada Windows. Ok langsung saja kita mulai

Tools yang digunakan :

  1. Git For Windows (download)
  2. NPM for windows (download)

Langkah-Langkah:

1.Buka aplikasi gitbash

Open Gitbash

2. Install Bower dengan mengetikkan perintah “npm install -g bower”

3.Masuk ke directory root aplikasi

get-in-to-root-directory

4. Buat file “.bowerrc” pada root directory aplikasi, dan ketik :

 

 {
    "directory": "resource/assets/vendor"
 }

5 . Masih di root directory aplikasi, buat file “bower.json”, dan isikan

{
    "name": "AppName",
    "dependencies": {
      "bootstrap": "~3.3.5",
      "jquery": "~2.1.4"
    }
}

Langkah ini digunakan untuk men-download Twitter Bootstrap dan jQuery.

6. Jalankan perintah “bower update” untuk download Twitter Bootsrap dan jquery tadi.

bower-update

7. Buka file “resources/assets/sass/app.scss” dan uncomment baris pertama, sehingga menjadi :

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

8. Selanjutnya buka file “gulpfile.js” dan tambahkan pada fungsi elixir, berikut ini:


elixir(function(mix) {
var bpath = 'node_modules/bootstrap-sass/assets';
var jqueryPath = 'resource/assets/vendor/jquery';
mix.sass('app.scss')
.copy(jqueryPath + '/dist/jquery.min.js', 'public/js')
.copy(bpath + '/fonts', 'public/fonts')
.copy(bpath + '/javascripts/bootstrap.min.js', 'public/js');
});

9. Terakhir, copy file Twitter Bootsrap dan jQuery tadi ke folder “public” aplikasi, dengan menggunakan perintah “gulp” .

Yap, itu saja langkah-langkah melakukan integrasi Twitter Bootsrap (plus jQuery) menggunakan Bower.

Silahkan berikan komentar kalau ada pertanyaan dan barangkali ada kesalahan saya dalam penulisan tutorial ini 🙂

 

 

Iklan

Tulis komentar

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s