Campo de busca

Categoria Front-End

Otimizando a perfomance do seu site com o Grunt

Otimizando a perfomance do seu site com o Grunt

Por | 14 de janeiro, 2014 | 3 comentários

Fala pessoal, tudo certo?

Como sabemos, nos preocuparmos com a tempo de carregamento de nossas páginas é bastante importante, já que isso traz diversas vantagens para nossos clientes e usuários.

Pensando nisso, hoje iremos aprender a utilizar o Grunt, e através de seus plugins, iremos ver como podemos otimizar a perfomance de carregamento das nossas páginas de forma rápida e fácil. Preparado?

Grunt, o automatizador

O Grunt tem um objetivo bem claro: automatizar tarefas. Você no seu dia a dia como desenvolvedor já deve ter percebido que algumas tarefas que você costuma fazer podem ser automatizadas, otimizando assim o seu tempo e facilitando a sua vida.

Aqui veremos como podemos automatizar processos que irão impactar diretamente na perfomance do seu site, como minificação e combinação de arquivos.

Começaremos aprendendo como configurar o Grunt, preparando-o para executar nossas tarefas de otimização.

Preparando o terreno

De início nós precisamos do npm e Node.js instalados na nossa máquina. Para isso, basta fazer o download do Node.js e instalá-lo.

Após isso, vamos instalar o Grunt com o seguinte comando no terminal:

npm install -g grunt-cli

Perceba que instalamos o grunt-cli e não o grunt em si. O objetivo do Grunt CLI é rodar a versão do Grunt que for instalada em nosso projeto, possibilitando assim termos diferentes versões do Grunt instaladas na nossa máquna.

Adicionando o Grunt ao nosso projeto

Agora chegou a hora de instalarmos o Grunt no nosso projeto que queremos automatizar nossas tarefas. Para isso, vamos criar dois arquivos na raiz do nosso projeto: package.jsonGruntfile.js:

package.json: Responsável por guardar as informações do nosso projeto e das depêndecias dos nossos plugins. Coloque o conteúdo desse arquivo como abaixo:

{
   "name": "Meu_Projeto",
   "version": "1.0.0"
}

Gruntfile.js: Responsável por configurar nossas tarefas e carregar os plugins do Grunt. Coloque o conteúdo desse arquivo como abaixo:

module.exports = function(grunt) {

  // Configuração
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });

};

Por últimos, vamos executar o comando para instalarmos o Grunt no nosso projeto:

npm install grunt --save-dev

Agora que temos a base do Grunt finalizada, vamos baixar os plugins do Grunt e fazer a mágica acontecer.

Escolhendo os plugins

No site do Grunt temos uma página específica que lista para nós todos os plugins disponíveis para o Grunt. Para esse exemplo iremos utilizar os plugins contrib-uglify, contrib-concat, contrib-cssmin e contrib-imagemin para melhorar a perfomance dos nossos arquivos.

Minicação de arquivos JS

De início, vamos instalar o plugin responsável por essa tarefa:

npm install grunt-contrib-uglify --save-dev

Em seguida, vamos configurá-lo no nosso arquivo Gruntfile.js, dentro de grunt.initConfig:

// Configuração
grunt.initConfig({
   pkg: grunt.file.readJSON('package.json'),
 
   uglify: {
      options: {
         mangle: false
      },
      my_target: {
         files: [{
            expand: true,
            cwd: 'assets/_js',
            src: '**/*.js',
            dest: 'assets/js/',
            ext: '.min.js'
         }]
      }
   }
});

A configuração do uglify acima pega todos os arquivos JS na pasta de origem cwd e coloca na pasta de destino dest os arquivos minificados.

Por último, vamos fazer uma referência ao plugin e colocar ele na nossa lista de tarefas, após o trecho de código do grunt.initConfig:

module.exports = function(grunt) {

   // Configuração
   grunt.initConfig({
      ... 
   });

   // Plugins
   grunt.loadNpmTasks( 'grunt-contrib-uglify' );

   // Tarefas
   grunt.registerTask( 'default', [ 'uglify' ] );

};

Agora, basta rodar o comando abaixo, que o Grunt irá rodar a tarefa padrão dele, que é  "default" que especificamos acima.

 grunt

Iremos repetir os passos acima para os próximos plugins. Abaixo, coloco a configuração de cada um deles:

Minificação de arquivos CSS

Instalação:

npm install grunt-contrib-cssmin

Configuração:

grunt.initConfig({

   ...
 
   cssmin: {
      minify: {
         expand: true,
         cwd: 'assets/_css/',
         src: ['*.css'],
         dest: 'assets/css/',
         ext: '.min.css'
      }
   }
});

A configuração acima segue a mesma lógica da configuração do uglify.

Colocando a referência e adicionando o plugin na nossa lista de tarefas:

// Plugins
...
grunt.loadNpmTasks('grunt-contrib-cssmin');

// Tarefas
grunt.registerTask( 'default', [ 'uglify', 'cssmin' ] );

Concatenação de arquivos

Instalação:

npm install grunt-contrib-concat

Configuração:

grunt.initConfig({

   ...

   concat: {
      basic: {
         src: ['assets/css/*.min.css'],
         dest: 'assets/css/final.css'
      }
   }
});

