Load libraries with wiredep

Question

I am doing my first steps in AngulaJS. And i try load dependences via Bower and a Gulpfile.

I have instaled wiredep, gulp-inject and bower. In my Gulpfile.js i have defined the next tasks:

'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']);

When i execute the gulp command, the css allowed in app/stylesheets is included correctly, but the JS files allowed in app/lib not. The console output is:

[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

I have defined the next lines in my index.html:

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

Any ideas ?

Update 1

I have my file .bowerrc in the project root with the next content:

{
    "directory": "app/lib"
}

And my bower.json:

{
  "name": "sarasa",
  "version": "0.0.1",
  "description": "Sarasa",
  "dependencies": {
    "angular": "~1.4.0"
  }
}

I installed angular via bower, and the angular package is under app/lib/angular.

Answer 1

I'd say your tasks are executing out of order as you aren't returning any streams or executing any callbacks in some of them (see the note here ~ https://github.com/gulpjs/gulp/blob/master/docs/API.md#deps)

This probably means your wiredep task doesn't have ./app/index.html to work on. I'd move both functions into the one task, eg

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'));
});