yeoman, grunt-requirejs site does not work after build

Question

After i runt build of grunt task, and i run my site with localhost but it do not work. It seem grunt-requirejs not work correctly as i expect, it does not include dependencies to script file. Could anyone look i my files and show me my issues with grunt-requirejs configuration ? my index.html cannot load vendor.js and scripts.js, because i used "" in my index.html for** refresh the page without errors loading wrong path of resources**. After i removed "" line in head tag of my index.html and run the site. There is the loading scripts errors, browser show that it cannot load all of my controllers, services, app.js scripts files. Any suggestions here ?

1. Gruntfile.js

   'use strict'; var modRewrite = require('connect-modrewrite');

   module.exports = function(grunt) {

   // Time how long tasks take. Can help when optimizing build times
   require('time-grunt')(grunt);
   
   // Automatically load required Grunt tasks
   require('jit-grunt')(grunt, {
       useminPrepare: 'grunt-usemin',
       ngtemplates: 'grunt-angular-templates',
       cdnify: 'grunt-google-cdn'
   });
   
   // Configurable paths for the application
   var appConfig = {
       app: require('./bower.json').appPath || 'app',
       dist: 'dist'
   };
   
   grunt.loadNpmTasks("grunt-requirejs");
   grunt.loadNpmTasks("grunt-modernizr");
   grunt.loadNpmTasks("grunt-json-server");
   
   // Define the configuration for all the tasks
   grunt.initConfig({
   
       // Project settings
       yeoman: appConfig,
   
       // config requirejs
       requirejs: {
           dist: {
               options: {
                   baseUrl: '<%= yeoman.app %>/scripts',
                   name: 'main',
                   mainConfigFile: '<%= yeoman.app %>/scripts/main.js',
                   out: '.tmp/concat/scripts/main.js'
               }
           }
       },
   
       modernizr: {
           dist: {
               devFile: "node_modules/grunt-modernizr/build/modernizr-custom.js",
               outputFile: "<%= yeoman.app %>/scripts/lib/modernizr-custom.js",
               files: {
                   src: ['<%= yeoman.app %>/scripts/**/*.js', '<%= yeoman.app %>/styles/**/*.css']
               }
           }
       },
   
       // Watches files for changes and runs tasks based on the changed files
       watch: {
           bower: {
               files: ['bower.json'],
               tasks: ['wiredep']
           },
           js: {
               files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
               tasks: ['newer:jshint:all'],
               options: {
                   livereload: '<%= connect.options.livereload %>'
               }
           },
           jsTest: {
               files: ['test/spec/{,*/}*.js'],
               tasks: ['newer:jshint:test', 'karma']
           },
           compass: {
               files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
               tasks: ['compass:server', 'autoprefixer:server']
           },
           gruntfile: {
               files: ['Gruntfile.js']
           },
           livereload: {
               options: {
                   livereload: '<%= connect.options.livereload %>'
               },
               files: [
                   '<%= yeoman.app %>/{,*/}*.html',
                   '.tmp/styles/{,*/}*.css',
                   '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
               ]
           },
           json_server: {
               files: ['api/*.json']
           }
       },
   
       // The actual grunt server settings
       connect: {
           options: {
               port: 9000,
               // Change this to '0.0.0.0' to access the server from outside.
               hostname: 'localhost',
               livereload: 35729
           },
           livereload: {
               options: {
                   open: true,
                   middleware: function(connect) {
                       return [
                           modRewrite(['^[^\\.]*$ /index.html [L]']), // match everything that not contain a '.'
                           connect.static('.tmp'),
                           connect().use(
                               '/bower_components',
                               connect.static('./bower_components')
                           ),
                           connect().use(
                               '/app/styles',
                               connect.static('./app/styles')
                           ),
                           connect.static(appConfig.app)
                       ];
                   }
               }
           },
           test: {
               options: {
                   port: 9001,
                   middleware: function(connect) {
                       return [
                           connect.static('.tmp'),
                           connect.static('test'),
                           connect().use(
                               '/bower_components',
                               connect.static('./bower_components')
                           ),
                           connect.static(appConfig.app)
                       ];
                   }
               }
           },
           dist: {
               options: {
                   open: true,
                   base: '<%= yeoman.dist %>'
               }
           }
       },
   
       // Make sure code styles are up to par and there are no obvious mistakes
       jshint: {
           options: {
               jshintrc: '.jshintrc',
               reporter: require('jshint-stylish')
           },
           all: {
               src: [
                   'Gruntfile.js',
                   '<%= yeoman.app %>/scripts/{,*/}*.js'
               ]
           },
           test: {
               options: {
                   jshintrc: 'test/.jshintrc'
               },
               src: ['test/spec/{,*/}*.js']
           }
       },
   
       // Empties folders to start fresh
       clean: {
           dist: {
               files: [{
                   dot: true,
                   src: [
                       '.tmp',
                       '<%= yeoman.dist %>/{,*/}*',
                       '!<%= yeoman.dist %>/.git{,*/}*'
                   ]
               }]
           },
           server: '.tmp'
       },
   
       // Add vendor prefixed styles
       autoprefixer: {
           options: {
               browsers: ['last 1 version']
           },
           server: {
               options: {
                   map: true,
               },
               files: [{
                   expand: true,
                   cwd: '.tmp/styles/',
                   src: '{,*/}*.css',
                   dest: '.tmp/styles/'
               }]
           },
           dist: {
               files: [{
                   expand: true,
                   cwd: '.tmp/styles/',
                   src: '{,*/}*.css',
                   dest: '.tmp/styles/'
               }]
           }
       },
       // json server for mock API
       json_server: {
           options: {
               port: 3000,
               hostname: '0.0.0.0',
               db: 'api/db.json'
           },
           your_target: {
   
           }
       },
   
       // Automatically inject Bower components into the app
       wiredep: {
           app: {
               src: ['<%= yeoman.app %>/index.html'],
               ignorePath: /\.\.\//
           },
           test: {
               devDependencies: true,
               src: '<%= karma.unit.configFile %>',
               ignorePath: /\.\.\//,
               fileTypes: {
                   js: {
                       block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi,
                       detect: {
                           js: /'(.*\.js)'/gi
                       },
                       replace: {
                           js: '\'{{filePath}}\','
                       }
                   }
               }
           },
           sass: {
               src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
               ignorePath: /(\.\.\/){1,2}bower_components\//
           }
       },
   
       // Compiles Sass to CSS and generates necessary files if requested
       compass: {
           options: {
               sassDir: '<%= yeoman.app %>/styles',
               cssDir: '.tmp/styles',
               specify: '<%= yeoman.app %>/styles/maper.scss',
               generatedImagesDir: '.tmp/images/generated',
               imagesDir: '<%= yeoman.app %>/images',
               javascriptsDir: '<%= yeoman.app %>/scripts',
               fontsDir: '<%= yeoman.app %>/styles/fonts',
               importPath: './bower_components',
               httpImagesPath: '/images',
               httpGeneratedImagesPath: '/images/generated',
               httpFontsPath: '/styles/fonts',
               relativeAssets: false,
               assetCacheBuster: false,
               raw: 'Sass::Script::Number.precision = 10\n'
           },
           dist: {
               options: {
                   generatedImagesDir: '<%= yeoman.dist %>/images/generated'
               }
           },
           server: {
               options: {
                   sourcemap: true
               }
           }
       },
   
       // Renames files for browser caching purposes
       filerev: {
           dist: {
               src: [
                   '<%= yeoman.dist %>/scripts/{,*/}*.js',
                   '<%= yeoman.dist %>/styles/{,*/}*.css',
                   '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
                   '<%= yeoman.dist %>/styles/fonts/*'
               ]
           }
       },
   
       // Reads HTML for usemin blocks to enable smart builds that automatically
       // concat, minify and revision files. Creates configurations in memory so
       // additional tasks can operate on them
       useminPrepare: {
           html: '<%= yeoman.app %>/index.html',
           options: {
               dest: '<%= yeoman.dist %>',
               flow: {
                   html: {
                       steps: {
                           js: ['concat', 'uglifyjs'],
                           css: ['cssmin']
                       },
                       post: {}
                   }
               }
           }
       },
   
       // Performs rewrites based on filerev and the useminPrepare configuration
       usemin: {
           html: ['<%= yeoman.dist %>/{,*/}*.html'],
           css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
           js: ['<%= yeoman.dist %>/scripts/{,*/}*.js'],
           options: {
               assetsDirs: [
                   '<%= yeoman.dist %>',
                   '<%= yeoman.dist %>/images',
                   '<%= yeoman.dist %>/styles'
               ],
               patterns: {
                   js: [
                       [/(images\/[^''""]*\.(png|jpg|jpeg|gif|webp|svg))/g, 'Replacing references to images']
                   ]
               }
           }
       },
   
       // The following *-min tasks will produce minified files in the dist folder
       // By default, your `index.html`'s <!-- Usemin block --> will take care of
       // minification. These next options are pre-configured if you do not wish
       // to use the Usemin blocks.
       // cssmin: {
       //   dist: {
       //     files: {
       //       '<%= yeoman.dist %>/styles/main.css': [
       //         '.tmp/styles/{,*/}*.css'
       //       ]
       //     }
       //   }
       // },
       // uglify: {
       //   dist: {
       //     files: {
       //       '<%= yeoman.dist %>/scripts/scripts.js': [
       //         '<%= yeoman.dist %>/scripts/scripts.js'
       //       ]
       //     }
       //   }
       // },
       // concat: {
       //   dist: {}
       // },
   
       imagemin: {
           dist: {
               files: [{
                   expand: true,
                   cwd: '<%= yeoman.app %>/images',
                   src: '{,*/}*.{png,jpg,jpeg,gif}',
                   dest: '<%= yeoman.dist %>/images'
               }]
           }
       },
   
       svgmin: {
           dist: {
               files: [{
                   expand: true,
                   cwd: '<%= yeoman.app %>/images',
                   src: '{,*/}*.svg',
                   dest: '<%= yeoman.dist %>/images'
               }]
           }
       },
   
       htmlmin: {
           dist: {
               options: {
                   collapseWhitespace: true,
                   conservativeCollapse: true,
                   collapseBooleanAttributes: true,
                   removeCommentsFromCDATA: true
               },
               files: [{
                   expand: true,
                   cwd: '<%= yeoman.dist %>',
                   src: ['*.html'],
                   dest: '<%= yeoman.dist %>'
               }]
           }
       },
   
       ngtemplates: {
           dist: {
               options: {
                   module: 'maperApp',
                   htmlmin: '<%= htmlmin.dist.options %>',
                   usemin: 'scripts/scripts.js'
               },
               cwd: '<%= yeoman.app %>',
               src: 'views/{,*/}*.html',
               dest: '.tmp/templateCache.js'
           }
       },
   
       // ng-annotate tries to make the code safe for minification automatically
       // by using the Angular long form for dependency injection.
       ngAnnotate: {
           dist: {
               files: [{
                   expand: true,
                   cwd: '.tmp/concat/scripts',
                   src: '*.js',
                   dest: '.tmp/concat/scripts'
               }]
           }
       },
   
       // Replace Google CDN references
       cdnify: {
           dist: {
               html: ['<%= yeoman.dist %>/*.html']
           }
       },
   
       // Copies remaining files to places other tasks can use
       copy: {
           build_en_lang: {
               files: [{
                   expand: true,
                   cwd: '<%= yeoman.app %>',
                   src: [
                       '*.{ico,png,txt}',
                       '.htaccess',
                       '*.html',
                       'images/{,*/}*.{webp}',
                       'styles/fonts/{,*/}*.*', '!en/**'
                   ],
                   dest: '<%= yeoman.dist %>/en'
               }]
           },
           dist: {
               files: [{
                   expand: true,
                   dot: true,
                   cwd: '<%= yeoman.app %>',
                   dest: '<%= yeoman.dist %>',
                   src: [
                       '*.{ico,png,txt}',
                       '.htaccess',
                       '*.html',
                       'images/{,*/}*.{webp}',
                       'styles/fonts/{,*/}*.*'
                   ]
               }, {
                   expand: true,
                   cwd: '.tmp/images',
                   dest: '<%= yeoman.dist %>/images',
                   src: ['generated/*']
               }, {
                   expand: true,
                   cwd: 'bower_components/bootstrap/dist',
                   src: 'fonts/*',
                   dest: '<%= yeoman.dist %>'
               }]
           },
           styles: {
               expand: true,
               cwd: '<%= yeoman.app %>/styles',
               dest: '.tmp/styles/',
               src: '{,*/}*.css'
           }
       },
   
       // Run some tasks in parallel to speed up the build process
       concurrent: {
           server: {
               tasks: [
                   'compass:server'
               ]
           },
           test: [
               'compass'
           ],
           dist: [
               'compass:dist',
               'imagemin',
               'svgmin'
           ]
       },
   
       // Test settings
       karma: {
           unit: {
               configFile: 'test/karma.conf.js',
               singleRun: true
           }
       }
   });
   
   
   grunt.registerTask('serve', 'Compile then start a connect web server', function(target) {
       if (target === 'dist') {
           return grunt.task.run(['build', 'connect:dist:keepalive']);
       }
   
       grunt.task.run([
           'clean:server',
           'wiredep',
           'concurrent:server',
           'modernizr:dist',
           'autoprefixer:server',
           'connect:livereload',
           'watch'
       ]);
   });
   
   grunt.registerTask('server', 'DEPRECATED TASK. Use the "serve" task instead', function(target) {
       grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
       grunt.task.run(['serve:' + target]);
   });
   
   grunt.registerTask('test', [
       'clean:server',
       'wiredep',
       'concurrent:test',
       'autoprefixer',
       'connect:test',
       'karma'
   ]);
   
   grunt.registerTask('build', [
       'clean:dist',
       'wiredep',
       'useminPrepare',
       'concurrent:dist',
       'autoprefixer',
       'ngtemplates',
       'concat',
       'requirejs:dist',
       'ngAnnotate',
       'copy:dist',
       'cdnify',
       'cssmin',
       'uglify',
       'modernizr:dist',
       'filerev',
       'usemin',
       'htmlmin'
   ]);
   
   grunt.registerTask('default', [
       'newer:jshint',
       'test',
       'build'
   ]);
   

   };

