SlideShare uma empresa Scribd logo
1 de 52
Baixar para ler offline
Os camaradas
Grunt e Bower
@raphaelfabeni
automatizador
de tarefas
task runner
gerenciador
de dependências
package manager
Grunt
Evitar trabalho repetitivo
Melhorar produtividade
nodeJS & npm
npm install –g grunt-cli
Começando...
package.json
{
"name": "nomedoprojeto",
"version": "1.0.0",
"title": "Título do projeto",
"homepage": "URL do projeto",
"devDependencies": {
"grunt": "~0.4.5"
}
}
Gruntfile.js
"use strict";
module.exports = function( grunt ) {
grunt.initConfig({
// Grunt tasks
});
};
npm install pacoteira
Instalando
npm install grunt-contrib-sass
Instalando
Instalando
npm install grunt-contrib-sass —save-dev
salva a pacoteira como
dependência do projeto
package.json modificado
{
"name": "nomedoprojeto",
"version": "1.0.0",
"title": "Título do projeto",
"homepage": "URL do projeto",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-sass": "~0.7.4"
}
}
Configuração Gruntfile.js
"use strict";
module.exports = function( grunt ) {
grunt.initConfig({
sass: {
// Dev
dev: {
options: {
style: 'compressed',
noCache: true
},
files: {
'build/css/main.min.css':
'assets/scss/main.scss'
}
},
}
});
};
...
Configuração Gruntfile.js
// Load plugins
grunt.loadNpmTasks('grunt-contrib-sass');
// Register task
// CSS
grunt.registerTask( 'css', [ 'sass' ] );
Aí o fulano clona o projeto
Só isso?
NÃO!
Homepage Interna
scripts.js
slideshow.js
news.js
scripts.js
news.js
social.js
3 requisições 3 requisições
Homepage Interna
scripts.js
slideshow.js
news.js
scripts.js
news.js
social.js
plugin.js
frufru.js
3 requisições 5 requisições
Homepage Interna
scripts.js
slideshow.js
news.js
scripts.js
news.js
social.js
plugin.js
frufru.js
3 requisições 5 requisições
concatenação + minificação
Homepage Interna
home.min.js interna.min.js
1 requisição 1 requisição
Homepage Interna
home.min.js interna.min.js
1 requisição 1 requisição
Bower
npm install –g bower
Começando...
Você pode adicionar ao package.json
como dependência
{
"name": "nomedoprojeto",
"version": "1.0.0",
"title": "Título do projeto",
"homepage": "URL do projeto",
"devDependencies": {
"grunt": "~0.4.5",
"bower": "~1.3.9"
}
}
{
"name": "exemplo",
"version": "0.0.1",
"authors": [
"raphaelfabeni"
],
"description": "Simples exemplo usando o Bower",
"license": "MIT",
"homepage": "www.homepage.com.br",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"devDependencies": {
}
}
bower.json
bower search bagaca
Procurando as bagaças...
Instalando as bagaças...
bower install bagaca --save-dev
salva a bagaça como
dependência do projeto
{
"name": "exemplo",
"version": "0.0.1",
"authors": [
"raphaelfabeni"
],
"description": "Simples exemplo usando o Bower",
"license": "MIT",
"homepage": "www.homepage.com.br",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"devDependencies": {
"modernizr": "~2.8.3"
}
}
bower.json atualizado
Pasta criada automaticamente
bower_components
└── modernizr
dependência do projeto
Pasta criada automaticamente
bower_components
└── modernizr
dependência do projeto
.bowerrc
{
"directory":"components"
}
altera nome da pasta
bower install
Instalando as dependências...
Instala as dependências
que estão no bower.json
Simples...
porém detalhes que pode
causar problemas
bower install bagaca
bower install bagaca
grunt js concatenação/minificação
de arquivos JS
bower_components/bagaca/bagaca.js
assets/js/scripts.js
bower install bagaca
grunt js concatenação/minificação
de arquivos JS
bower_components/bagaca/bagaca.js
assets/js/scripts.js
bower install bagaca
grunt js concatenação/minificação
de arquivos JS
grunt js
bower_components/bagaca/bagaca.js
assets/js/scripts.js
bower install bagaca
grunt js concatenação/minificação
de arquivos JS
grunt js erro!
#todoschora
bower_components/bagaca/bagaca.js
assets/js/scripts.js
Tem a dependência
bagaca instalada?
Sim
Tem a dependência
bagaca instalada?
Não
Tem a dependência
bagaca instalada?
Sim
A tarefa do Grunt encontra
todos os arquivos
necessário.
Tem a dependência
bagaca instalada?
Não
A tarefa do Grunt não
encontra todos os arquivos
necessário.
Tem a dependência
bagaca instalada?
Sim
A tarefa do Grunt encontra
todos os arquivos
necessário.
A lib bagaca não foi
adicionada ao bower.json
como dependência.
Tem a dependência
bagaca instalada?
Não
A tarefa do Grunt não
encontra todos os arquivos
necessário.
Ao rodar bower install
nenhuma dependência é
instalada.
.gitignore no node_modules
jamais
nunca
never
jamé
comite essa pasta
}
Não esqueça o --save-dev
.gitignore no bower_components
> Não comite, nem publique essa pasta
> Utilize o Grunt para concatenar/minificar
> Dependências serão instaladas
http://github.com/a2comunicacao/a2boilerplate
o/

