Wiredep + Gulp will not generate any script tags and paths

Question

I've been trying to get wiredep and gulp to generate my script tags and paths for scripts loaded (and --save-dev) via Bower, as shown in myriad tutorials but no matter what I do, it will copy the html source file just fine but won't inject the script tags and paths.

I only want the Bower.json files wired in at the moment, so I've removed parts of sample scripts that process css files, the inject section that's included in most of the examples.

gulpfile.js: (summary only)

gulp.task( 'bower', function () {
    var wiredep = require( 'wiredep' ).stream;
    return gulp.src( './src/index.html' )
        .pipe( wiredep( {
                            cwd      : './src',
                            directory: './bower_components/',
                            bowerJson: require( './bower.json' ),
                        } ) )
        .pipe( gulp.dest( './build' ) );
} );

bower.json file

{
  "name": "SomeProject",
  "description": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "devDependencies": {
    "angular-mocks": "~1.4.9",
    "angular": "~1.4.9",
    "jquery": "components/jquery#^2.2.0",
    "angular-aria": "^1.5.0"
  }
}

.bowerrc file

{
  "directory" : "bower_components"
}

index.html file last few lines

    </div>
</div>

<!--bower:js-->
<!--endbower-->
<script src="js/app.js" type = "text/javascript"></script>
</body>
</html>

So, I run it and it copies the index.html file to the correct location but the output in the html file is exactly the same as the input.

Result:

    </div>
</div>

<!--bower:js-->
<!--endbower-->
<script src="js/app.js" type = "text/javascript"></script>
</body>
</html>

What am I missing?

Things that I've tried that make no difference:

• Adding or removing spaces from and
• Requiring wiredep at the head of the gulpfile.js and within the gulp.task
• Calling wiredep with or without options
• Trying different options and different paths
• Using variables for sources and destinations instead of inlineglobs
• Using trailing slashes or not
• Using ./ or not
• Using an empty .bowerrc file vs. one as above
• Renaming the gulp task
• Removing the "ignore" section from the bower.json file or not

Answer 1

The major problem was in your bower.json file. Change devDependencies to dependencies, because that is what wiredep expects. It wasn't finding what it was looking for. :

bower.json

{
  "name": "SomeProject",
  "description": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular-mocks": "~1.4.9",
    "angular": "~1.4.9",
    "jquery": "components/jquery#^2.2.0",
    "angular-aria": "^1.5.0"
  }
}

Also, your gulpfile's wiredep didn't need any arguments

gulpfile.js

gulp.task( 'bower', function () {
  var wiredep = require( 'wiredep' ).stream;
  return gulp.src( './src/index.html' )
    pipe( wiredep( {
        // cwd      : './src',      // <--------------- TAKE THIS LINE OUT
        // directory: './bower_components/',   /// <--- AND REMOVE ALL THESE
        // bowerJson: require( './bower.json' ) /// <--- (UNLESS YOUR GULPFILE IS IN ANOTHER DIRECTORY)
        // onError : function(err) {       /// <--- I used these for debugging. Uncomment them and  you'll see things be more verbose when you call this gulp task.
        //     console.log("Wiredep error: "+err);
        // },
        // onFileUpdated : function (filePath) {
        //     console.log('File path was updated: ' + filePath);
        // },
        // onPathInjected : function (fileObject) {
        //     console.log('Path injected: ' + JSON.stringify(fileObject));
        // }
    }))
  .pipe( gulp.dest( './build' ) );
} );