使用wiredep加载库

时间:2015-06-12 00:38:20

标签: angularjs gulp bower

我正在AngulaJS做我的第一步。我尝试通过Bower和Gulpfile加载依赖。

我有instaled wiredep,gulp-inject和bower。在我的Gulpfile.js中,我定义了下一个任务:

var request = new HttpRequestMessage(HttpMethod.Get, "...");
request.Headers.Accept.Clear();
request.Headers.Accept.Add(new MediaTypeWithQualityHeaderValue("application/..."));
var response = await client.SendAsync(request);
var model = await response.EnsureSuccessStatusCode().Content.ReadAsAsync<SomeModel>();

当我执行gulp命令时,app / stylesheets中允许的css被正确包含,但app / lib中允许的JS文件没有。控制台输出是:

'use strict';

var gulp = require('gulp');
var inject = require('gulp-inject');
var wiredep = require('wiredep').stream;

gulp.task('inject', function() {
    var sources = gulp.src(['./app/scripts/**/*.js','./app/stylesheets/**/*.css']);
    return gulp.src('index.html', {cwd: './app'}).pipe(inject(sources, {
        read: false,
        ignorePath: '/app'
    })).pipe(gulp.dest('./app'));
});

gulp.task('wiredep', function () {
    gulp.src('./app/index.html').pipe(wiredep({
        directory: './app/lib'
    })).pipe(gulp.dest('./app'));
});

gulp.task('watch', function() {
    gulp.watch(['./app/stylesheets/**/*.css'], ['css', 'inject']);
    gulp.watch(['./app/scripts/**/*.js', './Gulpfile.js'], ['jshint', 'inject']);
    gulp.watch(['./bower.json'], ['wiredep']);
});

gulp.task('default', ['watch', 'inject', 'wiredep']);

我在index.html中定义了下一行:

[21:37:17] Using gulpfile /var/www/angular/fullcity-dashboard/Gulpfile.js
[21:37:17] Starting 'watch'...
[21:37:17] Finished 'watch' after 15 ms
[21:37:17] Starting 'inject'...
[21:37:17] Starting 'wiredep'...
[21:37:17] Finished 'wiredep' after 3.2 ms
[21:37:17] gulp-inject 1 files into index.html.
[21:37:17] Finished 'inject' after 65 ms
[21:37:17] Starting 'default'...
[21:37:17] Finished 'default' after 15 μs

有什么想法吗?

更新1

我在项目根目录中有我的文件.bowerrc,其中包含下一个内容:

<!-- bower:js -->
<!-- endbower -->
<!-- inject:js -->
<!-- endinject -->

我的bower.json:

{
    "directory": "app/lib"
}

我通过凉亭安装了角度,角度包在app / lib / angular下。

1 个答案:

答案 0 :(得分:1)

我会说你的任务没有按顺序执行,因为你没有返回任何流或者在其中一些中执行任何回调(参见这里的注释〜https://github.com/gulpjs/gulp/blob/master/docs/API.md#deps

这可能意味着您的wiredep任务没有./app/index.html可供使用。我将两个函数都移到一个任务中,例如

gulp.task('injectables', function() {
    var sources = gulp.src(['./app/scripts/**/*.js','./app/stylesheets/**/*.css'], {read: false});
    return gulp.src('index.html', {cwd: './app'})
        .pipe(wiredep())
        .pipe(inject(sources, {
            ignorePath: '/app'
        }))
        .pipe(gulp.dest('./app'));
});