Linha de Comando para o Web Design: Lidando com Pacotes de Terceiros

Geralmente, usamos pacotes de terceiros em nossos projetos de web design.

Carregamos CSS de projetos como o Bootstrap e Foundation, e scripts como jQuery e Modernizr. Além disso, cada vez mais, usamos pacotes de terceiros durante o processo de desenvolvimento, como compiladores para préprocessadores CSS ou limpadores de código e ferramentas de compressão para acelerar a velocidade que nossos sites carregam e são executados.

Rapidamente, isso pode tornar-se uma bagunça com downloads manuais, transferências de arquivos e atualizações. Claro, conseguimos fazer isso funcionar, mas é bastante demorado e suas complicações, geralmente, deixam projetos com códigos desatualizados. Há, porém uma forma melhor e mais rápida, usando a gerenciadores de pacotes via linhas de comando.

Neste tutorial, você aprenderá como lidar com pacotes de terceiros em simples comandos.

Nota: Se não acompanhou o primeiro tutorial desta série, Entendendo o Básico, é interessante que você o leia primeiro antes de continuar por aqui.

Os “Dois Maiores” Gerenciadores de Pacote

Para começarmos a usar a linha de comando para lidar com pacotes de terceiros, a primeira coisa que você precisará é de um “sistema de gerenciamento de pacotes, ou “gerenciador de pacotes”. As duas escolhas mais óbvias e populares entre os web designers, nesse momento, são o npm e o Bower, e serão esses os sistemas que aprenderemos a usar hoje.

npm (através do Node.js)

Talvez já tenha ouvido falar do Node.js, um conjunto de ferramentas em JavaScript que podem servir para criar plataformas de blog, a IDEs de programação, passando por centrais de mídia a sistemas operacionais inteiros.

Junto da instalação do Node.js, temos a instalação do gerenciador de pacotes npm, um sistema tremendamente útil que você verá bastante por esta série.

Contrário ao que possa parecer, npm não significa “Node Package Manager”. Oficialmente, significa “npm não é um acrônimo” e no topo do site você verá várias piadinhas a cada atualização da página, como “nunca puxe macacos” e “novos paradigmas majestosos”.

Neste momento, o npm provê acesso e administração de 127,664 pacotes projetados para os mais variados propósitos; Entre os itens úteis para web design, você encontrará pacotes como:

• Stylus
• node-sass
• LESS
• Jade
• UglifyJS
• Bower
• Grunt
• Gulp
• Yeoman
• Autoprefixer
• BrowserSync
• Foundation CLI
• UglifyJS
• clean-css
• Jeet.gs
• Kouto Swiss

Para os propósitos desse tutorial, usaremos o npm junto do Node.js, porém, ele é uma entidade independente que pode ser usada com outros sistemas como o recém-chegado, IO.js.

Como iniciantes, recomendo seguir o tutorial usando o Node.js, posteriormente, porém, talvez queira explorar outras opções.

Bower

Para falar a verdade, fui iniciado nos gerenciadores de pacotes de terceiros via linha de comando através do Bower. Alguém aguçou minha curiosidade ao perguntar

“Você já tentou o Bower? É fantástico!”

Eu não tinha ideia do que ele era e para que servia, então fui até o site www.bower.io e uma olhada na lista dos pacotes disponíveis fez eu perceber.

A biblioteca inclui os itens abaixo:

• Bootstrap
• AngularJS
• jQuery
• Font Awesome
• HTML5 Boilerplate
• Animate.css
• Normalize.css
• Modernizr
• Underscore
• Flat UI
• jQuery UI
• Handlebars
• Masonry

São grandes as chances de você ter usado pelo menos um desses pacotes em seus projetos, regularmente. O Bower acelera e facilita esse processo para você.

Quando Usar o Bower e/ou npm

Em alguns casos, você encontrará pacotes em ambos os gerenciadores. Nesses casos, qual dos gerenciadores usar?

