A técnica merge(concatenação) com Grunt – parte2.2

blog tiagoserra grunt merge

Olá galerinha! Vamos dar continuidade com merge(concatenação) usando Grunt! Na Parte 1.2 nós falamos como criar uma cópia, e antes limpar o último conteúdo. Nosso arquivo por enquanto ta assim:

module.exports = function(grunt) {
    grunt.initConfig({
       copy: {
         public: {
           cwd: 'public',
           src: '**',
           dest: 'dist',
           expand: true
         }
       },
       clean: {
          dist: {
          src: 'dist'
          }
       }
});

grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
};

Agora iremos falar de vinificação e concatenação.

Toda vez que solicitamos uma página, além da requisição feita para ter de nosso servidor, realizamos outras para baixar recursos externos como css’s, scripts e etc. Quando temos uma página complexa esse número de aquisições aumenta assim atrapalhando na performance da página.

Temos que ter cuidado pois cada navegador tem um limite de aquisições simultâneas e ainda bem reduzido para dispositivos móveis. Se chegar ao limite o próximo recurso baixado terá que esperar que uma das requisições acabe. Lembrando também que temos que nos preocupar com latência, que afeta muito os dispositivos móveis.

Tendo todos esses cuidados entramos na técnica merge, que é apenas a prática de juntar todos esses arquivos de um mesmo tipo em um só. Um exemplo prático é juntando todos css, ou todos js, assim criando apenas um css, e um js.

Mitificação e merge de arquivos js e css com certeza é uma das tarefas mais executadas no Grunt. Para usarmos essa técnica temos que instalar alguns plugins. Os plugins que iremos utilizar são grunt-contrib-concat, o grunt-uglify e o grunt-contrib-cssmin, mais lembrando que temos que instalar eles através do npm e depois carrega-los no gruntfile.js:

$ npm grunt-contrib-concat —save-dev
$ npm grunt-contrib-uglify —save-dev
$ npm grunt-contrib-cssmin —save-dev

No arquivo gruntfile.js:

grunt.loadNpmTasks(‘grunt-contrib-concat’);
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
grunt.loadNpmTasks(‘grunt-contrib-cssmin’);

Para gerar as configurações dos plugins usaremos o grunt-usemin.

O grunt-usemin é um plugin que vai ajudar muito a configuração das tasks envolvidas no processo de merge e minificação. Só iremos configurar sua task para que ele gere automaticamente os parâmetros de configuração para os três plugin que vimos.

$ nem install grunt-usemin —save-dev

Agora vamos registrar o grunt-usemin no gruntfile.js e configurar duas tasks distintas.

A primeira useminPrepare que vai criar as configurações dinâmicas para grunt-contrib-conct, grunt-contrib-uglify, grunt-contrib-cssmin. O primeiro plugin concatenará os arquivos e os dois últimos irão minificar os css e ja.

A segunda task usemin alterará nossos arquivos HTML fazendo com que eles apontem para os arquivos concatenados e minificados definidos nos comentários especiais, pois foram criados antes pela task useminPrepare.

No gruntfile.js:

module.exports = function(grunt) {

   grunt.initConfig({
      /* Copia os arquivos para o diretório 'dist' */
      copy: {
         public: {
           expand: true,
           cwd: 'public',
           src: '**',
           dest: 'dist'
         }
     },

     clean: {
          dist: {
              src: 'dist'
          }
     },

     useminPrepare: {
       html: 'dist/**/*.html'
     },

     usemin: {
       html: 'dist/**/*.html'
     }
  });


  //registrando task para minificação

  grunt.registerTask('dist', ['clean', 'copy']);

  grunt.registerTask('minifica', ['useminPrepare', 
                                  'concat', 'uglify', 'cssmin', 'usemin']);

  // registrando tasks
  grunt.registerTask('default', ['dist', 'minifica']);

  // carregando tasks
  grunt.loadNpmTasks('grunt-contrib-copy'); 
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-usemin'); 
}

Agora teste no terminal:

grunt

E nossa task default será executada aplicando a concatenação e minificação de arquivos na pasta ‘dist’.

Em breve escreveremos mais sobre grunt. Se tiverem alguma dúvida só mandarem email. Valew!

http://tiagoserra.com.br/a-tecnica-mergeconcatenacao-com-grunt-parte2-2/

Deixe uma resposta

Open chat