Question

我正在尝试学习使用Grunt.js.It工作得很好但是因为我想使用Foundation而不是Bootstrap我不再让它工作了。我没有使modernizr正确工作。加载页面时总是出错。

Gruntfile.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']);

}

Bower.json

   {
     "name": "",
      "version": "0.0.0",
      "private": true,
      "dependencies": {
         "underscore": "~1.5.2",
         "backbone": "~1.1.0",
         "jquery": "*",
         "bower-foundation" : "*"
       },
       "exportsOverride": {
          "jquery": {
              "js": "dist/*.js"
           },
          "underscore": {
             "js": "underscore.js"
           },
          "backbone": {
              "js": "backbone.js"
           },
          "bower-foundation" : {
             "js" : "js/foundation.min.js",
             "css" : ["css/foundation.min.css","css/normalize.css"]
           } 
         }
      }

这是我得到的错误。

  Uncaught TypeError: Cannot read property 'documentElement' of undefined

任何人都知道我做错了什么？

Answer 1

我非常确定问题是Modernizr导出的全局对象名为Modernizr，大写为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作为Modernizr的依赖项。除非你做一些与众不同的事情，否则Modernizr不会有任何依赖。

另外，如果基金会依赖于jQuery，我不会感到惊讶，但是我已经把它排除在外了，因为你没有提到它。

基金会也不可能导出任何名为foundation或Foundation的内容，但我必须查看源/文档以确定。首先尝试修复Modernizr，看看你得到了什么。

Grunt.js，Browserify，Foundation，Modernizer

1 个答案: