Bower & Robygems - Cada um no seu quadrado
-
Upload
cezinha-anjos -
Category
Software
-
view
347 -
download
2
Transcript of Bower & Robygems - Cada um no seu quadrado
@cezinha_anjos• Programo há 25 anos.
• Passei por diversas linguagens e paradigmas de programação.
• Atualmente focado em Ruby on Rails e Javascript.
• Gosto de OO, Clean Code, Design Patterns, BDD e Lean.
• Diretor da ASSEINFO.
2
• Olhe para seus projetos
• Procure o que se repete entre eles
• Extraia para gems
DRY: don’t repeat yourself!
9
16
1 github.com/twbs lança uma nova versão
2 github/seyhunak adapta para o Rails a nova versão do Bootstrap e
coloca na gem
3 Você usa a gem no seu aplicativo
Problemas?
• Quanto tempo pode demorar para o vendor atualizar a gem?
• Todo o CSS / JS envolvido fica transparente?
• E se você quiser usar só uma parte do framework?
17
.bowerrc
22
• Arquivo de configuração do projeto • Você pode definir o destino do download
$ vim .bowerrc !{ "directory": "vendor/assets/bower" }
bower.json
• O arquivo bower.json descreve os pacotes que você está usando.
• O bower.json está para o Bower assim como o Gemfile está para o Bundler.
23
24
{ "name": “meu app", "version": "0.0.0", "homepage": "https://github.com/asseinfo/meuapp", "authors": [ "Cezinha <[email protected]>" ], "private": true, "dependencies": { "jquery": "2.0.3", "jquery-ujs": "*", "jquery-ui": "1.10.3", "font-awesome": "4.0.3", "bootstrap-sass-official": "3.1.0+2" } }
27
cezinha@machine:~/dev/tdc2014$ bower init [?] name: tdc2014 [?] version: 0.0.0 [?] description: [?] main file: [?] what types of modules does this package expose? [?] keywords: [?] authors: Cezinha <[email protected]> [?] license: MIT [?] homepage: [?] set currently installed components as dependencies? Yes [?] add commonly ignored files to ignore list? Yes
28
{ name: 'tdc2014', version: '0.0.0', authors: [ 'Cezinha <[email protected]>' ], license: 'MIT', private: true, ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests' ] } ![?] Looks good? (Y/n)
30
cezinha@machine:~/dev/tdc2014$ bower search bootstrap Search results: ! bootstrap git://github.com/twbs/bootstrap.git angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git sass-bootstrap git://github.com/jlong/sass-bootstrap.git bootstrap-sass git://github.com/jlong/sass-twitter-bootstrap bootstrap-datepicker git://github.com/eternicode/bootstrap-datepicker.git bootstrap-select git://github.com/silviomoreto/bootstrap-select.git bootstrap-timepicker git://github.com/jdewit/bootstrap-timepicker angular-ui-bootstrap git://github.com/angular-ui/bootstrap.git angular-ui-bootstrap-bower git://github.com/angular-ui/bootstrap-bower bootstrap-sass-official git://github.com/twbs/bootstrap-sass.git
32
cezinha@machine:~/dev/tdc2014$ bower install bootstrap --save bower cached git://github.com/twbs/bootstrap.git#3.1.1 bower validate 3.1.1 against git://github.com/twbs/bootstrap.git#* bower cached git://github.com/jquery/jquery.git#2.1.0 bower validate 2.1.0 against git://github.com/jquery/jquery.git#>= 1.9.0 bower new version for git://github.com/jquery/jquery.git#>= 1.9.0 bower resolve git://github.com/jquery/jquery.git#>= 1.9.0 bower download https://github.com/jquery/jquery/archive/2.1.1.tar.gz bower extract jquery#>= 1.9.0 archive.tar.gz bower resolved git://github.com/jquery/jquery.git#2.1.1 bower install bootstrap#3.1.1 bower install jquery#2.1.1 !bootstrap#3.1.1 bower_components/bootstrap └── jquery#2.1.1 !jquery#2.1.1 bower_components/jquery
Checkout do projeto
$ git clone meu-projeto $ cd meu-projeto$ bundle install $ bower installO bower install baixará suas dependências de front-end.
34
38
$ vim meu-bootstrap-personalizado.css.scss!!$grid-columns: 36; $grid-gutter-width: 10px; !$navbar-height: 50px; $navbar-default-bg: #4D6B82; $navbar-default-link-color: #FFF; !$navbar-default-link-active-color: #FFF; $navbar-default-link-active-bg: #E77817; $navbar-default-link-hover-bg: #E77817; $navbar-default-link-hover-color: #FFF; !@import "bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/bootstrap.scss";