Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

7. Paralelizando request (hostnames paralelos): Plugin para replace de path

Referente ao curso Performance Web I: otimizando o front-end

por Camila Inácio Belo da Silva
| 314.7k xp | 65 posts

Boa noite instrutor e alunos,

Estava colocando em prática a paralelização de request com hostname paralelo para as imagens, videos e fontes em um bucket do S3. Usei o plugin gulp-s3-upload para fazer o upload dos assets no bucket através do gulp e tentei testar o gulp-assetspath para substituir o path os assets no html /css versão de dist.

Este último plugin pede os domínios antigo e novo e no meu caso queria substituir apenas o path dos assets que referencio para o meu próprio domínio relativamente com assets/**/* em href, src ou url do html/css.

No teste que fiz do gulp-assetspath, usei oldDomain = '/assets', mas ele não está se comportando como eu esperava, pois substituiu referencias de outros domínios também, por isso gostaria de pedir à vocês uma ajuda no uso deste plugin ou uma indicação de outro plugin para o gulp que faça replace do path dos assets locais para um outro hostname.

Poderiam me ajudar?

Esta é a página do gulp-assetspath: https://www.npmjs.com/package/gulp-assetpaths.

Obrigada.

2 respostas
solução!
por Sérgio Lopes
| 605.5k xp | 914 posts
Instrutor

Oi Camila, nunca usei o gulp-assetpaths. Pelo que você descreveu, parece ser uma limitação dele mesmo.

Já me indicaram (mas não usei ainda em projeto prático) o gulp-cdnify. Lendo a documentação agora, ele parece fazer bem o que você precisa e parece ser bem fácil customizar. Às vezes vale tentar:

https://www.npmjs.com/package/gulp-cdnify

Abraço

por Camila Inácio Belo da Silva
| 314.7k xp | 65 posts

Obrigada, deu certo com cdnify! Ele só não suporta extensão .js, mas para esta deu para resolver com variável de ambiente (com a url base dos assests). As tarefa do gulp ficou assim:

gulp.task('cdnify', ['s3-upload'], function () {
    var env = $.util.env.env;
    var bucket = ... ';

    return gulp.src([
      'dist/**/*.{css,htm,html}'
    ])
    .pipe($.cdnify({
        base: '',
        html: {
            'img[src]': 'src',
            'link[rel=stylesheet]': 'href',
            'script[src]': 'src',
            'a[href]': 'href',
            'video[poster]': 'poster',
            'source[src]': 'src',
            'videos[path]': 'path'
        },
        rewriter: function(url, process) {
            if (/^(((\.{2}\/)+|\/)?assets\/(fonts|images|videos))/.test(url)) {
                return 'https://s3.amazonaws.com/' + bucket + url.split('assets')[1];
            } else {
                return process(url);
            }
        }
    }))
    .pipe(gulp.dest('dist'))