FRONT-END WORKFLOW AUTOMATION
YEOMAN, GRUNT & BOWER
LukaZakrajšek
@bancek
LjubljanaSpringJavaScriptMeetup
April2, 2014
WHY?
NEW PROJECT
download jQuery
download jQueryUI
download Bootstrap
download AngularJS
directorystructure?
DEVELOPMENT?
coffee-osrc-cwdest
mywatchcmd"lesscstyles.less>styles.css"
...
PRODUCTION?
coffee-osrc-cwdest
lesscstyles.less>styles.css
uglifyjsvendor.js
...
YEOMAN
THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS
YO
yo scaffolds outanew application, writingyour Grunt
configuration and pullingin relevantGrunttasks and Bower
dependenci...
GENERATORS
Projecttemplates
npm installgenerator-webapp
yo webapp
npm installgenerator-angular
yo angular
yo angular:contr...
GRUNT
Gruntis used to build, preview and testyour project, thanks to
help from tasks curated bythe Yeoman team and grunt-c...
SAMPLE TASKS
test
build
serve
PLUGINS
connect
jshint
mocha
imagemin, svgmin, htmlmin
compass
karma
BOWER
Bower is used for dependencymanagement, so thatyou no
longer have to manuallydownload and manage your scripts.
BOWER.JSON
{
"name":"myproject",
"version":"0.1.0",
"dependencies":{
"jquery":"~1.11.0",
"bootstrap-sass-official":"~3.1.0...
INSTALL NEW PACKAGE
bower installunderscore
bower installjqueryui#1.10.4
bower search calendar
LIGHTNING-FAST SCAFFOLDING
Easilyscaffold new projects with customizable templates (e.g
HTML5 Boilerplate, Bootstrap), Req...
GREAT BUILD PROCESS
Notonlydo you getminification and concatenation; Italso
optimizes allyour image files, HTML, compiles ...
AUTOMATICALLY COMPILE COFFEESCRIPT &
COMPASS
LiveReload watch process automaticallycompiles source files
and refreshes you...
AUTOMATICALLY LINT YOUR SCRIPTS
Allyour scripts are automaticallyrun againstJSHintto ensure
they're followinglanguage best...
BUILT-IN PREVIEW SERVER
No more havingto fire up your own HTTP Server. It's built-in one
can be fired with justone command.
AWESOME IMAGE OPTIMIZATION
Itoptimizes allyour images usingOptiPNGand JPEGTran so
your users can spend less time downloadi...
KILLER PACKAGE MANAGEMENT
Need adependency?It's justakeystroke away. Itallows you to
easilysearch for new packages viathe ...
PHANTOMJS UNIT TESTING
Easilyrun your unittests in headless WebKitviaPhantomJS.
When you create anew application, italso i...
GET STARTED
npminstall-gyogrunt-clibower
GENERATORS
npminstall-ggenerator-webapp
npminstall-ggenerator-angular
INSTALL DEPENDENCIES
bowerinstallunderscore
bowerinstallangular-ui
DEVELOP
gruntserve
RUN TESTS
grunttest
BUILD
gruntbuild
QUESTIONS?
Upcoming SlideShare
Loading in …5
×

Front-end workflow automation - Yeoman, Grunt and Bower

3,583 views
3,229 views

Published on

Front-end workflow automation with Yeoman, Grunt, Bower.

Presented at Ljubljana Spring JavaScript Meetup

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,583
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
78
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Front-end workflow automation - Yeoman, Grunt and Bower

  1. 1. FRONT-END WORKFLOW AUTOMATION YEOMAN, GRUNT & BOWER LukaZakrajšek @bancek LjubljanaSpringJavaScriptMeetup April2, 2014
  2. 2. WHY?
  3. 3. NEW PROJECT download jQuery download jQueryUI download Bootstrap download AngularJS directorystructure?
  4. 4. DEVELOPMENT? coffee-osrc-cwdest mywatchcmd"lesscstyles.less>styles.css" ...
  5. 5. PRODUCTION? coffee-osrc-cwdest lesscstyles.less>styles.css uglifyjsvendor.js ...
  6. 6. YEOMAN THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS
  7. 7. YO yo scaffolds outanew application, writingyour Grunt configuration and pullingin relevantGrunttasks and Bower dependencies thatyou mightneed for your build.
  8. 8. GENERATORS Projecttemplates npm installgenerator-webapp yo webapp npm installgenerator-angular yo angular yo angular:controller MyCtrl yo angular:directive tabs yo angular:route login npm search yeoman-generator
  9. 9. GRUNT Gruntis used to build, preview and testyour project, thanks to help from tasks curated bythe Yeoman team and grunt-contrib.
  10. 10. SAMPLE TASKS test build serve
  11. 11. PLUGINS connect jshint mocha imagemin, svgmin, htmlmin compass karma
  12. 12. BOWER Bower is used for dependencymanagement, so thatyou no longer have to manuallydownload and manage your scripts.
  13. 13. BOWER.JSON { "name":"myproject", "version":"0.1.0", "dependencies":{ "jquery":"~1.11.0", "bootstrap-sass-official":"~3.1.0" }, "devDependencies":{ "mocha":"1.14.0" } }
  14. 14. INSTALL NEW PACKAGE bower installunderscore bower installjqueryui#1.10.4 bower search calendar
  15. 15. LIGHTNING-FAST SCAFFOLDING Easilyscaffold new projects with customizable templates (e.g HTML5 Boilerplate, Bootstrap), RequireJS and more.
  16. 16. GREAT BUILD PROCESS Notonlydo you getminification and concatenation; Italso optimizes allyour image files, HTML, compiles your CoffeeScript and Compass files, if you're usingAMD, itwillpass those modules through r.js so you don'thave to.
  17. 17. AUTOMATICALLY COMPILE COFFEESCRIPT & COMPASS LiveReload watch process automaticallycompiles source files and refreshes your browser whenever achange is made so you don'thave to.
  18. 18. AUTOMATICALLY LINT YOUR SCRIPTS Allyour scripts are automaticallyrun againstJSHintto ensure they're followinglanguage best-practices.
  19. 19. BUILT-IN PREVIEW SERVER No more havingto fire up your own HTTP Server. It's built-in one can be fired with justone command.
  20. 20. AWESOME IMAGE OPTIMIZATION Itoptimizes allyour images usingOptiPNGand JPEGTran so your users can spend less time downloadingassets and more time usingyour app.
  21. 21. KILLER PACKAGE MANAGEMENT Need adependency?It's justakeystroke away. Itallows you to easilysearch for new packages viathe command-line (e.g. `bower search jquery`), installthem and keep them updated without needingto open your browser.
  22. 22. PHANTOMJS UNIT TESTING Easilyrun your unittests in headless WebKitviaPhantomJS. When you create anew application, italso includes some test scaffoldingfor your app.
  23. 23. GET STARTED npminstall-gyogrunt-clibower
  24. 24. GENERATORS npminstall-ggenerator-webapp npminstall-ggenerator-angular
  25. 25. INSTALL DEPENDENCIES bowerinstallunderscore bowerinstallangular-ui
  26. 26. DEVELOP gruntserve
  27. 27. RUN TESTS grunttest
  28. 28. BUILD gruntbuild
  29. 29. QUESTIONS?

×