0
Hello,
I am building an html page where I merge js files using Grunt and the modules
- Grunt-usemin
- Grunt-contrib-uglify
- Grunt-contrib-Concat
to compress the js using 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 : '.'
}
}
});
thus when executing the task
grunt.registerTask('minfiles',['useminPrepare', 'concat', 'uglify', 'usemin']);
the file js/compact/modulos.js
is generated.
according to the Grunt-usemin documentation can also be used to compress CSS using Grunt-contrib-cssmin
so I added the module and added the cssmin process to the task to merge
grunt.registerTask('minfiles',['useminPrepare', 'concat', 'uglify', 'cssmin', 'usemin']);
and configured 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 are missing @import
inline.
the error returned, 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 the @import
2 inform the directory from which references should be searched
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 make css properly created?
thanks for the help
matters in html anyway. or install Grunt-Concat and concatenate at the beginning of the minified css, just like this guy suggested https://stackoverflow.com/a/28454233/1779650
– Leandro RR
to give a "quick" solution I imported everything in the same hand, but the problem is to keep in the future this scheme (next update of the module I’m lost), the ideal would be to process the import really, but thank you for the tip
– h3nr1ke