Os camaradas Grunt e Bower

Slide 1

Slide 1 text

Os camaradas Grunt e Bower @raphaelfabeni

Slide 2

Slide 2 text

automatizador de tarefas task runner gerenciador de dependências package manager

Slide 3

Slide 3 text

Grunt

Slide 4

Slide 4 text

Evitar trabalho repetitivo

Slide 5

Slide 5 text

Melhorar produtividade

Slide 6

Slide 6 text

nodeJS & npm

Slide 7

Slide 7 text

npm install –g grunt-cli Começando...

Slide 8

Slide 8 text

package.json { "name": "nomedoprojeto", "version": "1.0.0", "title": "Título do projeto", "homepage": "URL do projeto", "devDependencies": { "grunt": "~0.4.5" } }

Slide 9

Slide 9 text

Gruntfile.js "use strict"; module.exports = function( grunt ) { grunt.initConfig({ // Grunt tasks }); };

Slide 10

Slide 10 text

npm install pacoteira Instalando

Slide 11

Slide 11 text

npm install grunt-contrib-sass Instalando

Slide 12

Slide 12 text

Instalando npm install grunt-contrib-sass —save-dev salva a pacoteira como dependência do projeto

Slide 13

Slide 13 text

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" } }

Slide 14

Slide 14 text

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' } }, } }); }; ...

Slide 15

Slide 15 text

Configuração Gruntfile.js // Load plugins grunt.loadNpmTasks('grunt-contrib-sass'); // Register task // CSS grunt.registerTask( 'css', [ 'sass' ] );

Slide 16

Slide 16 text

Aí o fulano clona o projeto

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Só isso? NÃO!

Slide 20

Slide 20 text

Homepage Interna scripts.js slideshow.js news.js scripts.js news.js social.js 3 requisições 3 requisições

Slide 21

Slide 21 text

Homepage Interna scripts.js slideshow.js news.js scripts.js news.js social.js plugin.js frufru.js 3 requisições 5 requisições

Slide 22

Slide 22 text

Homepage Interna scripts.js slideshow.js news.js scripts.js news.js social.js plugin.js frufru.js 3 requisições 5 requisições

Slide 23

Slide 23 text

concatenação + minificação

Slide 24

Slide 24 text

Homepage Interna home.min.js interna.min.js 1 requisição 1 requisição

Slide 25

Slide 25 text

Homepage Interna home.min.js interna.min.js 1 requisição 1 requisição

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Bower

Slide 28

Slide 28 text

npm install –g bower Começando...

Slide 29

Slide 29 text

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" } }

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

{ "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

Slide 32

Slide 32 text

bower search bagaca Procurando as bagaças...

Slide 33

Slide 33 text

Instalando as bagaças... bower install bagaca --save-dev salva a bagaça como dependência do projeto

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Pasta criada automaticamente bower_components └── modernizr dependência do projeto

Slide 37

Slide 37 text

Pasta criada automaticamente bower_components └── modernizr dependência do projeto .bowerrc { "directory":"components" } altera nome da pasta

Slide 38

Slide 38 text

bower install Instalando as dependências... Instala as dependências que estão no bower.json

Slide 39

Slide 39 text

Simples... porém detalhes que pode causar problemas

Slide 40

Slide 40 text

bower install bagaca

Slide 41

Slide 41 text

bower install bagaca grunt js concatenação/minificação de arquivos JS bower_components/bagaca/bagaca.js assets/js/scripts.js

Slide 42

Slide 42 text

bower install bagaca grunt js concatenação/minificação de arquivos JS bower_components/bagaca/bagaca.js assets/js/scripts.js

Slide 43

Slide 43 text

bower install bagaca grunt js concatenação/minificação de arquivos JS grunt js bower_components/bagaca/bagaca.js assets/js/scripts.js

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Tem a dependência bagaca instalada? Sim Tem a dependência bagaca instalada? Não

Slide 46

Slide 46 text

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.

Slide 47

Slide 47 text

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.

Slide 48

Slide 48 text

.gitignore no node_modules jamais nunca never jamé comite essa pasta }

Slide 49

Slide 49 text

Não esqueça o --save-dev

Slide 50

Slide 50 text

.gitignore no bower_components > Não comite, nem publique essa pasta > Utilize o Grunt para concatenar/minificar > Dependências serão instaladas