Generate everything!

19
GENERATE EVERYTHING

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!

Page 1: Generate everything!

GENERATE EVERYTHING

Page 2: Generate everything!

FIRST LOVEWRITESAVEREFRESHSUFFERREPEAT

Page 3: Generate everything!

FIRST LOVEWRITESAVEREFRESHSUFFERREPEAT MOVE ON

Page 4: Generate everything!

MAGNA CARTA

Page 5: Generate everything!

IN THE REAL WORLD

Page 6: Generate everything!

PROTOTYPE

LANDING PAGE

REFERENCE CODE

Page 7: Generate everything!

SINGLE PAGE APPLICATIONS

BLOGS

DOCUMENTATION

ANYTHING & EVERYTHING!

Page 8: Generate everything!

GRUNT

Page 9: Generate everything!

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

Page 10: Generate everything!

GULP

Page 11: Generate everything!

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'));});

Page 12: Generate everything!

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

Page 13: Generate everything!

TO THE RESCUEASSEMBLE.IOJEKYLLRB.COMMIDDLEMANAPP.COM

Page 14: Generate everything!

$ git push

$ grunt deploy

PUSHED TO DEVELOP?

ftp://

Page 15: Generate everything!

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

Page 16: Generate everything!

AUTOMATE

Page 17: Generate everything!

MULTUMESC.,

PORCPORC.com

Razvan [email protected]

Page 18: Generate everything!

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’

Page 19: Generate everything!

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/