Front-end workflow automation with Yeoman, Grunt, Bower. Presented at Ljubljana Spring JavaScript Meetup

1. FRONT-END WORKFLOW AUTOMATION
YEOMAN, GRUNT & BOWER
LukaZakrajšek
@bancek
LjubljanaSpringJavaScriptMeetup
April2, 2014

2. WHY?

3. NEW PROJECT
download jQuery
download jQueryUI
download Bootstrap
download AngularJS
directorystructure?

4. DEVELOPMENT?
coffee-osrc-cwdest
mywatchcmd"lesscstyles.less>styles.css"
...

5. PRODUCTION?
coffee-osrc-cwdest
lesscstyles.less>styles.css
uglifyjsvendor.js
...

6. YEOMAN
THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS

7. YO
yo scaffolds outanew application, writingyour Grunt
configuration and pullingin relevantGrunttasks and Bower
dependencies thatyou mightneed for your build.

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. GRUNT
Gruntis used to build, preview and testyour project, thanks to
help from tasks curated bythe Yeoman team and grunt-contrib.

10. SAMPLE TASKS
test
build
serve

11. PLUGINS
connect
jshint
mocha
imagemin, svgmin, htmlmin
compass
karma

12. BOWER
Bower is used for dependencymanagement, so thatyou no
longer have to manuallydownload and manage your scripts.

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. INSTALL NEW PACKAGE
bower installunderscore
bower installjqueryui#1.10.4
bower search calendar

15. LIGHTNING-FAST SCAFFOLDING
Easilyscaffold new projects with customizable templates (e.g
HTML5 Boilerplate, Bootstrap), RequireJS and more.

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. AUTOMATICALLY COMPILE COFFEESCRIPT &
COMPASS
LiveReload watch process automaticallycompiles source files
and refreshes your browser whenever achange is made so you
don'thave to.

18. AUTOMATICALLY LINT YOUR SCRIPTS
Allyour scripts are automaticallyrun againstJSHintto ensure
they're followinglanguage best-practices.

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. AWESOME IMAGE OPTIMIZATION
Itoptimizes allyour images usingOptiPNGand JPEGTran so
your users can spend less time downloadingassets and more
time usingyour app.

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. PHANTOMJS UNIT TESTING
Easilyrun your unittests in headless WebKitviaPhantomJS.
When you create anew application, italso includes some test
scaffoldingfor your app.

23. GET STARTED
npminstall-gyogrunt-clibower

24. GENERATORS
npminstall-ggenerator-webapp
npminstall-ggenerator-angular

25. INSTALL DEPENDENCIES
bowerinstallunderscore
bowerinstallangular-ui

26. DEVELOP
gruntserve

27. RUN TESTS
grunttest

28. BUILD
gruntbuild

29. QUESTIONS?