onokumus

Matematik Öğretmeni

NODE.js-4-Broccoli

Bir önceki broccoli.js yazımızda broccoli ‘nin tanımı aslında biraz eksiktir.

Brokoli sebzesini düşünün. Kökte birleşen bir sürü dal. Bu dalları gulp.js nin task akışı, kökte birleşen dalları grunt.js nin taskları olarak düşünebiliriz. Broccoli.js de gulp gibi unix I/O streaming mantığında ilerlediği için grunt dan hızlı. Ama sevmediğim yönü build işlemi sonunda hepsini bir klasöre toplaması.

Şimdi örneğimize geçelim

Senaryomuzda meşhur Bootstrap ı projemize ekleyelim. Bunun için bower paket yöneticisini kullanacağız. Sistemimizde bower in global olarak kurulduğunu varsayıyoruz.

Bootstrap ekleme
1
bower install bootstrap

public klasörü içindeki ‘index.html’ yi şöyle güncelleyelim.

public/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ilk sayfam</title>
  <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h1 class="text-primary">ilk sayfama hoş geldiniz</h1>
      </div>
      <!-- /.col-sm-6 -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
<script src=jquery/dist/jquery.min.js></script>
<script src=bootstrap/dist/js/bootstrap.min.js></script>
</body>
</html>

Konsolda broccoli serve deyip tarayıcımızda http://localhost:4200 yi açalım.

Hayaller mavi düzgün bir yazı, gerçekler siyah ve serif li bir yazı. Sebep bootstrap ın yüklenmemesi. Tarayıcımızda F12 tuşuyla baktığımızda görebiliriz. Sebep ise jquery ve bootstrap ın yolu yanlış. Brocfile.js dosyamızı güncelleyelim.

Brocfile.js
1
module.exports = 'bower_components';

Tekrar test edelim. Önce konsolda çalışan broccoli serve komutunu Ctrl+C ile durduralım. Broccoli.js kaynak dosyalarındaki güncellemeleri otomatik algılasa da Brocfile.js deki değişiklikleri algılamıyor.

Konsolda broccoli serve deyip tarayıcımızda http://localhost:4200 yi açalım. Bu safer de index.html yüklenmedi. FTP penceresine benzer şekilde jquery ve bootstrap ın tüm dosyaları (bower ile yüklendiği şekilde) gösteriyor. Burada broccoli nin mantığı ile ilgili bir şey öğrenmiş oluyoruz. Bize node.js nin yerleşik http paketiyle oluşturduğu http sunucusunda bower_components klasörünü kök olarak sunuyor.

Dalları Birleştirmek

Tek dallı brokoli sebzesi olmayacağına göre iki ayrı dal oluşturup bunları birleştirmeliyiz. Bunun için de bir plugin var.

broccoli-merge-trees
1
npm i -D broccoli-merge-trees

Artık iki ayrı dalı tek kökte birleştirebiliriz.

Brocfile.js
1
2
3
var birlestir = require('broccoli-merge-trees');

module.exports = new birlestir(['public', 'bower_components']);

Tekrar test ettiğimizde mavi yazımızı görebiliriz.

Peki ne oldu? broccoli.js public ve bower_components klasörlerini bize http sunucunun kökünde birleştirdi. Bunu ise otomatik oluşan tmp klasörünü inceleyerek görebilirsiniz.

broccoli.js index.html dosyasındaki değişiklileri otomatik algılasa da tarayıcımızı otomatik güncellemiyor.

sağlıcakla…

devam edecek …

Comments