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: Link to heading
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: Link to heading
? '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: Link to heading
...
? 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: Link to heading
...
? 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: Link to heading
...
? 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: Link to heading
...
? 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: Link to heading
...
? 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: Link to heading
...
? 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: Link to heading
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: Link to heading
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: Link to heading
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