Existem duas abordagens gerais para melhorar o desempenho do site com o uso de ferramentas de desenvolvedor.
- Você pode usar ferramentas online
- Você pode usar ferramentas de desenvolvimento web de código aberto em sua máquina
A primeira abordagem é direta: pegue todos os seus arquivos e use as ferramentas online para fazer o que for necessário (lint, minify, concatenate, etc.).
Feito. Bem… não exatamente. E se você tiver 50 arquivos para minificar?
Ou 200? E se você mudar seu código? Você vai repetir essa tarefa várias vezes?
É por isso que abordarei a segunda abordagem, porque é mais flexível e escalável. No entanto, é uma abordagem mais complicada, especialmente no início. Usaremos o Gulp , um executor de tarefas JavaScript (semelhante ao Grunt), que fará todo o trabalho para nós.
(Se você não sabe o que são ferramentas de desenvolvedor como Gulp, Grunt, Bower e Yeoman, confira minha postagem no blog onde dou uma breve introdução sobre elas.) Para melhorar a velocidade e o desempenho do site, é isso que faremos:
Configurando o Gulp
A primeira coisa a fazer é configurar um ambiente de trabalho do projeto. Tudo o que fiz foi pegar todos os arquivos do meu site e movê-los para uma pasta chamada srcno meu computador. A propósito, você precisará do Node (e do npm) instalado para poder usar o Gulp da maneira que descreverei.
Consulte Como instalar o Node.js. Primeiro, precisamos instalar o Gulp globalmente para que seja acessível em qualquer lugar do nosso computador. Basta abrir seu terminal/prompt de comando e digitar:
npm install –global gulp
Em seguida, vá para a pasta do seu projeto e instale-o em suas dependências de desenvolvimento.
npm install –save-dev gulp
Depois disso, você verá uma nova pasta que será criada automaticamente para você chamada node_modules.
É onde o Gulp e todos os seus outros módulos Node para o projeto serão armazenados. Há apenas mais uma etapa a ser executada antes de executar o Gulp: precisamos configurar um arquivo de configuração para que o Gulp saiba quais tarefas executar em nossos arquivos. E isso é tão fácil quanto criar um arquivo chamado gulpfile.js em sua pasta raiz com qualquer editor de texto ou editor de código-fonte.
Aqui está o conteúdo inicial de gulpfile.js:
var gulp = require(‘gulp’); gulp.task(‘default’, function () {});
No momento, ele não está fazendo nada, mas você ainda pode executá-lo. Basta digitar:
gulp
e você deve obter uma saída como esta:
[14:12:14] Starting ‘default’… [14:12:14] Finished ‘default’ after 72 ?s
Agora que temos o Gulp pronto, o próximo passo é criar as tarefas do Gulp para fazer todo o trabalho para nós.
Minificando arquivos CSS e JS
OK, vamos fazer algumas coisas com o Gulp!
Primeira tarefa: Minificando nossos arquivos CSS e JS. O processo de minificação, o que ele faz basicamente, é remover todos os espaços em branco, guias, retornos de carro, novas linhas, comentários e outros caracteres desnecessários de nossos arquivos. Para JavaScript, também alterará os nomes dos objetos para nomes mais curtos.
A minificação é realizada para obter um tamanho de arquivo muito pequeno, preservando todas as nossas regras de estilo e funcionalidade JS. Para minimizar nossos arquivos, precisaremos instalar módulos de nó que nos ajudarão na tarefa. Vamos instalar o pacote gulp-minify-css , que irá minificar nossos arquivos CSS.
Em seguida, usaremos o pacote gulp-uglify para nossos arquivos JavaScript.
npm install –save-dev gulp-minify-css npm install –save-dev gulp-uglify
Agora que temos nossos módulos necessários, temos que criar a tarefa para cada um. Na verdade, podemos fazer tudo dentro da nossa tarefa padrão , mas prefiro fazer uma tarefa separada para cada tipo de arquivo. Dessa forma, manteremos nosso código mais limpo, mais fácil de ler e manter e, se quisermos, podemos executar a tarefa para os arquivos CSS ou JS separadamente.
Vamos adicionar nossos módulos minify-css e gulp-uglify ao topo do nosso arquivo gulpfile.js.
var minifycss = require(‘gulp-minify-css’); var uglify = require(‘gulp-uglify’);
Vamos criar algumas tarefas. Isto é o que eles vão fazer:
- Leia todos os arquivos .css e .js
- Minimize o código-fonte dos arquivos
- Exporte a saída para outra pasta chamadadist
// CSS minification task gulp.task(‘css’, function() { return gulp.src(‘src/css/*.css’) .pipe(minifycss()) .pipe(gulp.dest(‘dist/css’)); }); // JS minification task gulp.task(‘js’, function() { return gulp.src(‘src/js/*.js’) .pipe(uglify()) .pipe(gulp.dest(‘dist/js’)); });
Todos os arquivos processados irão para dentro da dist pasta após a execução das tarefas. Emitir o gulpcomando novamente em seu terminal/prompt de comando criará a distpasta, com as pastas css e js dentro que conterão nossos arquivos minificados.
