Generate everything!

Post on 02-Dec-2014

211 views 2 download

description

A simple look at front end automation tools and how awesome it is to use them in all your projects, wether you're freelancing or working in large teams.

Transcript of Generate everything!

GENERATE EVERYTHING

FIRST LOVEWRITESAVEREFRESHSUFFERREPEAT

FIRST LOVEWRITESAVEREFRESHSUFFERREPEAT MOVE ON

MAGNA CARTA

IN THE REAL WORLD

PROTOTYPE

LANDING PAGE

REFERENCE CODE

SINGLE PAGE APPLICATIONS

BLOGS

DOCUMENTATION

ANYTHING & EVERYTHING!

GRUNT

grunt.registerTask('develop', function() { return grunt.task.run([ ‘test’, ‘clean:destination’, ‘jekyll:destination’, ‘grunticon’, ‘compass:uncompressed’, ... ,

‘feed-the-cat’,‘make-me-a-sandwich’,

‘open-index’, ‘watch’ ]);});

1st TASK RUNNER

2000+ PLUGINS

EASY TO SET UP

GULP

VERY FAST

4 METHODS (task, watch, src, dest)

STREAMS

GROWING COMMUNITY

gulp.task('styles', function() { return gulp.src('some/path/main.scss') .pipe(sass({ lineNumbers: true, loadPath: neat.includePaths })) .pipe($.autoprefixer()) .pipe(gulp.dest('some/other/path/main.css'));});

YEOMANBUILD PROCESSASSET COMPILATION + LINTINGGENERATORSLIVE PREVIEW SERVERUNIT-TESTSnpm i -g yonpm i -g generator-ember

TO THE RESCUEASSEMBLE.IOJEKYLLRB.COMMIDDLEMANAPP.COM

$ git push

$ grunt deploy

PUSHED TO DEVELOP?

ftp://

● Easy to start● Powerful templating● No backend● Deploy instantly & anywhere● Different environments● Easy to scale & great performance● Incredible community support

AUTOMATE

MULTUMESC.,

PORCPORC.com

Razvan Pavelrazvan.pavel@rga.com

ART INDEXFrançois Boucher ’The Birth of Venus’

Jeff Koons ’Dog Baloon’

Henry Fuseli ’The Nightmare’

Leonardo da Vinci ’Early vanishing point sketches’

The Beinecke Rare Book & Manuscript Library

Peter Paul Rubens ’The Calydonian Boar Hunt’

Jean-Honoré Fragonard ’The Happy Accidents of the Swing’

Jacques-Louis David ’The Intervention of the Sabine Women’

Jacques-Louis David ’Oath of the Horatii’

RESOURCEShttp://gruntjs.com/

http://gulpjs.com/

http://bower.io/

http://yeoman.io/

http://middlemanapp.com/

http://assemble.io/

http://jekyllrb.com/

http://octopress.org/

http://jenkins-ci.org/

http://coding.smashingmagazine.com/2013/10/29/get-up-running-grunt/

http://www.smashingmagazine.com/2014/06/11/building-with-gulp/

http://markdalgleish.github.io/presentation-build-wars-gulp-vs-grunt/

http://staticsitegenerators.net/