Skip to content

Instantly share code, notes, and snippets.

@igorlima
Last active August 29, 2015 14:03
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save igorlima/ab8ec2c86585a156a703 to your computer and use it in GitHub Desktop.
Save igorlima/ab8ec2c86585a156a703 to your computer and use it in GitHub Desktop.
Artigo Tableless - Gerenciamento de dependências de bibliotecas JavaScript

Gittip Donate Button

Esse artigo é mais um exemplo prático de como gerenciar dependências JS. Para isso vamos utilizar um projeto sem gerenciamento de dependência e aplicar os conhecimentos do artigo publicado no Tableless sobre o Bower. Primeiramente, vamos baixar o projeto:

git clone git@gist.github.com:/69153705256f6a9a4557.git projeto-sem-gerenciamento
cd projeto-sem-gerenciamento

As bibliotecas utilizadas são: Knockout, Zepto, Ratchet JS e Font Awesome. Para gerenciá-las, é preciso criar um arquivo json de configuração.

arquivo Bower

Após essa configuração, certifique-se que o Bower esteja instalado. Caso não tenha, instale-o via npm install -g bower. Utilize o comando abaixo para baixar as dependências:

bower install

Uma vez baixadas todas as dependências, resta agora alterar as referências das dependências no arquivo HTML. Veja o patch abaixo para mais detalhes:

arquivo do patch

E é isso, pessoal. O resultado desse artigo também está disponível em um gist e pode ser visualizado na seguinte url. Caso tenha interesse em como publicar esse projeto na nuvem, dê uma olhada nesse outro artigo. Espero que tenha gostado. Muito obrigado e até a próxima.

{
"name": "artigo de como gerenciar bibliotecas JS",
"version": "0.0.0",
"authors": [
"Igor Lima <lima.igorribeiro@gmail.com>"
],
"description": "Esse artigo é mais um exemplo prático de como gerenciar dependências JS",
"keywords": [
"bower",
"gerenciamento de bibliotecas",
"javascript",
"how to do"
],
"license": "MIT",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"knockout.js": "~3.1.0",
"zepto": "~1.1.3",
"ratchet": "~2.0.2",
"font-awesome": "~4.1.0"
}
}
diff --git a/index.html b/index.html
index b355b5e..2eb5462 100644
--- a/index.html
+++ b/index.html
@@ -12,9 +12,9 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Include CSS -->
- <link href="http://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.min.css" rel="stylesheet">
- <link href="http://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet-theme-ios.min.css" rel="stylesheet">
- <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
+ <link href="bower_components/ratchet/dist/css/ratchet.min.css" rel="stylesheet">
+ <link href="bower_components/ratchet/dist/css/ratchet-theme-ios.min.css" rel="stylesheet">
+ <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="main.css" rel="stylesheet"/>
</head>
<body class="social-media">
@@ -109,9 +109,9 @@
</nav>
<!-- Includ JS -->
- <!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/js/ratchet.min.js"></script> -->
- <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js" type="text/javascript"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.3/zepto.min.js" type="text/javascript"></script>
+ <!-- <script src="bower_components/ratchet/dist/js/ratchet.min.js"></script> -->
+ <script src="bower_components/knockout.js/knockout.js" type="text/javascript"></script>
+ <script src="bower_components/zepto/zepto.min.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</body>
-</html>
\ No newline at end of file
+</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment