Wrzesień | 2012 | mGz developer blog

Ostatnio staje si�? bardziej popularny LESS. By go zintegrowa�? z Symfony2 za pomoc�? Assetic’a i zachowa�? pr�?dko??�? ??adowania strony bez przeskoku spowodowanego kompilacj�? LESS’a przez JavaScript less.js.

Dzi�?ki temu pliki less b�?d�? skompilowane do normalnego css. Dodatkowo mo??na je wrzuci�? bezpo??rednio na serwer do static contentu np. Amazon S3.

Schemat dzia??ania Less Node.js i Assetica

Instalacja Less

Instalacja Node.js

 sudo apt-get update
 sudo apt-get install git-core curl build-essential openssl libssl-dev
 git clone https://github.com/joyent/node.git
 cd node
 chmod +x ./configure
 ./configure
 make
 sudo make install
 node -v

Instalacja NPM

wget http://npmjs.org/install.sh --no-check-certificate
sudo ./install.sh

Instalacja Less
```
sudo npm install less  --global
```
Parametr global jest niezwykle istotny, gdy?? nie b�?dziesz m??g?? potem uzyska�? dost�?pu do lessa
Dodanie PATH Less’a do ~/.bashrc
Edytuj plik: ~/.bashrc
```
gedit ~/.bashrc
```
Dodaj now�? lini�? na ko??cu pliku:
```
 PATH=$PATH:$HOME/node_modules/less/bin
```
Teraz trzeba prze??adowa�? profil Basha
```
 source ~/.bashrc
```

Testujemy Less!

 lessc wejscie_less.less > wyjscie_css.css

Integracja z Symfony2 i Assetic

Konfiguracja Assetic
Edytujemy config.yml i dodajemy 3 lini�? zwi�?zane z lessem tak jak to wida�? na przyk??adzie poni??ej:

# app/config/config.yml
assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~
        less:
            node: /usr/local/bin/node
            node_paths: [/usr/local/lib/node]
        yui_css:
            jar: %kernel.root_dir%/../java/yuicompressor-2.4.6.jar
        yui_js:
            jar: %kernel.root_dir%/../java/yuicompressor-2.4.6.jar

Edytujemy nasz g????wny plik layoutu(base.html.twig)
Dodaj�?c warto??�? less, do argumentu filter:

#base.html.twig
...
<head>
{% stylesheets filter='less,?yui_css' '@AcmeBundle/Resources/less/main.less' %}
    <link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}
</head>
...

Budujemy assety za pomoc�? Assetic’a

php app/console assetic:dump --env=prod

Cieszymy si�? ??migaj�?cym arkuszem styli kompilowanym z less’a!

mGz developer blog

aka. emGiezet

Miesięczne archiwum: Wrzesień 2012

[Ubuntu] Instalacja LESS oraz Integracja z Symfony2 Assetic

Symfony2 – Dodawanie Klasy CSS do pola formularza zawieraj�?cego b??�?d

Case

#Rozwi�?zanie: 1 (Ugly)

Silex – Class ‚Twig_Environment’ not found