front-end workflow automation - yeoman, grunt and bower
DESCRIPTION
Front-end workflow automation with Yeoman, Grunt, Bower. Presented at Ljubljana Spring JavaScript MeetupTRANSCRIPT
![Page 1: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/1.jpg)
FRONT-END WORKFLOW AUTOMATIONYEOMAN, GRUNT & BOWER
Luka Zakrajšek
@bancek
Ljubljana Spring JavaScript Meetup
April 2, 2014
![Page 2: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/2.jpg)
WHY?
![Page 3: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/3.jpg)
NEW PROJECTdownload jQuerydownload jQuery UIdownload Bootstrapdownload AngularJSdirectory structure?
![Page 4: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/4.jpg)
DEVELOPMENT?coffee -o src -cw dest
mywatchcmd "lessc styles.less > styles.css"
...
![Page 5: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/5.jpg)
PRODUCTION?coffee -o src -cw dest
lessc styles.less > styles.css
uglifyjs vendor.js
...
![Page 6: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/6.jpg)
YEOMANTHE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS
![Page 7: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/7.jpg)
YOyo scaffolds out a new application, writing your Grunt
configuration and pulling in relevant Grunt tasks and Bowerdependencies that you might need for your build.
![Page 8: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/8.jpg)
GENERATORSProject templates
npm install generator-webappyo webapp
npm install generator-angularyo angularyo angular:controller MyCtrlyo angular:directive tabsyo angular:route login
npm search yeoman-generator
![Page 9: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/9.jpg)
GRUNT
Grunt is used to build, preview and test your project, thanks tohelp from tasks curated by the Yeoman team and grunt-contrib.
![Page 10: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/10.jpg)
SAMPLE TASKStestbuildserve
![Page 11: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/11.jpg)
PLUGINSconnectjshintmochaimagemin, svgmin, htmlmincompasskarma
![Page 12: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/12.jpg)
BOWER
Bower is used for dependency management, so that you nolonger have to manually download and manage your scripts.
![Page 13: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/13.jpg)
BOWER.JSON{ "name": "myproject", "version": "0.1.0", "dependencies": { "jquery": "~1.11.0", "bootstrap-sass-official": "~3.1.0" }, "devDependencies": { "mocha": "1.14.0" }}
![Page 14: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/14.jpg)
INSTALL NEW PACKAGEbower install underscorebower install jqueryui#1.10.4
bower search calendar
![Page 15: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/15.jpg)
LIGHTNING-FAST SCAFFOLDINGEasily scaffold new projects with customizable templates (e.g
HTML5 Boilerplate, Bootstrap), RequireJS and more.
![Page 16: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/16.jpg)
GREAT BUILD PROCESSNot only do you get minification and concatenation; It also
optimizes all your image files, HTML, compiles your CoffeeScriptand Compass files, if you're using AMD, it will pass those modules
through r.js so you don't have to.
![Page 17: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/17.jpg)
AUTOMATICALLY COMPILE COFFEESCRIPT &COMPASS
LiveReload watch process automatically compiles source filesand refreshes your browser whenever a change is made so you
don't have to.
![Page 18: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/18.jpg)
AUTOMATICALLY LINT YOUR SCRIPTSAll your scripts are automatically run against JSHint to ensure
they're following language best-practices.
![Page 19: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/19.jpg)
BUILT-IN PREVIEW SERVERNo more having to fire up your own HTTP Server. It's built-in one
can be fired with just one command.
![Page 20: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/20.jpg)
AWESOME IMAGE OPTIMIZATIONIt optimizes all your images using OptiPNG and JPEGTran soyour users can spend less time downloading assets and more
time using your app.
![Page 21: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/21.jpg)
KILLER PACKAGE MANAGEMENTNeed a dependency? It's just a keystroke away. It allows you to
easily search for new packages via the command-line (e.g. `bowersearch jquery`), install them and keep them updated without
needing to open your browser.
![Page 22: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/22.jpg)
PHANTOMJS UNIT TESTINGEasily run your unit tests in headless WebKit via PhantomJS.When you create a new application, it also includes some test
scaffolding for your app.
![Page 23: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/23.jpg)
GET STARTEDnpm install -g yo grunt-cli bower
![Page 24: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/24.jpg)
GENERATORSnpm install -g generator-webapp
npm install -g generator-angular
![Page 25: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/25.jpg)
INSTALL DEPENDENCIESbower install underscore
bower install angular-ui
![Page 26: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/26.jpg)
DEVELOPgrunt serve
![Page 27: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/27.jpg)
RUN TESTSgrunt test
![Page 28: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/28.jpg)
BUILDgrunt build
![Page 29: Front-end workflow automation - Yeoman, Grunt and Bower](https://reader033.vdocument.in/reader033/viewer/2022052821/554a0fd3b4c905825d8b499b/html5/thumbnails/29.jpg)
QUESTIONS?