Hello,
I'm building an html page where I merge js files using Grunt and the
- grunt-usemin
- grunt-contrib-uglify
- grunt-contrib-concat
To compile js I use the following structure
<!-- 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 -->
and set up tasks in 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 : '.'
}
}
});
this way when running the task
grunt.registerTask('minfiles',['useminPrepare', 'concat', 'uglify', 'usemin']);
the js/compact/modulos.js
file is generated.
According to grunt-usemin documentation you can also use it to compact CSS using grunt-contrib-cssmin
Then I added the module and added the cssmin process to the merge task
grunt.registerTask('minfiles',['useminPrepare', 'concat', 'uglify', 'cssmin', 'usemin']);
and set up in 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 -->
works only if the css files do not have @import
inline.
The returned error, for example, is
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.
Looking for a little more, I saw that I can configure the task to do two things
1 ignore @import
2 inform the directory where references should be searched for
I tried both
// ignorar os imports
cssmin : {
options : {
'processImport': false
},
}
and
// informar o diretório base para os arquivos
cssmin : {
root: 'node_modules/onsenui/css'
}
and neither works, still returning the error.
What should I do to get the css created correctly?
Thanks for the help