Less, Css kodları yazmak için bize hızlı bir çözüm sunuyor. Fakat PhpStormda otomatik olarak derleme seçeneğini yoktur. FileWatcher eklentisini kullanarak bu derleme işlemini arka planda yapabiliriz. Bu işlem için PhpStorm da FileWatcher eklentisinin kurulu olduğundan emin olun.

    İşletim sisteminize uygun olan node.js sürümünü indirip kuruyoruz. http://nodejs.org/download/

    Mac OSX

    Node.js kurulumu tamamlandıktan sonra terminali açarak aşağıdaki komutları sırasıyla girelim:

    • which npm
      • /usr/local/bin/npm
    • sudo npm install less -g
      • npm http GET https://registry.npmjs.org/less
        npm http 304 https://registry.npmjs.org/less
        npm http GET https://registry.npmjs.org/mkdirp
        npm http GET https://registry.npmjs.org/mime
        npm http GET https://registry.npmjs.org/request
        npm http GET https://registry.npmjs.org/clean-css
        npm http GET https://registry.npmjs.org/source-map
        npm http 200 https://registry.npmjs.org/mime
        …………
    • which lessc
      • /usr/local/bin/lessc

    Komutların ekran çıktılarını altına yazdım, kendinize göre test edersiniz. Terminal komutlarını halletikten sonra PhpStorm da Filewatcher ile ayarlama başlayabiliriz. Ayarlardan File Watchers sekmesine gelerek yeni bir LESS izleyicisi oluşturalım.

    Ayarlarını aşağıdaki gibi yapalım:

    Tüm bu işlemler tamamlandıktan sonra artık PhpStorm LESS dosyalarında değişiklik fark ettiğinde otomatik olarak CSS dosyasına dönüştürecektir. Less ile Css dosyaları aynı klasöre yerleştirilir.

    1992 Hatay/Dörtyol doğumluyum. Akdeniz Üniversitesi Akseki MYO'da Bilgisayar Programcılığını bitirdim. Freelancer olarak web tasarım işleri yapmaktayım. Boş zamanlarımda ise okuğum kitaplardan aklımda kalanları ve tecrübelerimi burada paylaşmaktayım.

    Yanıtlayın