爲什麼不將Bower組件加載，除非移動到/ scripts文件夾中？

Question

我使用yoeoman Angular generator來創建一個新項目。當我使用下面的gulp文件啓動服務器時，我收到了Angular模塊注入器錯誤，直到我將bower_components文件夾中的所有文件移動到應用程序/腳本中。這是設計嗎？當我的index.html中的腳本引用指向應用程序文件夾之外的一個級別到bower_component文件夾時，它們未被加載。

這是我開始我的服務器用命令：

gulp serve 

    // Generated on 2015-11-06 using generator-angular 0.14.0 
'use strict'; 

var gulp = require('gulp'); 
var $ = require('gulp-load-plugins')(); 
var openURL = require('open'); 
var lazypipe = require('lazypipe'); 

var rimraf = require('rimraf'); 
var wiredep = require('wiredep').stream; 
var runSequence = require('run-sequence'); 

var yeoman = { 
    app: require('./bower.json').appPath || 'app', 
    dist: 'dist' 
}; 

var paths = { 
    scripts: [yeoman.app + '/scripts/**/*.js'], 
    styles: [yeoman.app + '/styles/**/*.scss'], 
    test: ['test/spec/**/*.js'], 
    testRequire: [ 
    yeoman.app + '/bower_components/angular/angular.js', 
    yeoman.app + '/bower_components/angular-mocks/angular-mocks.js', 
    yeoman.app + '/bower_components/angular-resource/angular-resource.js', 
    yeoman.app + '/bower_components/angular-cookies/angular-cookies.js', 
    yeoman.app + '/bower_components/angular-sanitize/angular-sanitize.js', 
    yeoman.app + '/bower_components/angular-route/angular-route.js', 
    'test/mock/**/*.js', 
    'test/spec/**/*.js' 
    ], 
    karma: 'karma.conf.js', 
    views: { 
    main: yeoman.app + '/index.html', 
    files: [yeoman.app + '/views/**/*.html'] 
    } 
}; 

//////////////////////// 
// Reusable pipelines // 
//////////////////////// 

var lintScripts = lazypipe() 
    .pipe($.jshint, '.jshintrc') 
    .pipe($.jshint.reporter, 'jshint-stylish'); 

var styles = lazypipe() 
    .pipe($.sass, { 
    outputStyle: 'expanded', 
    precision: 10 
    }) 
    .pipe($.autoprefixer, 'last 1 version') 
    .pipe(gulp.dest, '.tmp/styles'); 

/////////// 
// Tasks // 
/////////// 

gulp.task('styles', function() { 
    return gulp.src(paths.styles) 
    .pipe(styles()); 
}); 

gulp.task('lint:scripts', function() { 
    return gulp.src(paths.scripts) 
    .pipe(lintScripts()); 
}); 

gulp.task('clean:tmp', function (cb) { 
    rimraf('./.tmp', cb); 
}); 

gulp.task('start:client', ['start:server', 'styles'], function() { 
    openURL('http://localhost:9000'); 
}); 

gulp.task('start:server', function() { 
    $.connect.server({ 
    root: [yeoman.app, '.tmp'], 
    livereload: true, 
    // Change this to '0.0.0.0' to access the server from outside. 
    port: 9000 
    }); 
}); 

gulp.task('start:server:test', function() { 
    $.connect.server({ 
    root: ['test', yeoman.app, '.tmp'], 
    livereload: true, 
    port: 9001 
    }); 
}); 

gulp.task('watch', function() { 
    $.watch(paths.styles) 
    .pipe($.plumber()) 
    .pipe(styles()) 
    .pipe($.connect.reload()); 

    $.watch(paths.views.files) 
    .pipe($.plumber()) 
    .pipe($.connect.reload()); 

    $.watch(paths.scripts) 
    .pipe($.plumber()) 
    .pipe(lintScripts()) 
    .pipe($.connect.reload()); 

    $.watch(paths.test) 
    .pipe($.plumber()) 
    .pipe(lintScripts()); 

    gulp.watch('bower.json', ['bower']); 
}); 

