缺少 Bower 组件

Question

我正在尝试利用 grunt-wiredep 自动将任何 Bower 组件注入我的 html。非常简单，但我不确定如何在运行本地主机时设置 bower 目录的正确路径。目前我收到以下错误：

http://localhost:9000/bower_components/jquery/dist/jquery.js Failed to load resource: the server responded with a status of 404 (Not Found)

这是我的结构

项目

app （包含sass、js、html等...）

bower_components

node_modules

bower.json

package.json

Gruntfile.js

HTML 文件

<!-- bower:js -->
<script src="../bower_components/modernizr/modernizr.js"></script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- endbower -->

Grunt 文件

        connect: {
        server: {
            options: {
                port: 9000,
                open: true,
                livereload: 35729,
                hostname: 'localhost',
                base:config.app
            },
            livereload: {
                options: {
                    middleware: function(connect) {
                        return [
                            connect.static(config.app),
                            connect().use('/bower_components', connect.static('./bower_components'))
                        ];
                    }
                }
            }
        }
    },
        wiredep: {
        task: {
            // Point to the files that should be updated when you run `grunt wiredep`
            src: [
                '<%= config.app %>/**/*.html',          // .html support...
                '<%= config.app %>/views/**/*.html',    // .html support...
                '<%= config.app %>/views/**/*.jade',    // .jade support...
                '<%= config.app %>/styles/app.scss',    // .scss & .sass support...
                '<%= config.app %>/config.yml'          // and .yml & .yaml support out of the box!
            ],
            options: {
                // See wiredep's configuration documentation for the options https://github.com/taptapship/wiredep#configuration
            }
        }
    }

Answer 1

我能够通过将我的 grunt 文件更改为先 watch，然后连接（grunt 服务器设置）然后连接依赖项来解决这个问题。最终的 Gruntfile 如下所示：

'use strict';

module.exports = function(grunt){
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);

// Configurable paths
var config = {
    app: 'app',
    dist: 'dist'
};

grunt.initConfig({
    config: config,

    // watch any js files on change
    watch: {
        options: { livereload: true },
        bower: {
            files: ['bower.json'],
            tasks: ['wiredep']
        },
        scripts: {
            files: ['<%= config.app %>/js/src/*.js'],
            tasks: ['uglify']
        },
        // sass
        sass: {
            files: ['<%= config.app %>/sass/**/*.scss'],
            tasks: ['compass:dev']
        },
        // watch html
        html: {
            files: ['<%= config.app %>/**/*.html']
        }
    },

    // Grunt server settings
    connect: {
        options: {
            port: 9000,
            open: true,
            livereload: 35729,
            // Change this to '0.0.0.0' to access the server from outside
            hostname: 'localhost'
        },
        livereload: {
            options: {
                middleware: function(connect) {
                    return [
                        connect().use('/bower_components', connect.static('./bower_components')),
                        connect.static(config.app)
                    ];
                }
            }
        }
    },

    wiredep: {
        app: {
            // Point to the files that should be updated when you run `grunt wiredep`
            ignorePath: /^\/|\.\.\//,
            src: [
                '<%= config.app %>/**/*.html',          // .html support...
                '<%= config.app %>/views/**/*.html',    // .html support...
                '<%= config.app %>/views/**/*.jade',    // .jade support...
                '<%= config.app %>/styles/app.scss',    // .scss & .sass support...
                '<%= config.app %>/config.yml'          // and .yml & .yaml support out of the box!
            ],
            options: {
                // See wiredep's configuration documentation for the options https://github.com/taptapship/wiredep#configuration
                //directory: 'bower_components',
            }
        }
    },

    compass: {
        dev: {
            options: {
                sourcemap: true,
                httpPath: '/',
                sassDir: '<%= config.app %>/sass',
                cssDir: '<%= config.app %>/css',
                imagesDir: 'img',
                imagesPath: '<%= config.app %>/images',
                fontsDir: '<%= config.app %>/fonts',
                javascriptsDir: '<%= config.app %>/js',
                generatedImagesDir: '<%= config.app %>/images',
                environment: 'production',
                outputStyle: 'expanded',
                noLineComments: false,
                relativeAssets: false
            }
        }
    },

    // uglify js files and place in minified dir
    uglify: {
        my_target: {
            files: [{
                expand: true,
                cwd: '<%= config.app %>/js/src',
                src: '**/*.js',
                dest: '<%= config.app %>/js',
                flatten: true
            }]
        }
    },

    copy: {
        jquery: {
            expand: true,
            cwd: 'bower_components/jquery/dist/',
            src: 'jquery.min.js',
            dest: '<%= config.app %>/js/lib/',
            flatten: true,
            filter: 'isFile'
        },
        modernizr: {
            expand: true,
            cwd: 'bower_components/modernizr/',
            src: 'modernizr.js',
            dest: '<%= config.app %>/js/lib/',
            flatten: true,
            filter: 'isFile'
        }
    }
});

grunt.registerTask('serve', function (target) {
    grunt.task.run([
        'wiredep',
        'connect',
        'watch',
        'copy',
        'compass'
    ]);
});
};

Answer 2

您已将服务器的根目录指定为 base.app，这可能是 app 文件夹。一旦你在那里有了根目录，你就不可能使用 http 服务器访问它之外的文件。在你的情况下 bower_components 在你的服务器根目录之外，这使得它无法从服务器访问。

快速解决方法是 change bower_components folder 到 app 内的某个位置，以便您的服务器可以提供这些文件。我从来没有使用过 grunt-wiredep 所以我不知道是否还有其他一些 obvious 方式。

缺少 Bower 组件

Missing Bower Compoents

html

javascript

gruntjs

bower

grunt-wiredep