2. main.js file :

   require.config({
   baseUrl: 'scripts',
   paths: {
       'jquery': '../../bower_components/jquery/dist/jquery.min',
       'lodash': '../../bower_components/lodash/lodash',
       'modernizr': '../../bower_components/modernizr/dist/modernizr-build',
       'iscroll': '../../bower_components/iscroll/build/iscroll',
       'spin': 'lib/spin.min',
       'angular': '../../bower_components/angular/angular.min',
       'angular-animate': '../../bower_components/angular-animate/angular-animate.min',
       'angular-iscroll': '../../bower_components/angular-iscroll/dist/lib/angular-iscroll',
       'angular-sanitize': '../../bower_components/angular-sanitize/angular-sanitize.min',
       'angular-spinner': 'lib/angular-spinner.min',
       'angular-simple-logger': '../../bower_components/angular-simple-logger/dist/angular-simple-logger',
       'angular-google-maps': '../../bower_components/angular-google-maps/dist/angular-google-maps',
       'pascalprecht.translate': '../../bower_components/angular-translate/angular-translate.min',
       'ui.bootstrap': '../../bower_components/angular-bootstrap/ui-bootstrap-tpls',
       'ui.router': '../../bower_components/angular-ui-router/release/angular-ui-router',
       'base64': 'lib/base64.min',
       'satellizer': '../../bower_components/satellizer/satellizer.min',
   },
   shim: {
       'angular': {
           deps: [],
           exports: 'angular'
       },
       'jquery': {
           deps: [],
           exports: '$'
       },
       'lodash': {
           deps: [],
           exports: '_'
       },
       'angular-animate': {
           deps: ['angular'],
           exports: ''
       },
       'angular-spinner': {
           deps: ['angular', 'spin'],
           exports: ''
       },
       'angular-sanitize': {
           deps: ['angular'],
           exports: ''
       },
       'angular-google-maps': {
           deps: ['lodash', 'angular', 'angular-simple-logger'],
           exports: ''
       },
       'pascalprecht.translate': {
           deps: ['angular', 'angular-sanitize'],
           exports: ''
       },
       'ui.bootstrap': {
           deps: ['angular', 'jquery'],
           exports: ''
       },
       'ui.router': {
           deps: [],
           exports: ''
       },
       'satellizer': {
           deps: ['base64'],
           exports: ''
       }
   }
   

   });

