Automating the front-end workflow with Grunt: a real-world example

@supacruz and @bastienpetit will detail how they use Grunt in a high expectations and scalability context (big brands, tens of thousands of web pages).

Transcript

1. Automating the front-end workflow at Leadformance with Grunt Julien Marchand @supacruz Bastien Petit @bastienpetit Meetup Geneva.rb 20.nov.2013
2. A Store Locator platform… which you already used!
11. 120 clients
12. 70 000 stores using our product
13. Context Clients with high expectations + need for scalability
14. Adding new stores in the Back Office ... remains quite simple
15. Adding Front Offices for new clients ...involves a new Liquid templates for each of their sites
16. ...that’s a lot of templates
17. • Internal team • Freelance Front-end developers • Client’s web agencies ...involving different teams
18. Ensure quality (fast, SEO-ready) Shared workflow (maintenance friendly) Streamline front offices delivery
19. A test server Our solution +
20. Templates can be manipulated with our API
21. grunt.loadNpmTasks(...) • 'grunt-contrib-jshint' • 'grunt-contrib-csslint' • 'grunt-contrib-concat' • 'grunt-contrib-uglify' • 'grunt-contrib-cssmin' • 'grunt-contrib-imagemin' • 'grunt-contrib-clean' • 'grunt-contrib-copy' • 'grunt-contrib-compress' • 'grunt-http-upload' • 'grunt-notify' • 'grunt-open' • 'grunt-contrib-watch' NEXT • // 'grunt-usemin' • // 'grunt-liquid' define common rules optimize perfs (concat, minify) (it found > 1MB pictures…) build & zip upload (POST) to Bridge API make me click less! • cache busting • view liquid in local ⇒ Proxy remote rails app? Local liquid interpretation? Our Gruntfile.js
23. Ensure team is up-to-date A custom Yeoman generator makes sharing and updating Grunt tasks a breeze.
24. More and more people are giving Grunt a try... Source: http://npm-stat.vorba.ch/charts.html?package=grunt
25. What about YOU? discovergrunt.com @DiscoverGrunt