Yeoman – generator kodu źródłowego i szkieletu aplikacji

Przystępując do pracy nad kolejną aplikacją internetową wiele z czynności takich jak przygotowanie szkieletu aplikacji, struktury katalogów, instalacji modułów czy utworzenie repozytorium GIT realizuje się analogicznie za każdym razem. Jeśli są to czynności powtarzalne, może warto w tym przypadku być trochę leniwym i skorzystać z narzędzia Yeoman ? Yeoman to przede wszystkim generator kodu źródłowego i szkieletu aplikacji, za pomocą którego w szybki sposób możemy zestawić każdorazowo środowisko do budowy kolejnej aplikacji internetowej. Co więcej liczba generatorów do Yeoman jest duża, więc jeśli do następnego projektu brakuje nam odpowiedniego generatora są duże szanse, że ktoś podobnego typu generator już utworzył. Jeśli nie, zawsze można zbudować własny generator kodu źródłowego. Korzystanie z narzędzia Yeoman jest stosunkowo proste, co przedstawiłem poniżej generując szkielet aplikacji internetowej Hello world wykorzystującej framework Angular 2.

Uruchomienie Yeoman i wybór generatora:

seba$ yo
? 'Allo Sebastian! What would you like to do? (Use arrow keys)
Run a generator
❯ Fountain Webapp
Webapp
Angular
──────────────
Update your generators
Install a generator
(Move up and down to reveal more choices)

Wybór framework’a:

? 'Allo Sebastian! What would you like to do? Fountain Webapp

Make sure you are in the directory you want to scaffold into.
This generator can also be run with: yo fountain-webapp

_-----_
| | ╭──────────────────────────╮
|--(o)--| │ Welcome to Yeoman, │
`---------´ │ ladies and gentlemen! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `

Out of the box I include by default Gulp 4, ESLint, Browsersync and Karma.

? Which JavaScript framework do you want?
React
❯ Angular 2
Angular 1
- Vue 2 (Wished. Contributors welcome.)
- Ember 2 (Wished. Contributors welcome.)
- Backbone (Wished. Contributors welcome.)

Wybór narzędzia do zarządzania modułami:

...

? Which JavaScript framework do you want? Angular 2
? Which module management do you want? (Use arrow keys)
❯ Webpack with NPM 
  SystemJS with JSPM 
  - Browserify (Wished. Contributors welcome.)

Wybór preprocesora JS:

...

? Which JavaScript framework do you want? Angular 2
? Which module management do you want? Webpack with NPM
? Which JS preprocessor do you want? (Use arrow keys)
❯ ES2015 today with Babel 
  Pure old JavaScript 
  TypeScript 

Wybór preprocesora CSS:

...

? Which JavaScript framework do you want? Angular 2
? Which module management do you want? Webpack with NPM
? Which JS preprocessor do you want? ES2015 today with Babel
? Which CSS preprocessor do you want? (Use arrow keys)
❯ SASS 
  Stylus 
  Less 
  CSS 
  - CSSNext (Wished. Contributors welcome.)

Wybór platformy Continuous Integration:

...

? Which JavaScript framework do you want? Angular 2
? Which module management do you want? Webpack with NPM
? Which JS preprocessor do you want? ES2015 today with Babel
? Which CSS preprocessor do you want? SASS
? Which Continuous Integration platform do you want? (Press space to select, a to toggle all, i to inverse selection)
❯◯ Travis
 ◯ CircleCi
 ◯ Jenkins (with Dockerfile)
 ◯ Wercker

Wybór bazowego kodu źródłowego:

...

? Which JavaScript framework do you want? Angular 2
? Which module management do you want? Webpack with NPM
? Which JS preprocessor do you want? ES2015 today with Babel
? Which CSS preprocessor do you want? SASS
? Which Continuous Integration platform do you want? (Press space to select, a to toggle all, i to inverse selection)
? Do you want a sample app? 
  A working landing page 
❯ Just a Hello World 
  Ngrx/store TodoMVC 

Wybór routera:

...

? Which JavaScript framework do you want? Angular 2
? Which module management do you want? Webpack with NPM
? Which JS preprocessor do you want? ES2015 today with Babel
? Which CSS preprocessor do you want? SASS
? Which Continuous Integration platform do you want? (Press space to select, a to toggle all, i to inverse selection)
? Do you want a sample app? Just a Hello World
? Would you like a router? (Use arrow keys)
❯ @angular/router 
  Angular UI Router 
  None 