Mais conteúdo relacionado

Mais procurados

Conhecendo o Nodejs
Conhecendo o NodejsConhecendo o Nodejs
Conhecendo o NodejsCaio Cutrim
 
Containers PostgreSQL com a Crunchy Container Suite
Containers PostgreSQL com a Crunchy Container SuiteContainers PostgreSQL com a Crunchy Container Suite
Containers PostgreSQL com a Crunchy Container SuiteRoberto Mello
 
Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018
Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018
Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018martasantos718
 
Desenvolvendo para WordPress com Docker, Git e WP-CLI
Desenvolvendo para WordPress com Docker, Git e WP-CLIDesenvolvendo para WordPress com Docker, Git e WP-CLI
Desenvolvendo para WordPress com Docker, Git e WP-CLIRudá Almeida
 
From Development to Production: Vagrant and Ansible, por Erika Heidi
From Development to Production: Vagrant and Ansible, por Erika HeidiFrom Development to Production: Vagrant and Ansible, por Erika Heidi
From Development to Production: Vagrant and Ansible, por Erika HeidiiMasters
 
Introdução ao NodeJS
Introdução ao NodeJSIntrodução ao NodeJS
Introdução ao NodeJSGiovanni Bassi
 
Vagrant + chef cookbooks ambiente de desenvolvimento como o de produção em ...
Vagrant + chef cookbooks   ambiente de desenvolvimento como o de produção em ...Vagrant + chef cookbooks   ambiente de desenvolvimento como o de produção em ...
Vagrant + chef cookbooks ambiente de desenvolvimento como o de produção em ...Tiago Butzke
 
ASP.NET Core: visão geral, exemplos práticos e novidades esperadas - .NET SP ...
ASP.NET Core: visão geral, exemplos práticos e novidades esperadas - .NET SP ...ASP.NET Core: visão geral, exemplos práticos e novidades esperadas - .NET SP ...
ASP.NET Core: visão geral, exemplos práticos e novidades esperadas - .NET SP ...Renato Groff
 
Docker Para Maiores - GDG Cabreúva
Docker Para Maiores - GDG CabreúvaDocker Para Maiores - GDG Cabreúva
Docker Para Maiores - GDG CabreúvaMatheus Fidelis
 
Docker Swarm - Sua aplicação pronta para escalar
Docker Swarm - Sua aplicação pronta para escalarDocker Swarm - Sua aplicação pronta para escalar
Docker Swarm - Sua aplicação pronta para escalargustavomtborges
 
