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