Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
10
respostas

Encontrar um arquivo com nome aleatório em GULP

Boa tarde,

Implementei a rotina de minificação nos meus arquivos js e css e esta funcionando certinho. Agora coloquei um plugin chamado gulp-rev para gerar nomes aleatórios para forçar o navegador a fazer a requisição do arquivo de novo, quando necessário.

A minha duvida é como pegar o nome desse arquivo gerado para poder colocar na index para ser chamado??

Atualmente meu código esta assim:

gulp.task('build-css', function() {
    return gulp.src(scriptsCss)
        .pipe(concat('index.min.css'))
        .pipe(cssmin())
        .pipe(autoprefixer())
        .pipe(nameRandom())
        .pipe(gulp.dest(output + 'css'))
        .pipe(nameRandom.manifest())
        .pipe(gulp.dest(output + 'css'));
});

gulp.task('build-html', function(){
    return gulp.src('version-client/app/views/shared/**/*.php')
        .pipe(htmlReplace({
            css: '<link type="text/css" rel="stylesheet" href="{{asset(\'css/' + 'teste' + '\')}}" />',
            js: '<script type="text/javascript" src="{{asset(\'js/' + 'teste' + '\')}}"></script>'
        }))
        .pipe(gulp.dest('version-client/app/views/shared'));
});
10 respostas

Olá! Se não me engano, você precisa usar um módulo chamado htmlReplace. Todavia, se você tivesse usando o usemin, ele suporta versionamento de arquivo e fará isso para você.

Olá Flávio. Eu tentei usar o usemin, mas ele quebra ao ler o {{assets()}} e acabei deixando ele de lado e resolvi fazer dessa forma.

Achei um plugin chamado filenames que deveria me trazer os nomes dos arquivos, porem o retorno esta vindo null. Tem alguma idéia do que pode ser??

filenames = require('gulp-filenames');
gulp.src('version-client/public/js/*.min.js')
        .pipe(filenames('javascript'))
        .pipe(gulp.dest('version-client/public/js'));
    var nameJs = filenames.get("javascript");

    gulp.src('version-client/public/css/*.min.css')
        .pipe(filenames('stylepage'))
        .pipe(gulp.dest('version-client/public/css'));
    var nameCss = filenames.get("stylepage");

Oi Laiane. Eu não conheço esse plugin, mas se ele esta retornando null é porque a chave stylepage não esta sendo encontrada. Você viu se no HTML essa chave precisa estar envolvida em algum caracter especial?

Eu consegui usando um outro plugin chamado gulp-tap. O único problema é a variavel nameCss e nameJs dentro do htmlReplace são interpretadas com valores nulos. Mesmo eu tendo valor correto no console dentro do tap.

gulp.task('build-html', function(){
    var nameCss = '',
        nameJs = '';

    gulp.src('version-client/public/css/*.min.css')
        .pipe(tap(function(file, t) {
            nameCss = file.relative;
            console.log(nameCss);
        }));

    gulp.src('version-client/public/js/*.min.js')
        .pipe(tap(function(file, t) {
            nameJs = file.relative;
            console.log(nameJs);
        }));

    return gulp.src('version-client/app/views/shared/**/*.php')
        .pipe(htmlReplace({
            css: '<link type="text/css" rel="stylesheet" href="{{asset(\'css/' + nameCss + '\')}}" />',
            js: '<script type="text/javascript" src="{{asset(\'js/' + nameJs + '\')}}"></script>'
        }))
        .pipe(gulp.dest('version-client/app/views/shared'));
});

Fazendo a função da forma abaixo, funciona o/

gulp.task('build-html', function(){
    console.log('teste');
    return gulp.src('version-client/public/css/index-*.min.css')
        .pipe(tap(function(file, t) {
            var nameCss = file.relative;
            gulp.src('version-client/app/views/shared/**/*.php')
                .pipe(htmlReplace({
                    css: '<link type="text/css" rel="stylesheet" href="{{asset(\'css/' + nameCss + '\')}}" />'
                }))
                .pipe(gulp.dest('version-client/app/views/shared'));
        }));
});

Mas se eu chamo assim:

gulp.start('build-img', 'build-js', 'build-css', 'clean-files', 'build-html');

Ela não funciona :(. mas se chamo só ela vai

Tem alguma tarefa assíncrona que esta sem o return? Se tiver, pode dar problema nessa tarefa ai.

Pelo que consigo ver todas estão com o return.

Coloquei o código completo no github para ficar mais facil

https://github.com/laianehermes/gulp/blob/master/gulpfile.js

Quem depende dessa task? Já experimentou colocá-la como dependência? Lembre-se que a função task pode receber três parâmetros, e quando recebe o segundo são as taks que a task atual precisa que seja executada antes.

solução!

Olá, consegui resolver o problema alterando as dependências e finalizei o que eu precisava.

Muito obrigada pela ajuda Flávio.

Vou deixar o script no gitbub caso alguém queira dar uma olhada.

https://github.com/laianehermes/gulp/blob/master/gulpfile.js

Só mais uma duvida... Tem plugin para conectar com o svn?? Seria muito bom baixar direto do repositório hehe