O que são tools no
desenvolvimento para web?
● Editores● Task runner● Package manager● Scripts● Virtualização● Cloud-based tools● Linters● Pré-processadores● Compiladores● Comandos unix
Processo de configuração de um plugin jQuery:
1. Ir ao site do plugin2. Baixar arquivo comprimido3. Descompactar4. Copiar estilos5. Copiar Javascript6. Copiar imagens7. Copiar fonts8. Adicionar paths de estilos no HTML9. Adicionar paths de scripts no HTML
1. Ir ao site do plugin2. Baixar arquivo comprimido3. Descompactar4. Copiar para diretório de libs5. Adicionar paths de estilos no HTML6. Adicionar paths de scripts no HTML
Processo 1 Processo 2
Package manager ( gerenciador de pacotes ) é um utilitário que busca pacotes de plugins/bibliotecas/frameworks em um determinado repositório, faz o download, e configura uma nova instalação em um projeto.
Processo de configuração de um plugin jQuery com bower:
1. Ir ao site do plugin2. Baixar arquivo comprimido3. Descompactar4. Copiar estilos5. Copiar Javascript6. Copiar imagens7. Copiar fonts8. Adicionar paths de estilos no HTML9. Adicionar paths de scripts no HTML
1. $ bower install bootstrap42. Adicionar paths de estilos no HTML3. Adicionar paths de scripts no HTML
Processo sem bower Processo com bower
Browser-Sync
● Instala e roda em qualquer lugar● Gratuito● Fácil de integrar com task runners● Network Throttle● Interação síncrona ( Qualquer
interação é espelhada em todos os navegadores )
● Sincronização de arquivos● Histórico de URL
Tasks ( tarefas ) ● Inserção automática de pacotes instalados no projeto
● Conversão de SASS/LESS para CSS● Autoprefixer de estilos CSS● Compressão de estilos● Conversão de ES5/CoffeeScript/TypeScript
para Javascript● Compressão de javascripts● Compressão de imagens● Compressão de HTML● Criação de build de projetos● Browser-Sync
Contras da utilização de task runners
● Sintaxe própria● Dependência de criadores de plugins
○ Adiciona uma camada extra de abstração
● Frustração na hora de fazer debugging○ É o utilitário que está quebrado?○ É o plugin do grunt que está quebrado?○ É minha configuração que está quebrada?○ Eu estou usando uma versão incompatível do plugin?
● Documentação de plugins fracas
PrósNPM Scripts
● Hooks● Argumentos● Variáveis de configurações● Piping● Encadeamento● Scripts centralizados em um único arquivo● Descentralizar comandos quando complicados● Módulos para executar todos os comando
sequenciais ou paralelamente● Watcher