Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:yeoman:yeoman_kezdes

< Yeoman

Yeoman kezdés

  • Szerző: Sallai András
  • Copyright © Sallai András, 2015, 2016, 2017
  • Licenc: GNU Free Documentation License 1.3

Bevezetés

A Yeoman egy segédeszköz, amely megkönnyíti a fejlesztési munkánkat.

Az npm csomagkezelőben a Yeoman csomagjának neve röviden:

  • yo

A Yeoman mellett a következő csomagokat szokás még használni:

  • bower
  • gulp
  • live-server
  • grunt

Lehetővé teszi projektek automatikus generálását, szükséges eszközök letöltését.

Szükséges

  • NodeJS
  • npm
  • git

Telepítés deb alapú Linuxon:

curl -sL https://deb.nodesource.com/setup_11.x | bash -
apt install nodejs

Ellenőrizd, hogy telepítve vannak-e:

node --version && npm --version
git --version

Ha szükséges az npm csomagkezelő frissítése, akkor futtasd a következő parancsot:

npm install --global npm@latest

A Yeoman eszközök telepítése

Az npm egy csomagkezelő, amellyel telepíthetjük a Yeoman eszközöket. Telepítés:

npm install --global yo bower grunt-cli

Ellenőrizzük a telepítést:

yo --version && bower --version && grunt --version

Webalkalmazás készítése

Telepítsünk egy generátort:

# npm install --global generator-webapp

Ezek után készítsünk egy projektet:

$ mkdir proj01
$ cd proj01
$ yo webapp

A kiadás elkészítését megkönnyíti a gulp. Telepítsük:

# npm install --global gulp

Lépjünk be a projekt könyvtárába:

$ gulp build

Létrejön egy dist nevű könyvtár.

Telepítsünk egy webszervert:

# npm install --global live-server

Lépjünk be a dist könyvtárba, majd indítsuk el a webszervert:

$ cd dist
$ live-server

Elindul a webszerver a 127.0.0.1:8080 címen. Az alapértelmezett böngészőben automatikusan megnyílik a weblap.

Webalkalmazás készítése 2

Telepítsünk egy generátort:

# npm install --global generator-webapp

Ezek után készítsünk egy projektet:

$ mkdir proj01
$ cd proj01
$ yo webapp

A kiadás elkészítése csak gulp használatával:

A projekt könyvtárában adjuk ki a következő parancsot:

$ bower install

Ezek után a fejlesztés elkezdhető a következő paranccsal:

$ gulp

A fejlesztés figyelemmel kísérése egy böngézsőben:

$ gulp serve

A kiadás megtekntése:

$ gulp serve:dist

yo futtatása

yo
? ==========================================================================
? ==========================================================================
? ==========================================================================
We're constantly looking for ways to make yo better! 
May we anonymously report usage statistics to improve the tool over time? 
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== No
Native thread-sleep not available.
This will result in much slower performance.
You should re-install spawn-sync if possible.
Check /usr/local/lib/node_modules/yo/node_modules/cross-spawn/node_modules/spawn-sync/error.log for more details
? 'Allo Sallai! What would you like to do? (Use arrow keys)
  Run a generator
  ──────────────
❯ Install a generator 
  Find some help 
  Get me out of here! 
  ──────────────

Források

oktatas/web/yeoman/yeoman_kezdes.txt · Utolsó módosítás: 2019/08/22 20:50 szerkesztette: admin