title: Grunt.js, Browserify, Foundation, Modernizer
body: <p>I’m try to learn working with Grunt.js.It  works great but since I wanted to use Foundation instead of Bootstrap I don’t get it to work anymore. I don't get modernizr correct to work. I always get Errors when I load the page.</p>
  
  <p><strong>Gruntfile.js</strong></p>
  
  <pre><code>   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/&lt;%= pkg.name %&gt;.css', 'build/&lt;%= pkg.name %&gt;.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/&lt;%= pkg.name %&gt;.js' : ['build/vendor.js', 'build/app.js'],
          'build/&lt;%= pkg.name %&gt;.css' : [
              'client/css/*.css',
              'client/requires/*/css/*.css',
              'client/requires/*/*.css'
          ]
      },
      //=================
      // COPY
      //=================
      copy : {
          dev : {
              files : [{
                  src : 'build/&lt;%= pkg.name %&gt;.js',
                  dest : 'public/js/&lt;%= pkg.name %&gt;.js'
              }, {
                  src : 'build/&lt;%= pkg.name %&gt;.css',
                  dest : 'public/css/&lt;%= pkg.name %&gt;.css'
              }, {
                  src : 'client/img/*',
                  dest : 'public/img/'
              }]
          },
          prod : {
              files : [{
                  src : ['client/img/*'],
                  dest : 'dist/img/'
              }]
          }
      },
      //===============
      // CSS MINIFICATION
      //===============
      cssmin : {
          minify : {
              src : ['build/&lt;%= pkg.name %&gt;.css'],
              dest : 'dist/css/&lt;%= pkg.name %&gt;.css'
          }
      },
      //==================
      // JAVASCRIPT UGLIFY
      //==================
      uglify : {
          compile : {
              options : {
                  compress : true,
                  verbose : true
              },
              files : [{
                  src : 'build/&lt;%= pkg.name %&gt;.js',
                  dest : 'dist/js/&lt;%= pkg.name %&gt;.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']);
  </code></pre>
  
  <p>}</p>
  
  <p><strong>Bower.json</strong></p>
  
  <pre><code>   {
       "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"]
             } 
           }
        }
  </code></pre>
  
  <p>This is the Error i get.</p>
  
  <pre><code>  Uncaught TypeError: Cannot read property 'documentElement' of undefined 
  </code></pre>
  
  <p>anyone a idea what I'm doing wrong??</p>