...

Initialized empty Git repository in /Users/seba/Projects/js/angularjs/ip/.git/

     _-----_     ╭───────────────────────╮
    |       |    │      Bye from us!     │
    |--(o)--|    │       Chat soon.      │
   `---------´   │      Yeoman team      │
    ( _´U`_ )    │    http://yeoman.io   │
    /___A___\   /╰───────────────────────╯
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

Uruchomienia serwera webowego na komputerze:

seba$ npm run serve

> @ serve /Users/seba/Projects/js/angularjs/ip
> gulp serve

[17:20:49] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/browsersync.js
[17:20:49] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/karma.js
[17:20:49] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/misc.js
[17:20:49] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/webpack.js
[17:20:50] Using gulpfile ~/Projects/js/angularjs/ip/gulpfile.js
[17:20:50] Starting 'serve'...
[17:20:50] Starting 'webpack:watch'...
[17:20:56] Time: 6069ms
     Asset       Size  Chunks             Chunk Names
  index.js    7.41 MB       0  [emitted]  main
index.html  439 bytes          [emitted]  
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  4.05 kB       0       
[17:20:56] Finished 'webpack:watch' after 6.1 s
[17:20:56] Starting 'watch'...
[17:20:57] Finished 'watch' after 198 ms
[17:20:57] Starting 'browsersync'...
[17:20:57] Finished 'browsersync' after 29 ms
[17:20:57] Finished 'serve' after 6.33 s
[BS] [BrowserSync SPA] Running...
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.11:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.11:3001
 -------------------------------------
[BS] Serving files from: .tmp
[BS] Serving files from: src

Uruchomienie testów:

seba$ npm run test:auto

> @ test:auto /Users/seba/Projects/js/angularjs/ip
> gulp test:auto

[17:21:37] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/browsersync.js
[17:21:37] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/karma.js
[17:21:37] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/misc.js
[17:21:37] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/webpack.js
[17:21:38] Using gulpfile ~/Projects/js/angularjs/ip/gulpfile.js
[17:21:38] Starting 'test:auto'...
[17:21:38] Starting 'karma:auto-run'...
08 10 2016 17:21:45.219:WARN [karma]: No captured browser, open http://localhost:9876/
08 10 2016 17:21:45.226:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
08 10 2016 17:21:45.229:INFO [launcher]: Starting browser Chrome
08 10 2016 17:21:46.626:INFO [Chrome 53.0.2785 (Mac OS X 10.12.0)]: Connected on socket -M8kGSK_hZ0NxVYMAAAA with id 35035430
Chrome 53.0.2785 (Mac OS X 10.12.0): Executed 1 of 1 SUCCESS (0.112 secs / 0.1 secs)

Zbudowanie wersji produkcyjnej:

seba$ npm run build

> @ build /Users/seba/Projects/js/angularjs/ip
> gulp

[17:22:23] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/browsersync.js
[17:22:23] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/karma.js
[17:22:24] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/misc.js
[17:22:24] Loading /Users/seba/Projects/js/angularjs/ip/gulp_tasks/webpack.js
[17:22:24] Using gulpfile ~/Projects/js/angularjs/ip/gulpfile.js
[17:22:24] Starting 'default'...
[17:22:24] Starting 'clean'...
[17:22:24] Finished 'clean' after 11 ms
[17:22:24] Starting 'build'...
[17:22:24] Starting 'other'...
[17:22:24] Starting 'webpack:dist'...
[17:22:24] Finished 'other' after 94 ms
[17:22:49] Time: 24397ms
                                     Asset       Size  Chunks             Chunk Names
            vendor-d088b0daf0b09ea07d5e.js    1.01 MB       0  [emitted]  vendor
               app-d088b0daf0b09ea07d5e.js    1.13 MB       1  [emitted]  app
index-4765d95b33b5504446c68bf93dd06521.css   30 bytes       1  [emitted]  app
                                index.html  608 bytes          [emitted]  
...
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks       Chunk Names
    index.html  2.9 kB       0       
Child extract-text-webpack-plugin:
    
[17:22:49] Finished 'webpack:dist' after 24 s
[17:22:49] Finished 'build' after 24 s
[17:22:49] Finished 'default' after 24 s

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.

Time limit is exhausted. Please reload CAPTCHA.