ASP.NET 5 Client Side Depdency Management - Bower

Question

I'm trying out the new ASP.NET 5 with MVC 6, and I'm using bower to manage all my client-side dependencies. Everything is working fine.

But I have a question: When I add a dependency (let's say jQuery). It adds both the /dist and /src along with bower configuration files to the /lib folder of wwwroot. How do I make it include just the compiled source for usage? (So I can reference it in my pages via /lib/jquery/jquery.js?

Answer 1

I have recently been playing in this space and following is something that I have tried:

1. Deleted the .bowerrrc file to enable installing in the default bower_components folder under the project folder rather than under wwwroor\lib as anything under wwwroot tends to get published.
2. Added "main-bower-files": "2.9.0" to package.json. This package gets all the files mentioned in the main property of each installed package's bower.json files.

3. Created a gulp task using the above package gulp.task('copyMainFiles', function () { return gulp.src(mainBowerFiles(), { base: 'bower_components' }) .pipe(gulp.dest('wwwroot/lib')); });

4. Added a postrestore step to your application's project.json file "scripts": { "postrestore": "gulp copyMainFiles", "prepublish": [ "npm install", "bower install", "gulp clean", "gulp min" ] }

5. Updated my application's bower.json to copy files which are not listed in main (like some packages do not have min files as main files..ex: jQuery). The following settings are read by main-bower-files:

   "overrides": { "jquery": { "main": [ "dist/jquery.js", "dist/jquery.min.js" ] }, "hammer.js": { "main": [ "hammer.js", "hammer.min.js" ] }, "bootstrap": { "main": [ "./dist/js/bootstrap.js", "./dist/js/bootstrap.min.js", "./dist/css/bootstrap.css", "./dist/css/bootstrap.min.css" ] } }

6. Finally had to update the jquery-validation package to use 1.14.0 instead of 1.11.1 as the previous version does not dist folder and indeed no bower.json...