Offline apps Using Ionic Framework and PouchDB
Offline apps  Using Ionic Framework and PouchDBOffline apps  Using Ionic Framework and PouchDB
Offline apps Using Ionic Framework and PouchDBAlvaro Viebrantz
 
Php além do LAMP
Php além do LAMPPhp além do LAMP
Php além do LAMPThiago Paes
 
Escalando API's com NodeJS, Docker e RabbitMQ
Escalando API's com NodeJS, Docker e RabbitMQEscalando API's com NodeJS, Docker e RabbitMQ
Escalando API's com NodeJS, Docker e RabbitMQMatheus Fidelis
 

Mais procurados (20)

Conceitos Basicos e Docker - Java Noroeste
Conceitos Basicos e Docker - Java NoroesteConceitos Basicos e Docker - Java Noroeste
Conceitos Basicos e Docker - Java Noroeste
 
Conhecendo o Nodejs
Conhecendo o NodejsConhecendo o Nodejs
Conhecendo o Nodejs
 
Estudo de caso - Uso Docker no Desenvolvimento
Estudo de caso - Uso Docker no DesenvolvimentoEstudo de caso - Uso Docker no Desenvolvimento
Estudo de caso - Uso Docker no Desenvolvimento
 
Esse cara é o grunt
Esse cara é o gruntEsse cara é o grunt
Esse cara é o grunt
 
Containers PostgreSQL com a Crunchy Container Suite
Containers PostgreSQL com a Crunchy Container SuiteContainers PostgreSQL com a Crunchy Container Suite
Containers PostgreSQL com a Crunchy Container Suite
 
Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018
Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018
Criação de temas Liferay 7.0 - LPUG - 12 Setembro 2018
 
Palestra parse
Palestra parsePalestra parse
Palestra parse
 
Desenvolvendo para WordPress com Docker, Git e WP-CLI
Desenvolvendo para WordPress com Docker, Git e WP-CLIDesenvolvendo para WordPress com Docker, Git e WP-CLI
Desenvolvendo para WordPress com Docker, Git e WP-CLI
 
From Development to Production: Vagrant and Ansible, por Erika Heidi
From Development to Production: Vagrant and Ansible, por Erika HeidiFrom Development to Production: Vagrant and Ansible, por Erika Heidi
From Development to Production: Vagrant and Ansible, por Erika Heidi
 
Introdução ao NodeJS
Introdução ao NodeJSIntrodução ao NodeJS
Introdução ao NodeJS
 
Vagrant + chef cookbooks ambiente de desenvolvimento como o de produção em ...
Vagrant + chef cookbooks   ambiente de desenvolvimento como o de produção em ...Vagrant + chef cookbooks   ambiente de desenvolvimento como o de produção em ...
Vagrant + chef cookbooks ambiente de desenvolvimento como o de produção em ...
 
Node js - Javascript Server Side
Node js - Javascript Server SideNode js - Javascript Server Side
Node js - Javascript Server Side
 
PHP no Windows Azure
PHP no Windows AzurePHP no Windows Azure
PHP no Windows Azure
 
ASP.NET Core: visão geral, exemplos práticos e novidades esperadas - .NET SP ...
ASP.NET Core: visão geral, exemplos práticos e novidades esperadas - .NET SP ...ASP.NET Core: visão geral, exemplos práticos e novidades esperadas - .NET SP ...
ASP.NET Core: visão geral, exemplos práticos e novidades esperadas - .NET SP ...
 
Docker Para Maiores - GDG Cabreúva
Docker Para Maiores - GDG CabreúvaDocker Para Maiores - GDG Cabreúva
Docker Para Maiores - GDG Cabreúva
 
Alagoas Dev Day
Alagoas Dev DayAlagoas Dev Day
Alagoas Dev Day
 
Docker Swarm - Sua aplicação pronta para escalar
Docker Swarm - Sua aplicação pronta para escalarDocker Swarm - Sua aplicação pronta para escalar
Docker Swarm - Sua aplicação pronta para escalar
 
Offline apps Using Ionic Framework and PouchDB
Offline apps  Using Ionic Framework and PouchDBOffline apps  Using Ionic Framework and PouchDB
Offline apps Using Ionic Framework and PouchDB
 
Php além do LAMP
Php além do LAMPPhp além do LAMP
Php além do LAMP
 
Escalando API's com NodeJS, Docker e RabbitMQ
Escalando API's com NodeJS, Docker e RabbitMQEscalando API's com NodeJS, Docker e RabbitMQ
Escalando API's com NodeJS, Docker e RabbitMQ
 

Semelhante a Os camaradas Grunt e Bower

Apresentação zend framework 2 parte 1
Apresentação zend framework 2   parte 1 Apresentação zend framework 2   parte 1
Apresentação zend framework 2 parte 1 Edgar Dantas
 
Dockerizando aplicações em uma Fintech
Dockerizando aplicações em uma FintechDockerizando aplicações em uma Fintech
Dockerizando aplicações em uma FintechRafael Gomes
 
Oficina PostgreSQL Básico Latinoware 2012
Oficina PostgreSQL Básico Latinoware 2012Oficina PostgreSQL Básico Latinoware 2012
Oficina PostgreSQL Básico Latinoware 2012Fabrízio Mello
 
Desenvolvimento de aplicações mobile com bootstrap, cordova e vue.js
Desenvolvimento de aplicações mobile com bootstrap, cordova e vue.jsDesenvolvimento de aplicações mobile com bootstrap, cordova e vue.js
Desenvolvimento de aplicações mobile com bootstrap, cordova e vue.jsGustavo Castro
 
Gerenciamento de projetos com o Apache Ant
Gerenciamento de projetos com o Apache AntGerenciamento de projetos com o Apache Ant
Gerenciamento de projetos com o Apache AntDenis L Presciliano
 
Gerenciamento de projetos com o Apache Ant
Gerenciamento de projetos com o Apache AntGerenciamento de projetos com o Apache Ant
Gerenciamento de projetos com o Apache AntDenis L Presciliano
 
Composer dependency manager - TDC - POA 2017
Composer   dependency manager - TDC - POA 2017Composer   dependency manager - TDC - POA 2017
Composer dependency manager - TDC - POA 2017Vitor Mattos
 
Ambiente de Desenvolvimento Java usando Ant
Ambiente de Desenvolvimento Java usando AntAmbiente de Desenvolvimento Java usando Ant
Ambiente de Desenvolvimento Java usando AntDenis L Presciliano
 
Workshop react + adonis.js
Workshop react + adonis.jsWorkshop react + adonis.js
Workshop react + adonis.jsDenis Velrino
 
ASP.NET 5 - Novidades do Desenvolvimento Web em .NET
ASP.NET 5 - Novidades do Desenvolvimento Web em .NETASP.NET 5 - Novidades do Desenvolvimento Web em .NET
ASP.NET 5 - Novidades do Desenvolvimento Web em .NETRenato Groff
 
Django e MongoDB - Python Brasil 7
Django e MongoDB - Python Brasil 7Django e MongoDB - Python Brasil 7
Django e MongoDB - Python Brasil 7Christiano Anderson
 
Entre na fila. Processamento distribuído usando Gearman
Entre na fila. Processamento distribuído usando GearmanEntre na fila. Processamento distribuído usando Gearman
Entre na fila. Processamento distribuído usando GearmanElton Minetto
 
ASP.NET Core - iMasters - Março/2016
ASP.NET Core - iMasters - Março/2016ASP.NET Core - iMasters - Março/2016
ASP.NET Core - iMasters - Março/2016Renato Groff
 

Semelhante a Os camaradas Grunt e Bower (20)

Precisamos falar sobre Gradle
Precisamos falar sobre GradlePrecisamos falar sobre Gradle
Precisamos falar sobre Gradle
 
Node JS - Parte 1
Node JS - Parte 1Node JS - Parte 1
Node JS - Parte 1
 
Aula Ruby
Aula RubyAula Ruby
Aula Ruby
 
Apresentação zend framework 2 parte 1
Apresentação zend framework 2   parte 1 Apresentação zend framework 2   parte 1
Apresentação zend framework 2 parte 1
 
Dockerizando aplicações em uma Fintech
Dockerizando aplicações em uma FintechDockerizando aplicações em uma Fintech
Dockerizando aplicações em uma Fintech
 
Framework web 01 - Aula UTFPR 2018
Framework web 01 - Aula UTFPR 2018Framework web 01 - Aula UTFPR 2018
Framework web 01 - Aula UTFPR 2018
 
Oficina PostgreSQL Básico Latinoware 2012
Oficina PostgreSQL Básico Latinoware 2012Oficina PostgreSQL Básico Latinoware 2012
Oficina PostgreSQL Básico Latinoware 2012
 
Mean Stack
Mean StackMean Stack
Mean Stack
 
Desenvolvimento de aplicações mobile com bootstrap, cordova e vue.js
Desenvolvimento de aplicações mobile com bootstrap, cordova e vue.jsDesenvolvimento de aplicações mobile com bootstrap, cordova e vue.js
Desenvolvimento de aplicações mobile com bootstrap, cordova e vue.js
 
Gerenciamento de projetos com o Apache Ant
Gerenciamento de projetos com o Apache AntGerenciamento de projetos com o Apache Ant
Gerenciamento de projetos com o Apache Ant
 
Gerenciamento de projetos com o Apache Ant
Gerenciamento de projetos com o Apache AntGerenciamento de projetos com o Apache Ant
Gerenciamento de projetos com o Apache Ant
 
Composer dependency manager - TDC - POA 2017
Composer   dependency manager - TDC - POA 2017Composer   dependency manager - TDC - POA 2017
Composer dependency manager - TDC - POA 2017
 
Ambiente de Desenvolvimento Java usando Ant
Ambiente de Desenvolvimento Java usando AntAmbiente de Desenvolvimento Java usando Ant
Ambiente de Desenvolvimento Java usando Ant
 
Workshop react + adonis.js
Workshop react + adonis.jsWorkshop react + adonis.js
Workshop react + adonis.js
 
ASP.NET 5 - Novidades do Desenvolvimento Web em .NET
ASP.NET 5 - Novidades do Desenvolvimento Web em .NETASP.NET 5 - Novidades do Desenvolvimento Web em .NET
ASP.NET 5 - Novidades do Desenvolvimento Web em .NET
 
Django e MongoDB - Python Brasil 7
Django e MongoDB - Python Brasil 7Django e MongoDB - Python Brasil 7
Django e MongoDB - Python Brasil 7
 
Entre na fila. Processamento distribuído usando Gearman
Entre na fila. Processamento distribuído usando GearmanEntre na fila. Processamento distribuído usando Gearman
Entre na fila. Processamento distribuído usando Gearman
 
Bower - Gerenciador de Pacotes para WEB
Bower - Gerenciador de Pacotes para WEBBower - Gerenciador de Pacotes para WEB
Bower - Gerenciador de Pacotes para WEB
 
ASP.NET Core - iMasters - Março/2016
ASP.NET Core - iMasters - Março/2016ASP.NET Core - iMasters - Março/2016
ASP.NET Core - iMasters - Março/2016
 
Python e MongoDB - Ensol
Python e MongoDB - EnsolPython e MongoDB - Ensol
Python e MongoDB - Ensol
 

Último

[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)Alessandro Almeida
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Dirceu Resende
 
Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfLarissa Souza
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAMarcio Venturelli
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfCarlos Gomes
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfRodolpho Concurde
 

Último (6)

[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdf
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdf
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 

Os camaradas Grunt e Bower