如何缩小包含@import url行的css文件

时间:2015-01-07 06:34:55

标签: gruntjs grunt-contrib-cssmin

我正在使用grunt-contrib-cssmin来缩小我的css文件,但我的css文件onw使用@import url行,而上面提到的grunt插件无法缩小此css文件。我也尝试过clean-css和cssjoin工具来解决这个问题但是直到知道才有效。

**

  • Grunt文件:

**

grunt.initConfig({
        // Metadata
        pkg: grunt.file.readJSON('package.json'),

        cssmin: {
          minified_css_admin: {
              files: {
                  'public/admin/css/minified-css-admin.min.css'     ['public/admin/prettify/prettify.css','public/admin/css/developer.css']
              }
          }

        }
    });
    // These plugins provide necessary tasks

    grunt.loadNpmTasks('grunt-contrib-cssmin');


    // Default task
    grunt.registerTask('default', ['admin-default']);
    grunt.registerTask('admin-default', ['cssmin:minified_css_admin']);
};

**

  • Prettify.css

**

@import url('bootstrap.min.css');
@import url('bootstrap-responsive.min.css');
@import url('uniform.tp.css');
@import url('jquery.ui.css');
@import url('colorpicker.css');
@import url('colorbox.css');
@import url('jquery.jgrowl.css');
@import url('jquery.alerts.css');
@import url('animate.min.css');
@import url('animate.delay.css');
@import url('font-awesome.css');
@import url('jquery.tagsinput.css');
@import url('ui.spinner.css');
@import url('jquery.chosen.css');
@import url('fullcalendar.css');
@import url('font-awesome-ie7.css');
@import url('../fonts/roboto.css');


/***** RESET BROWSER STYLES *****/
/********************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

1 个答案:

答案 0 :(得分:0)

根据https://github.com/gruntjs/grunt-contrib-cssmin/issues/75 cssmin要求您设置根目录,以便保留相对的@import URL。

   cssmin: {
        options: {
            report: 'min',
            root: '../../webroot',
       }
   }