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

Configurando templates do gulp-usemin para scripts locais e externos

Bom dia,

Não estou conseguindo configurar mais de um template no html, para rodar por exemplo:

<head>
  <meta charset="UTF-8">
  <title></title>

  <!--build:css css/styles.min.css-->
  <link rel="stylesheet" href="css/style-one.css">
  <!--endbuild-->

  <!--build:css2 css/style-libs.min.css-->
  <link rel="stylesheet" href="../node_modules/bootstrap.css">
    ...
  <!--endbuild-->

</head>

E no script:

// Optimizing CSS and JavaScript 
gulp.task('useref', function() {

    return gulp.src('src/*.html')
    .pipe(useref({
        css:[minifycss(),autoprefixer('last 2 version')],
        css2:[],
        js:[uglify()]
        }))
    .pipe(gulp.dest('dist'));
    });

É desta forma que explica na documentação, mas não funciona no meu projeto.

Segue o link do repositório:

https://github.com/alphatunning/start-static

Não sei mais o que pode estar acontecendo, se alguem puder me ajudar ficarei muito agradecido!

Obrigado!

8 respostas

Boa tarde Bruno!

Parece haver um problema. Veja seu metadado

<!--build:css css/styles.min.css-->

É preciso haver um espaço depois do <!-- e antes do -->:

<!-- build:css css/styles.min.css -->

Consegue enxergar a diferença? Nesse sentido, verifique cada metadado (comentário especial) que você colocou no seu projeto.

Ainda não funciona, o problema acontece quando executo minha task de build ok, mas se eu coloco apenas 1 template ele funciona, exemplo:

 <!-- build:css css/styles.min.css -->
  <link rel="stylesheet" href="css/style-one.css">
  <!--endbuild-->

Mais de 1 template para o css não funciona:

  <!-- build:css css/styles.min.css -->
     <link rel="stylesheet" href="css/style-one.css">
  <!-- endbuild -->

  <!-- build:css2 css/styles-libs.min.css -->
    <link rel="stylesheet" href="../node_modules/bootstrap.css">
  <!-- endbuild -->

gera o seguinte erro:

C:\xampp\htdocs\start-static>gulp build
[13:29:00] Using gulpfile C:\xampp\htdocs\start-static\gulpfile.js
[13:29:00] Starting 'clean'...
[13:29:00] Finished 'clean' after 26 ms
[13:29:00] Starting 'build'...
[13:29:00] Starting 'sass'...
[13:29:00] Starting 'useref'...
[13:29:00] Starting 'images'...
[13:29:00] Starting 'fonts'...
[13:29:00] Finished 'build' after 13 ms
[13:29:00] Finished 'fonts' after 5.38 ms
C:\xampp\htdocs\start-static\node_modules\useref\lib\refManager.js:75
      ref = bb.handler(blockContent, bb.target, bb.attbs, bb.alternateSearchPaths);
               ^

TypeError: bb.handler is not a function
    at Object.getRef (C:\xampp\htdocs\start-static\node_modules\useref\lib\refManager.js:75:16)
    at C:\xampp\htdocs\start-static\node_modules\useref\lib\transformReferences.js:20:18
    at Array.forEach (native)
    at module.exports (C:\xampp\htdocs\start-static\node_modules\useref\lib\transformReferences.js:14:23)
    at module.exports (C:\xampp\htdocs\start-static\node_modules\useref\index.js:10:26)
    at C:\xampp\htdocs\start-static\node_modules\gulp-useref\index.js:167:22
    at Stream.<anonymous> (C:\xampp\htdocs\start-static\node_modules\event-stream\index.js:318:20)
    at _end (C:\xampp\htdocs\start-static\node_modules\through\index.js:65:9)
    at Stream.stream.end (C:\xampp\htdocs\start-static\node_modules\through\index.js:74:5)
    at DestroyableTransform.onend (C:\xampp\htdocs\start-static\node_modules\readable-stream\lib\_stream_readable.js:570:10)
    at DestroyableTransform.g (events.js:292:16)
    at emitNone (events.js:86:13)
    at DestroyableTransform.emit (events.js:185:7)
    at DestroyableTransform._transform (C:\xampp\htdocs\start-static\node_modules\gulp-useref\index.js:181:27)
    at DestroyableTransform.Transform._read (C:\xampp\htdocs\start-static\node_modules\readable-stream\lib\_stream_transform.js:182:10)
    at DestroyableTransform.Transform._write (C:\xampp\htdocs\start-static\node_modules\readable-stream\lib\_stream_transform.js:170:83)

Alguém??

Esta me parecendo um bug da versão. Você esta usando exatamente a versão do Gulp e dos plugins que uso no curso? A mensagem de erro não deixa clara o problema.

Espere um pouco, se não me falha a memória, isso aqui não esta correto:

 <!-- build:css css/styles.min.css -->
  <link rel="stylesheet" href="css/style-one.css">
  <!--endbuild-->

  <!-- build:css2 css/style-libs.min.css -->
  <link rel="stylesheet" href="../node_modules/bootstrap.css">
    ...
  <!-- endbuild -->

Você quer dois arquivos CSSs no final, certo? Então, experimente fazer:

 <!-- build:css css/styles.min.css -->
  <link rel="stylesheet" href="css/style-one.css">
  <!-- endbuild -->

  <!-- build:css css/style-libs.min.css -->
  <link rel="stylesheet" href="../node_modules/bootstrap.css">
    ...
  <!-- endbuild -->

O metadado continua o mesmo, não se cria um novo. Pegou a ideia?

solução!

Obrigado Flavio, sua sugestão me ajudou a encontrar o problema!

Quando fui conferir a versão, vi que esqueci de trocar uma referência de um plugin que estava testando veja..

   .pipe(---->useref<----({
        css:[minifycss],
        css2:[],
        js:[uglify]
        }))
    .pipe(gulp.dest('dist'));
    });

Olha ali o useref, por mais incrível que pareça eu fiquei olhando horas para esse código e não enxerguei isso kk , que ódio..

Foi só atualizar a referência:

   .pipe(usemin({
        css:[minifycss],
        css2:[],
        js:[uglify]
        }))
    .pipe(gulp.dest('dist'));
    });

Sim sua sugestão funcionaria, de manter o mesmo metadado para os dois arquivos, mais ai perderia o controle de quais plugins usaria para determinado tipo de estilo e script, por exemplo, geralmente plugins do npm não precisam de minificar e autoprefixar , mais os meus arquivos css precisam, se eu uso o mesmo metadado, eu estaria fazendo o processamento para todos os recursos, agora quando separo meus metadados consigo definir o que eu quero rodar em cada tipo de recurso.

Exemplo:

// Optimizing CSS and JavaScript 
gulp.task('usemin', ['sass'], function() {

    return gulp.src('src/**/*.html')
    .pipe(usemin({
        css:[minifycss, autoprefixer, "qualquer outra coisa"],
        csslibs:[],
        js:[uglify],
        jslibs:[]
        }))
    .pipe(gulp.dest('dist'));
    });

E no html consigo modular mais e ter um controle maior sobre os recursos..

Perfeito, entendi o seu caso. Fico mais contente ainda que descobriu o problema. Vou marcar sua resposta como solução para que você ganhe os pontos!