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

Lixo após Minificação e Concatenação

Olá Pessoal,

Consegui rodar e fazer tudo funcionar conforme a aula de minificação e concatenação ensina, porém na minha pasta de destino do css e js está ficando os demais arquivos css e js não minificados.

Acredito que seja por conta das tasks da aula 1 que faz a copia desses arquivos. Porém se eu retirar essa task, a task da aula 2 para de funcionar.

Então o que devo fazer? Devo copiar os arquivos, faço a concatenação e minificação e depois crio alguma task para deletar os arquivos não minificados que foram copiados para a pasta de distribuição?

Como crio uma tarefa para remover todos os arquivos não minificados da pasta css que estão na pasta dist? Vou precisar fazer o mesmo com a pasta js, como fazer?

obrigado

3 respostas
solução!

Vc terá que criar uma task com clean e listar arquivo por arquivo que deseja apagar. Ou pode apagar quem não tenha mim no nome.

Ou vc não cria copia e altera os arquivos originais. Em produção se faz assim. Só coloquei a pasta dist para o aluno não ter que voltar os arquivos originais do backup.

A primeira opção é melhor para mim, até pq alterar os arquivos originais depois fica fazer debug é praticamente impossível né?

Obrigado

"Vc terá que criar uma task com clean e listar arquivo por arquivo que deseja apagar. Ou pode apagar quem não tenha min no nome."

Como sugerido pelo Flávio você pode manter todos os arquivos que foram minificados, identificados com o sufixo min, e remover todos os outros que não contenham o sufixo. A configuração para isso é a seguinte:

clean: {
    nonDist: ['dist/**/*.js', 'dist/**/*.css', '!dist/**/*.min.js', '!dist/**/*.min.css']
}

ou simplesmente:

clean: {
    nonDist: ['dist/**/*.js', 'dist/**/*.css', '!dist/**/*.min.*']
}

Nas instruções acima eu informo ao grunt-contrib-clean que eu quero remover todos os arquivos .js e .css, que estejam em qualquer diretório ou subdiretório dentro de dist e manter (ou não remover, !) os arquivos que contenham o sufixo .min.

A configuração completa do Gruntfile ficaria assim:

module.exports = function(grunt) {
    grunt.initConfig({
        copy: {
            public: {
                expand: true,
                cwd: 'public',
                src: '**',
                dest: 'dist'
            }
        },
        clean: {
            dist: {
                src: 'dist'
            },
            nonDist: ['dist/**/*.js', 'dist/**/*.css', '!dist/**/*.min.js', '!dist/**/*.min.css']
        },
        useminPrepare: {
            html: 'dist/**/*.html'
        },
        usemin: {
            html: 'dist/**/*.html'
        }
    });

    grunt.registerTask('dist', ['clean', 'copy']);
    grunt.registerTask('minifica', ['useminPrepare', 'concat:generated', 'uglify:generated', 'cssmin:generated', 'usemin']);
    grunt.registerTask('default', ['dist', 'minifica', 'clean:nonDist']);

    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');
}

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