19
GENERATE EVERYTHING

Generate everything!

Embed Size (px)

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.

Citation preview

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/