失踪Bower组合

Question

我试图利用grunt-wiredep自动注入任何保龄球组件到我的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文件更改为监视，然后连接(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位于服务器根目录之外，这使得服务器无法访问它。

一个快速的解决方法是将 folder放到app中的某个位置，以便您的服务器能够提供这些文件。我从来没有使用过grunt-wiredep，所以我不知道是否还有其他明显的方法。