symfony_black_02

[Ubuntu] Instalacja LESS oraz Integracja z Symfony2 Assetic

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!

Jedna myśl nt. „[Ubuntu] Instalacja LESS oraz Integracja z Symfony2 Assetic

  1. Ecotropicana

    Szuka??am tej informacji na angloj?zycznych blogach a si? okaza??o, ??e kto?? to opisa?? po polsku. Przy konfiguracji pom??g?? mi tez README bundla MopaBootstrapBundle

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>