gulp.task('serve', function (cb) { 
    runSequence('clean:tmp', 
    ['lint:scripts'], 
    ['start:client'], 
    'watch', cb); 
}); 

gulp.task('serve:prod', function() { 
    $.connect.server({ 
    root: [yeoman.dist], 
    livereload: true, 
    port: 9000 
    }); 
}); 

gulp.task('test', ['start:server:test'], function() { 
    var testToFiles = paths.testRequire.concat(paths.scripts, paths.test); 
    return gulp.src(testToFiles) 
    .pipe($.karma({ 
     configFile: paths.karma, 
     action: 'watch' 
    })); 
}); 

// inject bower components 
gulp.task('bower', function() { 
    return gulp.src(paths.views.main) 
    .pipe(wiredep({ 
     directory: yeoman.app + '/bower_components', 
     ignorePath: '..' 
    })) 
    .pipe(gulp.dest(yeoman.app + '/views')); 
}); 

/////////// 
// Build // 
/////////// 

gulp.task('clean:dist', function (cb) { 
    rimraf('./dist', cb); 
}); 

gulp.task('client:build', ['html', 'styles'], function() { 
    var jsFilter = $.filter('**/*.js'); 
    var cssFilter = $.filter('**/*.css'); 

    return gulp.src(paths.views.main) 
    .pipe($.useref.assets({searchPath: [yeoman.app, '.tmp']})) 
    .pipe(jsFilter) 
    .pipe($.ngAnnotate()) 
    .pipe($.uglify()) 
    .pipe(jsFilter.restore()) 
    .pipe(cssFilter) 
    .pipe($.minifyCss({cache: true})) 
    .pipe(cssFilter.restore()) 
    .pipe($.rev()) 
    .pipe($.useref.restore()) 
    .pipe($.revReplace()) 
    .pipe($.useref()) 
    .pipe(gulp.dest(yeoman.dist)); 
}); 

gulp.task('html', function() { 
    return gulp.src(yeoman.app + '/views/**/*') 
    .pipe(gulp.dest(yeoman.dist + '/views')); 
}); 

gulp.task('images', function() { 
    return gulp.src(yeoman.app + '/images/**/*') 
    .pipe($.cache($.imagemin({ 
     optimizationLevel: 5, 
     progressive: true, 
     interlaced: true 
    }))) 
    .pipe(gulp.dest(yeoman.dist + '/images')); 
}); 

gulp.task('copy:extras', function() { 
    return gulp.src(yeoman.app + '/*/.*', { dot: true }) 
    .pipe(gulp.dest(yeoman.dist)); 
}); 

gulp.task('copy:fonts', function() { 
    return gulp.src(yeoman.app + '/fonts/**/*') 
    .pipe(gulp.dest(yeoman.dist + '/fonts')); 
}); 

gulp.task('build', ['clean:dist'], function() { 
    runSequence(['images', 'copy:extras', 'copy:fonts', 'client:build']); 
}); 

gulp.task('default', ['build']); 

Answer 1

使用gulp-connect middleware連接bower-components文件夾是app文件夾之外。

如果運行gulp serve，那麼你需要更換

gulp.task('start:server', function() { 
    $.connect.server({ 
    root: [yeoman.app, '.tmp'], 
    livereload: true, 
    // Change this to '0.0.0.0' to access the server from outside. 
    port: 9000 
    }); 
}); 

有了這一個

gulp.task('start:server', function() { 
    $.connect.server({ 
    root: [yeoman.app, '.tmp'], 
    livereload: true, 
    // Change this to '0.0.0.0' to access the server from outside. 
    port: 9000, 
    middleware: function(connect) { 
     return [connect().use('/bower_components', connect.static('bower_components'))]; 
    } 
    }); 
});