Forçar atualização do JavaScript usando Gulp

Todos sabemos como o uso de bibliotecas JavaScript vem crescendo nos últimos anos, muito se deve por conta do Node que permitiu a evolução da linguagem, assim como o uso de padrões na construção de apps no lado cliente.

 Um dos grandes problemas do uso de js é o cache que muitas vezes mascaram mudanças feitas de uma versão para outra, quase nenhum usuário é atento á limpar o cache de tempos em tempos.

Existem varias maneiras de evitar esse problema, uma delas é incluir uma tag no header de sua pagina informando quando o cache deve expirar. Ex:

               <META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">

Outra opção é o versionamento dos arquivos JS e CSS para forçar ao browser busca-los novamente quando perceber que existe um arquivo novo no app.

Essa foi a solução que adotamos para nosso sistema, com o uso do gulp para fazer esse controle. Explicarei nesse post as bibliotecas necessárias para fazer isso funcionar no seu problema. Para isso irei considerar que quem está lendo esse artigo está usando uma aplicação com NodeJs e Gulp.

Decidimos usar o timestamp para dar a "versão" dos arquivos. Para fazer a atualização do nome dos arquivos no nosso index.html usamos a biblioteca gulp-html-replace para fazer o replace do nome dos arquivos.

Para instala-la basta um simples Npm install:

npm install --save-dev gulp-html-replace

É preciso de importa-la também no seu arquivo gulpfile.js.

var htmlreplace = require('gulp-html-replace');

Crie uma variável global chamada de timestamp para recuperar o horário local e  adiciona-la nos arquivos que deseja "versionar". 

var timestamp = new Date().getTime();

Então na hora que eu faço o build meu arquivo assume a forma de algo assim: app_1475179620498.js assim como o css.

Na hora da construção do app eu inclui a seguinte tarefa para fazer o replace do nome dos arquivos:

gulp.task('htmlreplace', function() {

     gulp.src( '/index.html')

       .pipe(htmlreplace({

           'css_vendor': 'css/'+ filename.vendor.css,

           'css_app': 'css/'+  filename.app.css,

           'js_vendor': 'js/'+  filename.vendor.js,

           'js_app': 'js/'+  filename.app.js

       }))

       .pipe(gulp.dest('./dist'));

    });

No metódo task eu inicio a tarefa de replace passando uma função como parametro, o src é onde está localizado o arquivo que quero modificar. pipe é a função propriamente dita.
css_vendor, css_app, js_vendor, js_app são chaves que incluirei no index.html para que sejam trocados os nomes dos arquivos pelos nomes novos criados com um timestamp.

O filename "ponto" alguma coisa são variáveis que estarão armazenando o novo nome dos arquivos que foram criados.

Por fim a mágica onde tudo acontece, na página que você quer que sejam trocados os nomes do arquivos, voc~e incluirá tags que funcionarão como chaves. Tal como a imagem abaixo. 

Notem que onde contém as chaves   <!-- build:css_vendor -->,  <!-- build:css_app -->, <!-- build:js_vendor -->,

<!-- build:js_app -->  é onde será trocado o nome do arquivo pelo novo.
Resultado final é esse da imagem abaixo.

É isso, espero que esse pequeno e simplificado artigo seja util para quem quiser utilizar uma estrategia para forçar o browser a buscar novo arquivo js/css sempre que uma nova versão de sua aplicação for publicada.

x