Question

第一次使用grunt。能够连接和缩小一些JavaScript。当我尝试用CSS做同样的事情时，我得到以下错误：

λ git master* → grunt cssmin
Running "cssmin:css" (cssmin) task
>> RangeError: Maximum call stack size exceeded
Warning: CSS minification failed. Use --force to continue.

Aborted due to warnings.

为什么会发生这种情况？

的package.json

{
    "name" : "Thing",
    "title" : "Concatentation + Minification",
    "version" : "1.0.0",
    "devDependencies": {
        "grunt": "0.4.5",
        "grunt-contrib-concat": "0.5.0",
        "grunt-contrib-cssmin" : "0.10.0",
        "grunt-contrib-watch" : "0.6.1",
        "grunt-contrib-uglify" : "0.5.0"
    }
}

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            css: {
                src: [
                    'static/css/*'
                ],
                dest: 'combined.css'
            },
            js : {
                src : [
                    'static/js/*'
                ],
                dest : 'combined.js'
            }
        },
        cssmin : {
            css:{
                src: 'combined.css',
                dest: 'combined.min.css'
            }
        },
        uglify : {
            js: {
                files: {
                    'combined.js' : [ 'combined.js' ]
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.registerTask('default', [ 'concat:css'
                                  , 'cssmin:css'
                                  , 'concat:js'
                                  , 'uglify:js'
                                  ]);
};

Answer 1

我的css文件夹中有.png，因此抛出了超出调用堆栈的大小。

Answer 2

尝试将cssmin和ulgify方法修改为：

cssmin : {
    css:{
        src: '<%= concat.css.dest %>',
        dest: 'combined.min.css'
    }
},
uglify : {
    js: {
        files: {
            '<%= concat.js.dest %>' : 'combined.js'
        }
    }
}

Answer 3

查看cssmin任务的结构 - ＆gt; cssmin

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            css: {
                src: [
                    'static/css/*'
                ],
                dest: 'combined.css'
            },
            js : {
                src : [
                    'static/js/*'
                ],
                dest : 'combined.js'
            }
        },
        cssmin : {
            combine: {
                 files: {
                      'combined.min.css': ['combined.css'] //<---- Looks like it was a error in the usage of grunt-contrib-cssmin
                 }
            }
        },

      uglify : {
            js: {
                files: {
                    'combined.js' : [ 'combined.min.js' ]
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.registerTask('default', [ 'concat:css'
                                  , 'cssmin:css'
                                  , 'concat:js'
                                  , 'uglify:js'
                                  ]);
};

超出了Grunt CSS minifier调用堆栈

3 个答案: