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

Olá galerinha! Andei pensando sobre um assunto que discuti um dia desses com uns amigos, que sofrem com inúmeras aquisições feita pelo navegador hoje nos projetos da maioria deles. Para solucionar isso, dei umas dicas que vo colocar aqui pra galera começar a pensar em perfomance e velocidade no carregamento da página. Iremos reduzir essas aquisições, juntando arquivos de mesmo tipo, e transformando em um arquivo apenas. Para fazermos isso vamos usar o Grunt pelo qual sou apaixonado. Em nosso index temos as seguintes requisições:O ideal seria que em vez de 2 arquivos ou mais de *.css existisse apenas 1, nele contendo o css de todos os arquivos minificados. O mesmo será feito com os js. Juntando esses arquivos nos iremos poupar requisições, apesar de parecer pouco o montante de arquivos deixaria mais lenta a página, e nós transformando em apenas 1 melhoraria com certeza o carregamento. Outro processo que usaremos para melhorar o carregamento é a minificação. Essa técnica vai consistir em diminuir os temos dos arquivos css e js, removendo os espaços, pulo de linha, colocando tudo isso em um arquivo inline e muito mais coisas que vocês irão perceber, por exemplo trocando funções e variáveis para nomes menores. Já ensinei em aulas passadas como instalar o grunt, mais vamos lá renovo. Abra o seu terminal e dentro da pasta do seu projeto execute

$ npm init

Ele vai executar um assistente que lhe fará perguntas como, nome do projeto autor e etc.

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (projeto)
version: (0.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to package.json:

{
"name": "projeto",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}

Is this ok? (yes)

O resultado final será a criação de um arquivo package.json. Agora que temos o arquivo deveremos começar a instalação do Grunt:

$ sudo npm install grunt —-save-dev

Esse comando irá baixar a versão mais atual do Grunt e irá gravar dentro da pasta node_modules, essa pasta será onde ficará os modelos que usará em seu projeto. Dando continuidade agora iremos instalar a versão client do Grunt com o comando:

$ sudo nem install grunt-cli -g

Outra vantagem de salvarmos as dependências no package.json é que você pode compartilhar seu projeto sem a pasta node_modules, agora execute o comando:

$ npm install

Após isso criaremos o arquivo gruntfile.js vamos começar a configurar as tasks para deixar funcionar o arquivo gruntfile.js

module.exports = function(grunt) {
grunt.initConfig({
/* suas tasks aqui */
});
}

Quando no terminal executarmos grunt ele irá executar o arquivo gruntfile.js e se encarregará de chamar a função criada no arquivo. Logo após isso iremos criar um local onde será colocado as copias do arquivo, e também precisaremos de um plugin para limpar os arquivos antes de copiar. Isso deve ocorrer pois imagina só, você fez modificações nos arquivos ou deletou algo, para que gere uma nova requisição você precisa que a sequencia de pastas e arquivos seja a mesma, por isso de antes de executar o comando copy vc precisa executar o clean, mais primeiro vamos instalar:

$ sudo npm install grunt-contrib-copy --save-dev
$ sudo npm install grunt-contrib-clean --save-dev

Após instalarmos os 2 agora começaremos a configurar as tasks, lembra que lá em cima eu já dei uma prévia de como iremos configurar, e agora vamos aprender de como chamar os plugins no arquivo gruntfile. Iremos fazer a chamada do plugin abaixo das tasks:

/* recebe o objeto grunt como parâmetro*/
module.exports = function(grunt) {
grunt.initConfig({
/* suas tasks aqui */
});

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

};

E agora iremos configurar as tasks para executarmos depois no terminal pra testar o copy e o clean:

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

Depois de feito isso vamos no terminal executar primeiro:

$ grunt copy

E veja que ele vai exibir:

$ grunt copy
Running "copy:public" (copy) task
Created 4 directories, copied 5 files

Done, without errors.

A pasta dist foi criada sendo uma réplica da original. E agora iremos executar o comando:

$ grunt clean

Ele vai exibir:

$ grunt clean
Running "clean:dist" (clean) task
Cleaning dist...OK

Done, without errors.

Se quiser também pode executar uma abaixo da outra, mais eu prefiro criar uma task q iremos chamar de dist para fazer isso automaticamente. Iremos fazer isso no arquivo gruntfile.js usando o seguinte comando:

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

Execute no terminal:

$ grunt dist

$ grunt
Running "clean:dist" (clean) task
Cleaning dist...OK

Running "copy:public" (copy) task
Created 4 directories, copied 5 files

Done, without errors.

Na próxima aula iremos dar finalização e vou mostrar como minificar os arquivos usando Grunt! font: http://tiagoserra.com.br/a-tecnica-mergeconcatenacao-com-grunt-parte1-2/

Deixar um comentário