Ambas as opções instalarão e atualizarão os pacotes tão rápido quanto o outro. Não há regras definidas para qual usa e, no fim das contas, você terá sua própria forma de fazer as coisas, então, darei apenas uma dica, a qual poderá usar como base para suas decisões.

A partir da perspectiva do web design, a diferença se dá pela forma como usará os pacotes, e os dois casos mais comuns são para publicação front end contra o uso em desenvolvimento.

O Bower é projetado para administração de pacotes front end, então dê preferência por ele se buscar por algo que será consumido pelos usuários através do navegador.

Por outro lado, os pacotes do npm serão a escolha certa se quiser usá-los como parte do processo de desenvolvimento e não serão inclusos no produto finalizado.

Instalando o npm e o Bower

Instale o Node.js e o npm

Felizmente, instalar o npm é bem simples e direto, uma vez que já vem junto do instalador do Node.js. Vá até o site http://www.nodejs.org e baixe o instalador da sua plataforma. Instale em sua máquina e o npm será instalado junto e estará pronto para prosseguir.

Importante! Mesmo que já tenha o Node.js instalado em seu sistema, siga os paços abaixo para garantir que você tenha a versão mais atual instalada. Se estiver usando uma versão desatualizada, alguns dos passos que deverá passar durante a série, podem não funcionar.

Atualize o npm

De acordo com o site do npm, a probabilidade de ter uma versão mais nova do npm que a versão instalada com o Node.js, é bem grande.

Para ter certeza que está na versão mais atual, execute o comando a seguir:

1

[sudo] npm install npm -g

Instale o Git ou MsysGit

O Git, junto do Node.js e do npm, é um pré-requisito para usar o Bower. O Git também é um pré-requisito para alguns outros pacotes que talvez queira usar em seu processo de web design, então, é bom telo instalado no sistema também.

Para Usuários do Mac OSX

Para usuários do Mac OSX, você deverá ir ao site do Git, escolha o instalador do binário e execute-o como faria com qualquer outro instalador de aplicações: http://git-scm.com/download/mac

Para Usuários Windows

Para usar o Bower no Windows, você precisará de uma versão específica do Git para o Windows, chamada de msysGit. Pressione o botão Download e baixe o executável, mas não o execute ainda: http://msysgit.github.io

O motivo de não o instalar ainda é que você precisará ser bastante cuidadosa ao escolher as configurações durante a instalação. Ao vir a tela abaixo, tenha certeza de marcar a opção Run Git from the Windows Command Prompt (Executar Git do Prompt de Comando do Windows).

Para mais informações sobre instalação do msysGit como pré-requesito do Bower, veja: Uma nota para usuários Windows.

Instale o Bower

O Bower pode ser instalado através do npm, usando o comando a seguir:

1

[sudo] npm install -g bower

Usuários do Mac, como estamos usando o semáforo de instalação global, -g, é possível que seja preciso usar o comando sudo no início do comando anterior e digitar sua senha, quando pedido.

Básico do npm e do Bower

Iniciar um Projeto

Tanto o npm quanto o Bower usam arquivos de manifestos próprios, contendo informações sobre o projeto e uma lista dos pacotes utilizados. Com projetos do npm, o arquivo usado é chamado de “package.json” e nos projetos do Bower, é chamado de “bower.json”. A forma mais fácil de criar esses arquivos é usar o comando init respectivo de cada gerenciado. Façamos isso, agora.

Através do npm

Com a sua linha de comando no diretório raiz do seu projeto, execute esse comando:

1

npm init

Isso fará uma série de perguntas que você poderá responder através da linha de comando, provendo informações que estarão em seu arquivo “package.json” criado.

Leia mais sobre o comando npm init em: https://docs.npmjs.com/cli/init

Através do Bower

Novamente, com a sua linha de comando apontando para o diretório raiz do seu projeto, execute o comando abaixo:

1

bower init

Assim como o processo de inicialização do nom, você responderá algumas perguntas e suas respostas comporão o arquivo “bower.json”.

