onokumus

Matematik Öğretmeni

NODE.js - 2 - Modül Yazma

Giriş

Bu yazımızda less kullanarak less dosyalarımızı otomatik derleyen bir modül yazacağız.

Poje Oluşturalım

Öncelikle /home/ono dizininde proje2 klasörü oluşturalım.

proje oluşturma
1
2
mkdir proje2
cd proje2

Artık proje2 klasörürümüz oluştu ve içindeyiz. Bu kalsörün içinde manuel olarak package.json dosyası oluşturabiliriz. Fakat aşağıdaki komutla otomatik oluşmasını da sağlayabiliriz.

npm init
1
npm init

Bize bazı sorular soracaktır. İsterseniz kendi cevaplarınızı yazabilirsiniz. Her cevaptan sonra enter tuşuna basarsanız sonraki soruya geçecektir. Hepsini enter la geçebilirsiniz. package.json dosyasının son hali şuna benzer olacaktır.

package.json
1
2
3
4
5
6
7
8
9
10
11
{
  "name": "proje2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "onokumus <onokumus[at]gmail.com> (http://onokumus.com/)",
  "license": "MIT"
}

Less Modülü Yükleme

Projemizde less dosyalarını otomatik derleme işlemi yapacağımız için less modülünü yüklememiz gerekiyor. Bunun için konsolda

less yükleme
1
npm i -S less

komutunu veriyoruz. Bu komutun uzun şekli npm install --save less şeklindedir. Böylelikle package.json dosyamızda modülümüzün less modülünü kullanacağını belirttik.

Script Yazma

proje2 klasöründe index.js dosyası oluşturalım. İçeriği de şöyle olsun.

proje2/index.js
1
2
3
var less = require('less') // less modülünü çağır

console.log(less.data.colors.aliceblue); // aliceblue renginin hex kodunu verir

Konsol çıktısı aşağıdaki şekilde ise hata yoktur.

konsol
1
#f0f8ff

Kodumuzu değiştirelim ve less in gerçekten derleme yaptığını görelim. index.js nin son hali şöyle.

proje2/index.js
1
2
3
4
5
6
7
8
9
10
11
var less = require('less') // less modülünü çağır

//console.log(less.data.colors.aliceblue); // aliceblue renginin hex kodunu verir

less.render('@renk: #069; a {color: @renk;}', function(hata, sonuc){
  if(hata) {
    console.log(hata);
  } else {
    console.log(sonuc.css);
  }
});

Konsol çıktısı şöyle ise hata yoktur.

konsol
1
2
3
a {
  color: #006699;
}

Fakat biz harici bir less dosyasının derlenmesini istiyoruz.

Less Dosyası Oluşturma

proje2 klasörü içinde less klasörü, less klasörü içinde de style.less dosyası oluşturalım. İçeriği de şöyle olsun.

proje2/less/style.less
1
2
3
4
5
6
7
8
9
10
@renk: #069;

a {
  color: @renk;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

Şimdi ise style.less dosyasının içeriğini okutup less.render fonksiyonuna göndermeliyiz. Bunun için fs modülünü kullanacağız. index.js dosyasının son hali şöyle.

proje2/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var less = require('less') // less modülünü çağır
var fs = require('fs'); // file system modülünü çağır

var lessFile = fs.readFileSync('./less/style.less', 'utf8');

//console.log(less.data.colors.aliceblue); // aliceblue renginin hex kodunu verir

// less.render('@renk: #069; a {color: @renk;}', function(hata, sonuc){
//   if(hata) {
//     console.log(hata);
//   } else {
//     console.log(sonuc.css);
//   }
// });

less.render(lessFile, function(hata, sonuc){
  if(hata) {
    console.log(hata);
  } else {
    console.log(sonuc.css);
  }
});

Konsol çıktısı şöyle ise hata yoktur.

konsol
1
2
3
4
5
6
7
a {
  color: #006699;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

Son olarak konsoldaki çıktıyı style.css içine yazdırmamız gerekiyor. Hatta css klasörü içine yazdıralım. index.js dosyamızın son hali şöyle.

proje2/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var less = require('less') // less modülünü çağır
var fs = require('fs'); // file system modülünü çağır

var lessFile = fs.readFileSync('./less/style.less', 'utf8');

//console.log(less.data.colors.aliceblue); // aliceblue renginin hex kodunu verir

// less.render('@renk: #069; a {color: @renk;}', function(hata, sonuc){
//   if(hata) {
//     console.log(hata);
//   } else {
//     console.log(sonuc.css);
//   }
// });

// less.render(lessFile, function(hata, sonuc){
//   if(hata) {
//     console.log(hata);
//   } else {
//     console.log(sonuc.css);
//   }
// });

less.render(lessFile, function (hata, sonuc) {
  if (hata) {
    console.log(hata.line + '. Satırda "' + hata.message + '" Hatası var');
  } else {
    fs.exists(__dirname + '/css', function (varmi) {
      if (varmi !== true) {
        fs.mkdir(__dirname + '/css');
      }
      fs.writeFile(__dirname + '/css/style.css', sonuc.css, function (err) {
        if (err) {
          console.log('Bir Hata Oluştu :' + err);
        } else {
          console.log('işlem başarılı');
        }
      });
    });
  }
});

Kontrol amacıyla konsolda node index komutunu verelim ve css klasörü içinde style.css dosyamızın oluştuğunu görelim. Bu script proje2 dizininde css klasörü yoksa otomatik oluşturmakta ve içine style.css dosyasını yazmakta.

Sonuç

Son olarak package.json dosyamızı aşağıdaki gibi düzenleyelim ki node index komutu yerine npm start komutu aynı işi yapsın.

package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "proje2",
  "version": "1.0.0",
  "description": "Less dosyalarını otomatik derleme scripti",
  "main": "index.js",
  "scripts": {
    "start": "node index"
  },
  "author": "onokumus <onokumus@gmail.com> (http://onokumus.com/)",
  "license": "MIT",
  "dependencies": {
    "less": "^2.1.1"
  }
}

Kodlar

Dersimizdeki örnek kodları https://github.com/onokumus/node-ders adresinden inceleyebilirsiniz.

Comments