A configuração acima pega todos os arquivos css minificados pelo cssmin e cria um arquivo que contém o código de todos eles.

Colocando a referência e adicionando o plugin na nossa lista de tarefas:

// Plugins
...
grunt.loadNpmTasks('grunt-contrib-concat');


// Tarefas
grunt.registerTask( 'default', [ 'uglify', 'cssmin', 'concat' ] );

Otimizando as imagens

Instalação:

npm install grunt-contrib-imagemin

Configuração:

grunt.initConfig({

   ...

   imagemin: {
      png: {
         options: {
            optimizationLevel: 1
         },
         files: [{
            expand: true,
            cwd: 'assets/_img/',
            src: ['**/*.png'],
            dest: 'assets/img/'
         }]
      },
      jpg: {
         options: {
            progressive: true
         },
         files: [{
            expand: true,
            cwd: 'assets/_img/',
            src: ['**/*.jpg'],
            dest: 'assets/img/'
         }]
      }
   }
});

A configuração acima irá otimizar as imagens JPG e PNG. No caso da configuração das imagens PNG, o valor de optimizationLevel vai de 1 a 7, sendo que quanto maior esse valor, mais otimizada a imagem será.

Colocando a referência e adicionando o plugin na nossa lista de tarefas:

// Plugins
...
grunt.loadNpmTasks('grunt-contrib-imagemin');

// Tarefas
grunt.registerTask( 'default', [ 'uglify', 'cssmin', 'concat', 'imagemin' ] );

Finalizando

No final de tudo isso, nosso arquivo Gruntfile.js ficará assim:

module.exports = function(grunt) {

   // Configuração
   grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
 
      uglify: {
         options: {
            mangle: false
         },
         my_target: {
            files: [{
               expand: true,
               cwd: 'assets/_js',
               src: '**/*.js',
               dest: 'assets/js/',
               ext: '.min.js'
            }]
         }
      },
 
      cssmin: {
         minify: {
            expand: true,
            cwd: 'assets/_css/',
            src: ['*.css'],
            dest: 'assets/css/',
            ext: '.min.css'
         }
      },
 
      concat: {
         basic: {
            src: ['assets/css/*.min.css'],
            dest: 'assets/css/final.css'
         }
      },
 
      imagemin: {
         png: {
            options: {
               optimizationLevel: 1
            },
            files: [{
               expand: true,
               cwd: 'assets/_img/',
               src: ['**/*.png'],
               dest: 'assets/img/'
            }]
         },
         jpg: {
            options: {
               progressive: true
            },
            files: [{
               expand: true,
               cwd: 'assets/_img/',
               src: ['**/*.jpg'],
               dest: 'assets/img/'
            }]
         }
      }
   });

   // Plugins
   grunt.loadNpmTasks( 'grunt-contrib-uglify' );
   grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-imagemin');

   // Tarefas
   grunt.registerTask( 'default', [ 'uglify', 'cssmin', 'concat', 'imagemin' ] );

};

Lembre-se de entrar na página dos plugins aqui indicados para otimizar as configurações de acordo com as suas necessidades.

Recomendo também que você dê uma olhada nos demais plugins para descobrir outras possibilidades de automação de tarefas. Certamente lá você encontrará mais coisas legais para os seus projetos!

Até a próxima :D

 

Deixe um comentário

Queremos saber o que você pensa sobre esse post! Ficaremos felizes se você nos deixar um comentário :-)

Tenha em mente que os comentários são moderados, e os links possuem rel="nofollow". Então por favor, não faça spam de palavras-chave, senão o seu comentário será excluído. Obrigado!

 

[3] Comentários  

wallace

Muito Bom esse artigo, explicação excelente, parabéns. Aproveitando o comentário também existe um outro que está em alta agora , que é o Gulpjs parece ser mais simples que o Grunt vale apena da uma conferida.

16-01-2014 às 21:45 Responder

Jonathan Felipe

Aí sim, ótimo post :D

17-01-2014 às 13:53 Responder

Cayo Jesse

Desenvolvi uma ferramenta que gera códigos de Animation do CSS3. Gera várias animações apenas com CSS.

http://cayojs.com.br/efeitos/
As animações são feitas com Keyframes.

Basta selecionar o efeito desejado (são 62 efeitos) e clicar em Executar.

A animação acontecerá conforme o efeito escolhido. O código de todo o efeito aparecerá logo à baixo.

Basta copiar o código e colar em sua folha folha de estilo. Você então poderá chamar a classe do efeito em qualquer elemento HTML, ou chamar o efeito no :hover... ou adicionar a classe no addClass do JQuery... são muitas as formas de fazer isso, você é livre pra brincar e incrementar sua página com belos efeitos.

O resultado é incrível.

Eu utilizo sempre... nos sites que faço... nas landing pages... em tudo.

Neste exemplo, os efeitos acontecem apenas no load da página.
EX: http://www.hotelaeroportoguarulhos.com.br/
Podem utilizar a ferramenta pessoal.

Ahh, é Open Source. não ganho nenhum centavo com isso, apenas estou divulgando esta ferramenta.

Obrigado

05-03-2015 às 18:47 Responder