Ruby: A Frend-End Developer's Best Friend

In this talk, I will show you how to use Ruby and some Rubygems to accelerate a Front-End developer's working process.

Transcript

1. Ruby A Front-End Developer’s Best Friend 王海义 / 左使
2. • Sass - 编程式CSS • Compass - CSS 框架 • Sprockets - JS 文件拼接 https://github.com/zuoshi/ruby-for-f2e AGENDA
3. 王海义 I Program My Life. http://weibo.com/izuoshi https://github.com/zuoshi
5. Install Ruby 一键安装包 http://railsinstaller.org/
6. Install Sass gem install sass sass --watch screen.scss
7. Nesting
8. Nesting item.scss
9. item.sass Nesting
10. Nesting
12. The Parent Selector
13. The Parent Selector
14. Variables
15. @each
16. @extend
17. @extend
18. @mixin
19. @mixin
21. gem install compass compass create project Setup
22. config.rb
23. CSS 3 compass compile
24. CSS 3
25. CSS 3
26. CSS 3
27. CSS 3
28. inline-image
29. inline-image
30. CSS Sprites
31. CSS Sprites
32. JavaScript 文件拼接 https://github.com/zuoshi/ruby-for-f2e/tree/master/sprockets/hello
33. Install Sprockets gem install sprockets
34. cart/javascripts 6 个文件夹 17个JS文件
35. <script src=“a.js"></script> <script src=“b.js"></script> <script src=“c.js"></script> <script src=“d.js"></script> <script src=“e.js"></script> <script src=“f.js"></script> <script src=“g.js"></script> …… index.html
36. <script src=“cart.js"></script> index.html
37. config.ru
38. cart/javascripts/cart.js
39. Start Server rackup http://localhost:9292/assets/cart.js
40. templates/welcome.jst.ejs
44. https://github.com/zuoshi/ruby-for-f2e/
45. Thank You!