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

Concatenação subdiretórios

Pessoal, com base no arquivo gulpfile.js da video aula, não estou conseguindo concatenar os arquivos css e js dos arquivos html's dos subdiretorios:

Exemplo: Quero concatenar os mesmos css's da home que se encontram no diretorio site/cardapio/index.html

Alterei o codigo original abaixo que funciona normalmente no html raiz:

gulp.task('useref', function () {
    return gulp.src('site/index.html')
        .pipe($.useref())
        .pipe($.if('*.html', $.inlineSource()))
        .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
        .pipe($.if('*.js', $.uglify()))
        .pipe($.if('*.css', $.cssnano({safe: true})))
        .pipe(gulp.dest('dist'));
});

para:

gulp.task('useref', function () {
    return gulp.src('site/**/*.html')
        .pipe($.useref())
        .pipe($.if('*.html', $.inlineSource()))
        .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
        .pipe($.if('*.js', $.uglify()))
        .pipe($.if('*.css', $.cssnano({safe: true})))
        .pipe(gulp.dest('dist'));
});

e apresenta esse erro :


F:\buffet2  (curso-alura-site@0.0.1)
λ gulp useref
[13:42:24] Using gulpfile F:\buffet2\gulpfile.js
[13:42:24] Starting 'useref'...
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: Error: File not found with singular glob: F:\buffet2\site\cardapio\css\reset.css
    at DestroyableTransform.<anonymous> (F:\buffet2\node_modules\gulp-useref\index.js:65:28)
    at emitOne (events.js:101:20)
    at DestroyableTransform.emit (events.js:188:7)
    at emitOne (events.js:101:20)
    at Through2.emit (events.js:188:7)
    at OrderedStreams.<anonymous> (F:\buffet2\node_modules\gulp-useref\node_modules\glob-stream\index.js:140:20)
    at emitOne (events.js:96:13)
    at OrderedStreams.emit (events.js:188:7)
    at emitOne (events.js:96:13)
    at DestroyableTransform.emit (events.js:188:7)

F:\buffet2  (curso-alura-site@0.0.1)
λ

Alguém que já fez o curso de gulp, poderia me ajudar com o script por favor?

Desde já, agradeço a atenção.

2 respostas
solução!

Oi Jefferson,

Pelo erro que o gulp deu ele não está achando o arquivo F:\buffet2\site\cardapio\css\reset.css. Provavelmente ele está em F:\buffet2\site\css\reset.css , estou certo?

Se sim, de uma olhada lá no html do cardápio e veja se as tags <link> estão com o href pra css/reset.css. Se estiverem o gulp-useref vai procurar a pasta css dentro da pasta cardapio. Pra resolver isso acho que é só mudar os href pra /css/reset.css ( com / no começo).

Bom dia Artur, muito obrigado pela dica, você estava certo!

Entretanto somente ( com / no começo ) ele continuou não achando os arquivos css e continuando buscando no endereço F:\buffet2\site\cardapio\css\reset.css.

Funcionando com o código abaixo na página html de cardápio:

<!-- build:css /css/combined.css -->
        <link type="text/css" rel="stylesheet" href="../css/reset.css">
        <link type="text/css" rel="stylesheet" href="../css/plugins.css">
        <link type="text/css" rel="stylesheet" href="../css/style.css">
        <link type="text/css" rel="stylesheet" href="../css/color.css">        
        <!-- endbuild -->

Funcionou com um ../ antes.

Muito obrigado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software