Leia mais sobre o comando bower init em: http://bower.io/docs/creating-packages/#bowerjson

Pesquisando Pacotes

Com o projeto iniciado, você está no ponto para trazer os pacotes. Para tanto, você precisará encontrar os pacotes que deseja usar, seja através do npm ou do Bower.

Você deve pesquisa no lugar certo, uma vez que precisa saber o nome correto do pacote dentro dos ecossistemas do npm ou do Bower, para poder instalá-los e atualizá-los.

Através do npm

Você pode pesquisa pacotes no npm através da barra de busca no topo da página deles.

Também é possível pesquisar direto da linha de comando com o comando npm search <pacote>, contudo, pessoalmente, acho mais fácil buscar direto no site.

Ao encontrar o pacote que deseja usar, anote o nome do pacote.

Através do Bower

Pesquisa por pacotes do Bower pode ser feito pelo site http://bower.io/search/.

Assim como no npm, anote o nome do pacote que deseja usar, assim que encontrá-lo.

Instalando Pacotes Novos

Uma vez encontrados os pacotes, é hora de instalá-los. É aqui que você usará os nomes dos pacotes que você anotou. Nas instruções abaixo, use o nome anotado, toda vez que encontrar <package> no comando.

Através npm

Para instalar um pacote, localmente, ou seja, apenas dentro do diretório do projeto, execute:

1

npm install <package>

O pacote será baixado e colocado dentro de um diretório chamado “node_modules”, estando disponível para uso em seu projeto, por exemplo:

Assim como instalar pacotes localmente, há a opção de instalar os pacotes globalmente.

Pacotes instalados localmente estão disponíveis, apenas, para uso dentro do contexto do seu projeto, mas, pacotes instalados globalmente podem seu usado em qualquer lugar da sua máquina. Por exemplo, assim que o pacote “less” for instalado globalmente, você pode usá-lo para compilar qualquer documento “.less”, em qualquer lugar do seu sistema.

Para instalar um pacote de forma global, use o semáforo -g em seu comando:

1

[sudo] npm install <package> -g

Através do Bower

O processo de instalação para pacotes do Bower é quase exatamente o mesmo que do npm, bastando usar o comando:

1

bower install <package>

A diferença é que os pacotes do Bower ficarão no diretório “bower_components”. Por exemplo:

Como você usará o Bower para publicar pacotes front end dentro de projetos específicos, todas suas instalações podem ser feitas localmente, sem a necessidade do uso do semáforo -g.

Trabalhando com Dependências

Se estiver interessado em compartilhar ou mesmo duplicar e mover as coisas entre os projetos que você tem usado npm ou Bower, gerenciamento de dependências é uma coisa muito boa a se saber. Deixe-me explicar o porque.

Lembre-se do arquivo manifesto que criamos mais cedo: “package.json” e “bower.json”. Em cada um desses arquivos, você encontrará uma lista dos pacotes que seu projeto depende.

Você já sabe que os pacotes do npm vão para um diretório chamado “npm_modules” e os do Bower vão para um outro, chamado “bower_components”. Bem, o legal disso é que se quiser compartilhar seu projeto, você pode omitir, completamente esses diretórios, desde que você tenha as dependências listadas nos arquivos manifestos.

Isso salvará centenas de megabytes, tornando seu projeto muito mais fácil de mover, copiar e tudo mais.

Quando alguém pega seu projeto, eles podem executar npm install e instalar todos os pacotes listados no arquivo “package.json”, automaticamente, no diretório “npm_modules”.

Equivalentemente, o comando bower install baixará, automaticamente, quaisquer dependências listadas no arquivo “bower.json” e os colocará no diretório “bower_components”.

Dependências de Produção & Desenvolvimento

Há dois tipos de dependências:

1. Dependências de produção - no contexto do web design, estamos nos referindo aos pacotes que serão publicados no front end do site, por exemplo, o Modernizr, para compatibilidade entre navegadores.

