drupal sminkelés korszerű eszközökkel
DESCRIPTION
Dolgozzunk a front end fejlesztői feleadatokon még hatékonyabban, kényelmesebben, s ezáltal még több örömmel! A Drupal Hétvége 2013 konferencián egy modult és három olyan fejelsztői eszközt mutattam be, amik ebben segítenek.TRANSCRIPT
Drupal sminkelés korszer eszközökkelűavagy
mit tanultam az Aurora alapsminkből?
Drupal sminkelés korszer eszközökkelűavagy
mit tanultam tanulok az Aurora alapsminkből?
Drupal sminkelés korszer eszközökkelűavagy
mit tanultam tanulok az Aurora alapsminkből?
“Aurora is an HTML5, Sass and Compass
powered minimalist base theme. It is optimized
for both responsive and mobile first web design.
Built to encourage best modern front end
practices…”
Forrás: http://snugug.github.io/Aurora/
Aurora eszközök*
● Bundler● Bower● Magic● Grunt
* Amikről ma szót ejtünk…
● Bundler● Bower● Magic● Grunt
A kép forrása: http://bundler.io
Bundler: ruby gem menedzsment
A szükséges gemek
● rendelkezésre állnak,
● megfelelő a verziójuk.
Telepítése:
$ gem install bundler
Gemfile
source 'https://rubygems.org'
gem 'compass-aurora', '~>3.0.0'
gem 'toolkit', '~>1.0.0'
gem 'singularitygs', '~>1.0.7'
…
Bundler használat$ cd az_en_sminkem
$ bundle install
$ git add Gemfile Gemfile.lock
$ git commit -m "…"
$ bundle exec compass watch
Gemfile.lockGEM remote: https://rubygems.org/ specs: addressable (2.3.5) breakpoint (2.0.7) compass (>= 0.12.1) sass (>= 3.2.0) chunky_png (1.2.9) Color-schemer (0.2.7) compass (~> 0.12)
…
PLATFORMS ruby
DEPENDENCIES breakpoint (~> 2.0.2) compass-aurora (~> 3.0.0) compass-normalize (~> 1.4.3)
…
$ bundle show Gems included by the bundle: * addressable (2.3.5) …
További infó: http://bundler.io
$ bundle show singularitygs /ahova/telepult/singularitygs-1.0.8
● Bundler● Bower● Magic● Grunt
A kép forrása: http://bower.io
Bower: webes csomagkezelő
Bower != Bundler
A szükséges eszközök
● rendelkezésre állnak,
● megfelelő a verziójuk.
Telepítése:
$ npm install -g bower
Bower használat
$ cd az_en_sminkem
($ compass install aurora/bower)
$ bower install
($ git …)
További infó: http://bower.io
● Függőségek beállítása: bower.json● Konfigurálás: .bowerrc
● Bundler● Bower● Magic● Grunt
A kép forrása: http://2shi.deviantart.com/art/Top-Hat-Icon-83041677
„Keep Frontend DRY; sprinkle it with…”
Forrás: https://drupal.org/project/magic
Magic modul
● Sminkenként beállítható:
– Jobb CSS aggregálás
– Választott CSS és JS fájlok letiltása
– Drupal 8 JS kezelés backportja
– JS a footer-ben
– Viewport szélesség és <html class=”…”> kijelzése
● A smink beállítások exportálhatóak
● Bármilyen sminkkel használható
További infó: https://drupal.org/project/magic
● Bundler● Bower● Magic● Grunt
A kép forrása: http://gruntjs.com
Grunt: JS alapú feladat-automatizáló
$ cd az_en_sminkem
($ compass install aurora/grunt)
$ npm install
($ git …)
$ grunt
($ grunt [watch / build])További infó: http://gruntjs.com/
● Függőségek beállítása: package.json● Konfigurálás: Gruntfile.js
Telepítése: $ npm install -g grunt-cli
Grunt az Aurorában$ grunt watch
$ grunt build
● Sass fordítás (bundle exec)● JSHint
● LiveReload
● Sass fordítás, CSS minimalizálás (bundle exec)● Kép optimalizálása (OptiPNG, jpegtran)
● Kép hivatkozások átirányítása (image-url)● JSHint
Kérdés??
Köszönöm a figyelmet!
Hajas TamásDrupal tanácsadó
http://about.me/tamashajas