yeoman, сайт grunt-requirejs не работает после сборки

0

После того, как я запускаю сборку задачи grunt, и я запускаю свой сайт с localhost, но он не работает. Кажется, grunt-requirejs работают неправильно, как я ожидаю, он не включает зависимости от файла сценария. Может ли кто-нибудь посмотреть мои файлы и показать мне свои проблемы с настройкой grunt-requirejs? мой index.html не может загрузить vendor.js и scripts.js, потому что я использовал "" в моем index.html для ** обновить страницу без ошибок, загружая неправильный путь ресурсов **. После того, как я удалил строку "" в главном теге моего index.html и запустил сайт. Существуют ошибки сценариев загрузки, браузер показывает, что он не может загружать все мои файлы-контроллеры, службы, файлы сценариев app.js. Какие-нибудь предложения здесь?

  1. Gruntfile.js

    "использовать строгий"; 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' <!-- 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 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>
Теги:
requirejs
yeoman-generator
yeoman-generator-angular

1 ответ

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'
        }
    }
},
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню