使用gulp在MEAN应用程序上获取有关angular.js的404

时间:2016-06-10 21:11:44

标签: angularjs express gulp bower mean-stack

我正在尝试使用gulp和bower设置一个新的MEAN应用程序,但是当我启动应用程序时,我的bower依赖项上仍然出现404错误。我使用快速生成器来获取我的文件夹结构,但我想使用gulp将我的前端依赖从bower和我的javascript文件注入到我的索引文件中。

文件夹结构:

.
+-- bin
|   +-- www
+-- lib (bower_components)
|   +-- angular
|   +-- angular-ui-router
+-- node_modules
|   +-- ...
+-- public
|   +-- javascripts
|   |   +-- angularApp.js
+-- routes
|   +-- index.js
|   +-- users.js
+-- views
|   +-- index.ejs
+-- app.js
+-- gulpfile.js
+-- bower.json
+-- package.json

我的gulpfile:

'use strict';

var gulp = require('gulp'),
    browserSync = require('browser-sync'),
    inject = require('gulp-inject'),
    nodemon = require('gulp-nodemon'),
    wiredep = require('wiredep').stream,
    reload = browserSync.reload;

var paths = {
    scripts: ['public/javascripts/**/*.js']
};

var nodemonOptions = {
    script: 'bin/www',
    ext: 'js',
    env: { 'NODE_ENV': 'development' },
    verbose: false,
    ignore: [],
    watch: ['bin/*', 'routes/*', 'app.js']
};

gulp.task('inject', function(){
    return gulp.src('./views/index.ejs')
        .pipe(inject(gulp.src(paths.scripts, {read:false})))
        .pipe(gulp.dest('./views'));
});

gulp.task('wiredep', function(){
    gulp.src('./views/index.ejs')
        .pipe(wiredep({
            directory: './lib',
            bowerJson: require('./bower.json')
        }))
        .pipe(gulp.dest('./views/'));
});

gulp.task('start', function(){
    nodemon({
        script: 'bin/www',
        ext: 'js',
        env: { 'NODE_ENV': 'development' },
        verbose: false,
        ignore: [],
        watch: ['bin/*', 'routes/*', 'app.js']
    })
        .on('restart');
});

gulp.task('default', ['inject', 'wiredep', 'start'], function(){
    gulp.watch(paths.scripts, ['inject', reload]);
});

我知道我的gulpfile将angular,angular-ui-router和angularApp.js注入到我的index.ejs文件中,它们显示为:

<script src="../lib/angular/angular.js"></script>
<script src="../lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/public/javascripts/angularApp.js"></script>

但是当我启动应用程序时,localhost:3000上没有显示任何内容,而是在控制台中有3个错误,在localhost上给我GET 404错误:3000 / lib / angular / angular.js等等其他2文件。

如果格式不正确或者我没有提供足够的信息,请致歉,如果我需要提供更多代码/信息,请与我们联系。

1 个答案:

答案 0 :(得分:1)

我还没有使用快速生成器,但是在你的app.js服务器代码中,你是否告诉Express提供lib中的文件?尝试类似:

app.use('/lib', express.static(process.cwd() + '/lib'));