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