Zurb foundation Grunt JS,BurSeriType,基金会,Modernizer 我试着去学习Grun.js的工作。它很好,但是因为我想使用基础而不是引导,所以我不能再继续工作了。我不能让现代化者正确地工作。我加载页面时总是出错

Zurb foundation Grunt JS,BurSeriType,基金会,Modernizer 我试着去学习Grun.js的工作。它很好,但是因为我想使用基础而不是引导,所以我不能再继续工作了。我不能让现代化者正确地工作。我加载页面时总是出错,zurb-foundation,modernizr,browserify,Zurb Foundation,Modernizr,Browserify,grunfile.js module.exports = function (grunt) { require('time-grunt')(grunt); require('load-grunt-tasks')(grunt); grunt.initConfig({ pkg : grunt.file.readJSON('package.json'), //============== //BOWER //?============= bower

grunfile.js

   module.exports = function (grunt) {
require('time-grunt')(grunt);
require('load-grunt-tasks')(grunt);


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

    //==============
    //BOWER
    //?=============
    bower : {
        install : {
            options : {
                targetDir : 'client/requires',
                layout : 'byComponent'
            }
        }
    },
    //==============
    // CLEAN 
    //==============
    clean : {
        build :['build'],
        dev : {
            src : ['build/app.js', 'build/<%= pkg.name %>.css', 'build/<%= pkg.name %>.js']
        },
        prod : ['dist']
    },
    //==============
    // BROWSERIFY
    //==============
    browserify : {
        vendor : {
            src : ['client/requires/**/*.js'],
            dest : 'build/vendor.js',
            options : {
                shim : {
                    jquery : {
                        path : 'client/requires/jquery/js/jquery.js',
                        exports : '$'
                    },
                    underscore : {
                        path : 'client/requires/underscore/js/underscore.js',
                        exports : '_'
                    },
                    backbone : {
                        path : 'client/requires/backbone/js/backbone.js',
                        exports : 'Backbone',
                        depends : {
                            jquery : '$',
                            underscore : '_'
                        }
                    },
                    modernizr : {
                        path : 'client/requires/modernizr/modernizr.js',
                        exports : 'modernizr',
                        depends : {
                            jquery : '$'
                        }
                    },
                    foundation : {
                        path : 'client/requires/bower-foundation/js/foundation.min.js',
                        exports : 'foundation',
                        depends : {
                            modernizr : 'modernizr'
                        }
                    }
                }
            }
        },
        app : {
            files : {
                'build/app.js' : ['client/js/app.js']
            },
            options : {
                external : ['jquery', 'underscore', 'backbone' ],
                transorm : ['hbsfy']
            }
        }
        // , test : {}
    },
    //==================
    // CONCAT
    //==================
    concat : {
        'build/<%= pkg.name %>.js' : ['build/vendor.js', 'build/app.js'],
        'build/<%= pkg.name %>.css' : [
            'client/css/*.css',
            'client/requires/*/css/*.css',
            'client/requires/*/*.css'
        ]
    },
    //=================
    // COPY
    //=================
    copy : {
        dev : {
            files : [{
                src : 'build/<%= pkg.name %>.js',
                dest : 'public/js/<%= pkg.name %>.js'
            }, {
                src : 'build/<%= pkg.name %>.css',
                dest : 'public/css/<%= pkg.name %>.css'
            }, {
                src : 'client/img/*',
                dest : 'public/img/'
            }]
        },
        prod : {
            files : [{
                src : ['client/img/*'],
                dest : 'dist/img/'
            }]
        }
    },
    //===============
    // CSS MINIFICATION
    //===============
    cssmin : {
        minify : {
            src : ['build/<%= pkg.name %>.css'],
            dest : 'dist/css/<%= pkg.name %>.css'
        }
    },
    //==================
    // JAVASCRIPT UGLIFY
    //==================
    uglify : {
        compile : {
            options : {
                compress : true,
                verbose : true
            },
            files : [{
                src : 'build/<%= pkg.name %>.js',
                dest : 'dist/js/<%= pkg.name %>.js'
            }]
        }
    },
    //===================
    // WATCH CLIENT CODE
    //===================
    watch : {
        scripts : {
            files : ['client/views/*', 'client/js/*', 'client/js/**/*', 'client/**/*'],
            tasks : ['clean:dev', 'browserify:app', 'concat', 'copy:dev']
        }
    },
    //===================
    // NODEMON
    //===================
    nodemon : {
        dev : {
            options : {
                file : 'server.js',
                watchedFolders : ['app', 'server.js'],
                env : {
                    PORT : '3000'
                }
            }
        }
    },
    //==================
    // CONCURRENT
    //==================

    concurrent : {
        dev : {
            tasks : ['nodemon', 'watch:scripts'],
            options :{
                logConcurrentOutput : true
            }
        }
    },
    //====================
    //JSHINT
    //====================
    jshint : {
        all : ['Gruntfile.js', 'client/js/**/*.js', '!client/views/**/*'],
        dev : ['client/src/**/*.js'],
        options :{
            jshintignore : '.jshintignore'
        }
    }
});

grunt.registerTask('init:dev', ['clean', 'bower', 'browserify:vendor']);

grunt.registerTask('build:dev', ['clean:dev', 'browserify:app', 'jshint:dev', 'concat', 'copy:dev']);

grunt.registerTask('build:prod', ['clean:prod', 'browserify:vendor', 'browserify:app', 'jshint:all', 'concat', 'cssmin', 'uglify', 'copy:prod']);

grunt.registerTask('server', ['build:dev', 'concurrent:dev']);
这就是我得到的错误

  Uncaught TypeError: Cannot read property 'documentElement' of undefined 

有人知道我做错了什么吗?

我很确定问题是Modernizer导出的全局对象名为
Modernizer
,大写字母为m

modernizr : {
  path : 'client/requires/modernizr/modernizr.js',
  exports : 'Modernizr',
},
foundation : {
  path : 'client/requires/bower-foundation/js/foundation.min.js',
  exports : 'foundation',
  depends : {
    modernizr : 'Modernizr'
  }
}
注意,我删除了jQuery作为Modernizer的依赖项。除非您正在做一些不寻常的事情,否则Modernizer没有任何依赖性

同样,如果基金会<强> < j/Query >依赖于jQuery,我不会感到惊讶,但是自从你没有提到它以来,我就把它忘了。


也有可能基金会不导出任何名为“代码>基金会<代码> >或<代码>基金会<代码>,但我必须查看源代码/文档来确定。首先尝试Modernizer的修复,看看您得到了什么。

感谢您的回复!我试过你写的东西,但没用。但我发现问题在于它试图将文件“modernizr-1.7.min.js”加载到“test/caniuse_files”文件夹中。
modernizr : {
  path : 'client/requires/modernizr/modernizr.js',
  exports : 'Modernizr',
},
foundation : {
  path : 'client/requires/bower-foundation/js/foundation.min.js',
  exports : 'foundation',
  depends : {
    modernizr : 'Modernizr'
  }
}