1

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)

これが私の構造です

事業

アプリ(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 -->

グラントファイル

        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
            }
        }
    }
4

2 に答える 2

3

最初に 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'
    ]);
});
};
于 2015-01-19T06:51:38.487 に答える
0

base.appおそらくappフォルダーであるサーバーのルートを指定しました。そこにルートがあると、httpサーバーを使用してその外部のファイルにアクセスすることはできなくなります。あなたの場合bower_components、サーバールートの外にあるため、サーバーからアクセスできません。

簡単な修正は、サーバーがそれらのファイルを提供できるように、フォルダーを内部のどこかに変更することです。bower_componentsapp私は使ったことがないので、他に明らかなgrunt-wiredep方法があるかどうかはわかりません。

于 2015-01-19T06:58:46.757 に答える