Dúvida no Ex. 5 da Aula 2 - Minificação e concatenação

Quando você recebe essa mensagem é porque o usemin não foi capaz de extrair os metadados da página .html.

Dê uma olhada com tripla atenção ao quadrado vezes 1000 de que na sua página html você adicionou corretamente os metadados através dos comentários especiais.

Aguardo seu feedback.

Aliás, você colou seu código com um caracter estranho, o <. Além disso, você não pode postar o código assim se não ele fica ilegível. Eu alterei e envolvi seu código em três backsticks. Dê uma olhada nas dicas de formatação para ficar fera na formatação de código.

Flavio, tudo bem?

Eu não consegui colocar o bloco de texto com os três backsticks, por isso coloquei o ">" e resolveu o problema.

Enfim, eu olhei o html que você disse, mas eles estão corretos,

   <!-- build:css css/index.min.css  -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- endbuild -->

    <!-- build:js js/index.min.js -->
    <script src="js/index.js"></script>
    <!-- endbuild -->

PS: agora usando o bracksticks funcionou, acho que estava usando o errado.

Pois é, eu estou olhando seu código e aparentemente está ok. Vou te pedir uma coisa que parece absurda mais não é. Sabe o código desses comentários que você mostrou para mim? Apaga e escreve novamente. Às vezes um editor ogro coloca um lixinho e ferra com ele.

O problema é que o useminPrepare não está gerando as configurações para o concat. Quando isso acontece é quando o metadato tá errado ou quando o useminPrepare não encontra nenhum arquivo html. Relaxa, a gente descobre.

Aguardo seu feedback.

Há só uma coisinha, será que você não adicionou sem querer o metadado em dist? Tem que usar o metadado na pasta original! Custa nada verificar né :)

É já olhei um punhado de vez, já ví a vídeo aula, e ta tudo igual ( bom deveria né ) ... Não sei mais o que fazer.

Ele nem está gerando a pasta dist, então não tem como eu ter colocado no html dela.

Bom dei um npm install e quando dou o comando grunt ele da o erro agora...

Loading "cssmin.js" tasks... ERROR
>> Error: Cannot findo module 'clean-css'

Running "clean:dist" (clean) task

> 0 paths cleanned.

Running "copy:public" (copy) task

Warning: Task "cssmin" not found. Use --force to continue.

Aborted due to warnings.

Bom minha dúvida não está solucionada, não sei porque foi marcada como solucionada... :(

Alguém marcou indevidamente...

Então deixa eu entender. Agora está acontecendo outro erro diferente do que voce me informou?

Vc esta digitando as mensagens de erro ou cortando e colocando? Pergunto isdo porque tem texto que não faz sentido na mensagem de erro.

Vou te pedir para colar novamente seu Grunt file. Sobre o npm install ele deve ser rodado dentro da pasta do projeto. Se rodar fora ele não baixa as dependências.

Oi João. ..Aguardo seu Feedback.

Bom dia Flávio, desculpa a demora, é que ontem tive problemas com a internet em casa.

Enfim, eu estou dando o comando grunt dentro da pasta public, onde está a pasta node_modules, gruntfile e o package

Este último erro que te mostrei eu digitei, porque nao ta dando pra copiar e colocar.

Arquivo GruntFile

module.exports = function(grunt) {

    grunt.initConfig({
        /* Copia os arquivos para o diretório 'dist' */
        copy: {
            public: {
                expand: true,
                cwd: 'public',
                src: '**',
                dest: 'dist'
            }
        },
        clean: {
            dist: {
                src: 'dist'
            }
        },
        useminPrepare: {
            html: 'dist/**/*.html'
        },
        usemin: {
            html: 'dist/**/*.html'
        }
    });

    //registrando task para minificação
    grunt.registerTask('dist', ['clean', 'copy']);
    grunt.registerTask('minifica', ['useminPrepare',
        'concat', 'uglify', 'cssmin', 'usemin'
    ]);

    // registrando tasks
    grunt.registerTask('default', ['dist', 'minifica']);

    // carregando tasks
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-usemin');
}

O Grunt file não é para estar dentro da pasta public. É para estar dentro da pasta do projeto. Não se mistura arquivos de infra com arquivos que vão para o cliente.

Faça como indico no curso, colocando o Gruntfile.js dentro de projeto.

Aguardo sei retorno.

Flávio, resolveu em partes, coloquei os arquivos gruntfile, packages e a pasta node modules dentro da pasta projeto, ele gerou a pasta dist ( que antes não estava nem gerando ) mas ele não minificou os arquivos e deu o seguinte erro..

Loading "cssmin.js" tasks... ERROR
>> Error: Cannot findo module 'clean-css'

Running "clean:dist" (clean) task

> >1 path cleanned.

Running "copy:public" (copy) task
Created 3 directories, copied 5 files
Warning: Task "cssmin" not found. Use --force to continue.

Cole o conteúdo do seu package.json. json aqui.

{
  "name": "public",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-clean": "^1.0.0",
    "grunt-contrib-concat": "^1.0.0",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^1.0.1",
    "grunt-contrib-uglify": "^1.0.1",
    "grunt-usemin": "^3.1.1"
  }
}

Eu preciso da mensagem de erro. ..essa aqui tá informando coisa absurda

Loading "cssmin.js" tasks... ERROR
>> Error: Cannot findo module...

Deve ser a que você está digitando porque find esta escrito errado. É só copiar e colar do terminal.

Loading "cssmin.js" tasks...ERROR
>> Error: Cannot find module 'clean-css'

Running "clean:dist" (clean) task
>> 1 path cleaned.

Running "copy:public" (copy) task
Created 3 directories, copied 5 files
Warning: Task "cssmin" not found. Use --force to continue.

Aborted due to warnings.

Agora consegui fazer copiar e colar do terminal.... Agora está certinho, desculpe meu erro...

Se não sabe como copiar e colar do terminal do Windows segue um link que explica

https://www.todoespacoonline.com/post.php?id=293

É eu olhei por esse site mesmo, mesmo assim obrigado pela dica :)

Você vai fazer o seguinte : vai apagar a pasta node_modules.

Entre no terminal dentro da pasta projeto e execute npm install para baixar os módulos novamente e tente.

Atenção. ..vc está usando node 4 ou Node 5? Se for 5 não pode.. é versão instável. Desinstale e instale a 4.

Testa tudo e me passa um Feedback

node --version
 v4.4.1

Flávio, fiz isso tudo que me falou e deu certo \o/ \o/ . Uma dúvida: Porque eu tive que excluir a pasta node_modules e baixá-la novamente? Eu já não tinha todas as dependências?

Obrigado

Porque não sei os passos que você adotou...Se havia baixado realmente. Daí quis começar do zero para ter certeza.

Sucesso e bom estudo!

Para aqueles que mesmo se baseando na solução apontada pelo Flávio não conseguiram resolver o problema abaixo:

Configuration changed for concat, uglify, cssmin
 No "concat" targets found.
Warning: Task "concat" failed. Use --force to continue.

a solução é adicionar às tasks concat, uglify e cssmin a substask generated:

grunt.registerTask('build', [
  'useminPrepare',
  'concat:generated',
  'cssmin:generated',
  'uglify:generated',
  'usemin'
]);

Esta solução funcionou nas versões do node 4.7.0, 5.12.0 e 6.2.1.