Archiwa tagu: yaml

symfony_black_02

[Ubuntu] Instalacja LESS oraz Integracja z Symfony2 Assetic

1 odpowiedź
Twitt

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

Schemat dzia??ania Less Node.js i Assetica

  1. Instalacja Less

    1. 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
    2. Instalacja NPM 
      wget http://npmjs.org/install.sh --no-check-certificate
sudo ./install.sh
    3. Instalacja Less 
      sudo npm install less  --global

      Parametr global jest niezwykle istotny, gdy?? nie bÄ?dziesz m??g?? potem uzyskaÄ? dostÄ?pu do lessa

    4. 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
    5. Teraz trzeba prze??adowaÄ? profil Basha 
       source ~/.bashrc
    6. Testujemy Less! 
       lessc wejscie_less.less > wyjscie_css.css
  2. Integracja z Symfony2 i Assetic
    1. 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
    2. 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>
...
    3. Budujemy assety za pomocÄ? Assetic’a 
      php app/console assetic:dump --env=prod
    4. Cieszymy siÄ? ??migajÄ?cym arkuszem styli kompilowanym z less’a!
Twitt