0

Olá,

estou construindo uma página html onde realizo o merge de arquivos js utilizando Grunt e os módulo

  • grunt-usemin
  • grunt-contrib-uglify
  • grunt-contrib-concat

para fazer a compactação do js utilizo a seguinte estrutura

<!-- build:js js/compact/modulos.js --> 
<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../node_modules/onsenui/js/onsenui.min.js"></script>
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
<!-- endbuild --> 

e configurei as tasks no grunt

grunt.initConfig({
    // tarefas para fazer merge dos arquivos de js e css
    // funciona em conjunto com tags no HTML
    // <!-- build:js js/core.js --> 
    // o codigo acima pega todos os scripts entre a tag e cria um arquivo final chamado core.js dentro da pasta js
    useminPrepare : {
        html : 'www/index.html',
        options : {
            dest : 'www'
        }
    },
    usemin : {
        html : 'www/index.html',
        css : 'www/css/*.css'
    },
    concat : {
        options : {
            dest : '.'
        }
    }
});

dessa forma ao executar a task

grunt.registerTask('minfiles',['useminPrepare', 'concat', 'uglify', 'usemin']);

o arquivo js/compact/modulos.js é gerado.

segundo a documentação do grunt-usemin é possível utilizar também para compactar CSS, utilizando o grunt-contrib-cssmin

então adicionei o módulo e adicionei o processo de cssmin na task de para fazer o merge

grunt.registerTask('minfiles',['useminPrepare', 'concat', 'uglify', 'cssmin', 'usemin']);

e configurei no html

<!-- build:css css/onsen.css -->
<link rel="stylesheet" type="text/css" href="../node_modules/onsenui/css/onsenui.min.css">
<link rel="stylesheet" type="text/css" href="../node_modules/onsenui/css/onsen-css-components.css">
<!-- endbuild --> 

funciona apenas se os arquivos css não tiverem @import inline.

o erro retornado, por exemplo, é

Running "cssmin:root" (cssmin) task
Warning: Ignoring local @import of "node_modules/onsenui/css/font_awesome" as resource is missing.,Ignoring local @import of "node_modules/onsenui/css/ionicons" as resource is missing.,Ignorin                                                                               g local @import of "node_modules/onsenui/css/material-design-iconic-font" as resource is missing. Use --force to continue.

Aborted due to warnings.

Procurando um pouco mais, vi que posso configurar a task para fazer duas coisas 1 ignorar os @import 2 informar o diretório de onde devem ser buscadas as referências

tentei os dois

// ignorar os imports
cssmin : {
  options : {
    'processImport': false
  },
}

e

// informar o diretório base para os arquivos
cssmin : {
  root: 'node_modules/onsenui/css'
}

e nenhum dos dois funciona, ainda retornando o erro.

o que devo fazer para que o css seja criado corretamente?

obrigado pela ajuda

2
  • importa no html mesmo. ou instala o grunt-concat e concatena no inicio do css minificado, igual este cara sugeriu stackoverflow.com/a/28454233/1779650
    – Leandro RR
    20/02/2018 às 17:00
  • para dar um solução "rápida" eu importei tudo na mão mesmo, mas o problema é pra manter no futuro esse esquema (proxima atualizacao do módulo eu to perdido), o ideal seria processar o import realmente, mas muito obrigado pela dica
    – h3nr1ke
    20/02/2018 às 20:03

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .