CSS Preprocessor Workflow with Grunt

CSS Preprocessor Workflow with Grunt

Transcript

1. Preprocessor Workflow with Grunt CSS Dev Conference 2013 / Vlad Filippov
2. @vladikoff
3. Agenda • Grunt - What and Why? • Getting Started • Grunt Plugins and CSS Workflows • Beyond the plugins +
4. What is Grunt? Task Runner open browser minify CSS process SASS optimize images run tests . . .
5. What is Grunt? Automation open browser minify CSS process LESS optimize images → → → { →
6. What is Grunt? Build Step → → → → Debug → Source Production Development
7. What is Grunt? • Built and Configured using JavaScript • Powered by • Cross-platform • Strength in community & open-source • Strength in modularity
8. Who uses Grunt?
9. npm-stat.vorb.de/charts.html?package=grunt
10. Grunt Ecosystem • Stable Version: 0.4.1 • 0.4.2 out in the next few days! • Over 1000 plugins available today
11. Demo
12. Getting Started
13. Empty Gruntfile
14. Grunt Plugins!
15. Grunt Plugins! Grunt Plugins and Grunt Core in node_modules Install the plugin we want:
16. Make it easy to install $ npm install grunt-contrib-less --save-dev
17. Make it easy to install Ready to be installed everywhere!
18. grunt-contrib-less
19. grunt-contrib-stylus
20. grunt-contrib-sass
21. grunt-contrib-compass
22. File Patterns
23. Run it!
24. So far... → SASS: dev SASS: prod →
25. grunt-contrib-watch
26. grunt-contrib-watch
27. Workflow! → SASS: dev SASS: prod → watch for changes default development →
28. grunt-spritesmith
29. grunt-contrib-imagemin
30. build Workflow Updated! → SASS: dev SASS: prod → watch for changes default dev → create sprites → build optimize images → → build →
31. Workflow Updated!
32. grunt-source Reuse a Grunt environment across multiple projects Project A Project B Project C Boilerplate Project
33. So much to do... • Explore task combinations, optimize • Give feedback to existing plugins • Share your workflow • Build your own plugins • Plugin Template: github.com/gruntjs/grunt-init
34. Beyond the plugins
35. Beyond the plugins
36. Beyond the plugins
37. Beyond the plugins
39. Thank you! • Documentation and API at gruntjs.com • Stackoverflow: [gruntjs] • IRC: #grunt on Freenode • Twitter: @gruntjs and #gruntjs