2. Dependências de desenvolvimento - no contexto do web design, estamos nos referindo aos pacotes usados durante o desenvolvimento, por exemplo, o LESS, para compilação de arquivos .less.

O Bower e o npm permitem você especificar quais dependências são de quais tipos. Contudo, como discutimos mais cedo, é provável que usar o Bower para pacotes front end e o npm para pacotes de desenvolvimento. Assim, configuraremos os pacotes do Bower como dependências de produção e os módulos do npm como dependências do desenvolvimento.

O método para configurar dependências é o mesmo para o npm e para o Bower, e é através da adição de um semáforo ao comando usado para instalar o pacote.

Instalar como Dependência de Desenvolvimento

Para configurar um pacote como dependência do desenvolvimento, adicione o semáforo --save-dev:

1

npm install <package> --save-dev

O pacote será isntalado da mesma forma de antes, porém, ele será adicionado à lista devDependencies em seu arquivo “package.json”, dessa forma:

Instalar como Dependência da Produção

Para configurar um pacote como dependência da produção, adicione o semáforo --save:

1

bower install <package> --save

Neste caso, o pacote será adicionado à lista dependencies do arquivo “bower.json”, dessa forma:

Nota: ao instalar pacotes npm de forma global, com o semáforo -g, você não precisará em usar os semáforos --save ou --save-dev.

Atualizando Pacotes

Atualizar pacotes também é um comando de uma única linha para o Bower e para o npm.

Através do npm

Para pacotes instalados localmente, execute o comando a seguir no diretório raiz do seu projeto, onde o diretório “node_modules” está:

1

npm update <package>

Para atualizar pacotes instalados globalmente, use o semáforo -g:

1

[sudo] npm update <package> -g

Você também pode deixar o nome do pacote de fora, atualizando, assim, todos os pacotes de uma só vez.

Para atualizar todos os pacotes em um projeto específico, aponte sua linha de comando para o diretório raiz do seu projeto e execute:

1

npm update

E, para atualizar todos os pacotes instalados globalmente, execute:

1

[sudo] npm update -g

Através do Bower

Atualizar pacotes do Bower é, essencialmente, o mesmo que no npm. No diretório raiz do projeto, aquele onde está o diretório “bower_components”, execute este comando:

1

bower update <package>

A versão mais atual será baixada automaticamente e adicionado ao seu diretório “bower_components”.

Usando Pacotes do npm e do Bower

Uma vez instalados, agora, você quer saber como usar os pacotes, certo??

Com os pacotes do Bower, será o mesmo que você faria para carregar arquivos normalmente, através das tags script ou link em seu HTML, carregando os arquivos direto do seu diretório “bower_components”.

Contudo, essa não é a forma mais ótima e há maneiras melhores de se fazer. Por exemplo, você pode unir todos os arquivos JavaScript dos pacotes do Bower e comprimi-los em um único arquivo.

Você verá uma demonstração desse processo em um próximo tutorial, o Automação com Executadores de Tarefa.

Pacotes instalados pelo npm, tipicamente, são usados através da linha de comando ou por scripts executadores de tarefas.

Pacotes diferentes vem com seus próprios conjuntos de comandos que você pode usar para todos os tipos diferentes de tarefas, como a compilação, compressão, união e outros. Essas tarefas específicas para pacotes pode ser automatizadas ao configurar executadores de tarefas para executar múltiplas tarefas de uma só vez.

Você aprenderá a usar pacotes do npm de ambas as formas em tutoriais futuros desta série.

No Próximo Tutorial

No próximo passo, aprenderemos a usar a linha de comando para adicionar uma nova camada de eficiência em nosso código front end, tanto na forma que desenvolvemos quanto na forma que ele é executado quando finalizado.

Você aprenderá como usar a linha de comando para compilação com préprocessadores, autoprefixamento com CSS, otimização de arquivos CSS e Javascript, e compilação de modelos HTML.

Vejo você o próximo tutorial, Aprimorando o Código Front End.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!