Отсутствующие компоненты Bower

Я пытаюсь использовать grunt-wiredep для автоматической вставки любых компонентов Bower в мой html. Довольно прямолинейно, но я не уверен, как установить правильный путь к каталогу беседки при запуске локального хоста. На данный момент я получаю следующую ошибку:

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

пакет.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
            }
        }
    }

person Galactic Ranger    schedule 19.01.2015    source источник
comment
эй, вы пытались запустить bower install в корневом каталоге проекта?   -  person andrusieczko    schedule 19.01.2015
comment
@andrusieczko да у меня есть   -  person Galactic Ranger    schedule 19.01.2015


Ответы (2)


Я смог решить эту проблему, изменив мой файл 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'
    ]);
});
};
person Galactic Ranger    schedule 19.01.2015

Вы указали корень сервера как base.app, который, вероятно, является папкой app. Если у вас есть корень, вы не можете получить доступ к файлам за пределами этого сервера с помощью http. В вашем случае bower_components находится за пределами корня вашего сервера, что делает его недоступным с сервера.

Быстрым решением будет изменить папку bower_components на какое-то место внутри app чтобы ваш сервер мог обслуживать эти файлы. Я никогда не использовал grunt-wiredep, поэтому не знаю, есть ли другой очевидный способ.

person sabithpocker    schedule 19.01.2015