yeoman,grunt-requirejs网站在构建后无效

时间:2015-11-01 03:24:18

标签: angularjs requirejs yeoman-generator yeoman-generator-angular grunt-requirejs

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

  1. Gruntfile.js

    '使用严格的&#39 ;; 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文件:

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

    });

  3. 这是我的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>
    

1 个答案:

答案 0 :(得分:0)

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