this is my index.html file:

    <!doctype html>
    <html lang="vn">
    <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="../styles/maper.css">
    <!-- endbuild -->
    <base href="/">
</head>

<body>
    <!--[if lte IE 8]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <!-- Add your site or application content here -->
    <div ng-controller="rootCtrl as app" id="root-container" class="first-load" ng-class="{ 'iscroll-on': app.iScrollState.useIScroll, 'iscroll-off': !app.iScrollState.useIScroll }">
        <header class="header" ui-view="header"></header>
        <div class="body" ui-view="body"></div>
        <nav class="sidemenu" ui-view="sidemenu"></nav>
        <footer class="footer" ui-view="footer"></footer>
        <div class="backdrop-loading"><span us-spinner spinner-key="spinner-page"></span></div>
    </div>
    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
    <script>
    ! function(A, n, g, u, l, a, r) {
        A.GoogleAnalyticsObject = l, A[l] = A[l] || function() {
                (A[l].q = A[l].q || []).push(arguments)
            }, A[l].l = +new Date, a = n.createElement(g),
            r = n.getElementsByTagName(g)[0], a.src = u, r.parentNode.insertBefore(a, r)
    }(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-XXXXX-X');
    ga('send', 'pageview');
    </script>
    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="bower_components/angular-translate/angular-translate.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/satellizer/satellizer.js"></script>
    <script src="bower_components/angular-iscroll/dist/lib/angular-iscroll.js"></script>
    <script src="bower_components/angular-simple-logger/dist/angular-simple-logger.js"></script>
    <script src="bower_components/lodash/lodash.js"></script>
    <script src="bower_components/angular-google-maps/dist/angular-google-maps.js"></script>
    <script src="bower_components/requirejs/require.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/main.js"></script>
    <!-- endbuild -->
</body>

</html>

Answer 1

provide almond: true in requirejs options.

requirejs: {
    dist: {
        options: {
            almond: true,
            baseUrl: '<%= yeoman.app %>/scripts',
            name: 'main',
            mainConfigFile: '<%= yeoman.app %>/scripts/main.js',
            out: '.tmp/concat/scripts/main.js'
        }
    }
},