angularjs - yeoman，grunt-requirejs 站点在构建后无法工作

Question

在我运行 grunt 任务的构建后，我使用 localhost 运行我的站点，但它不起作用。似乎 grunt-requirejs 不能像我预期的那样正常工作，它不包含对脚本文件的依赖项。任何人都可以查看我的文件并向我展示我的 grunt-requirejs 配置问题吗？我的 index.html 无法加载 vendor.js 和 scripts.js，因为我在 index.html 中使用了“”来**刷新页面而不会出现错误加载错误的资源路径**。在我删除 index.html 的 head 标记中的“”行并运行该站点后。有加载脚本错误，浏览器显示它无法加载我所有的控制器、服务、app.js 脚本文件。这里有什么建议吗？

1. Gruntfile.js

   '使用严格'; var modRewrite = require('connect-modrewrite');

   module.exports = 功能（咕噜声）{

   // 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 文件：

   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: ''
       }
   }
   

   });

这是我的 index.html 文件：

    <!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

almond: true在requirejs选项中提供。

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