GRUNT CSS-MIN does not process with @import inline

Asked

Viewed 73 times

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

  • 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

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.