CODEWITHSUNDEEP
bowervisual-studio-2015
Jason Gerstorff
Jason Gerstorff

Reputation: 266

Visual Studio 2015 RTM - Where did bower_components go?

It looks like with Visual Studio 2015 RTM, the bower_components folder is gone and packages are saving directly to the wwwroot/lib/ folder. This would be verified by the fact that the default gulpfile no longer has a function for copying files from bower_components to wwwroot.

However in the default project.json, bower_components is still in the "exclude" property even though the folder no longer exists. Possibly an oversight?

Does anyone know what is going on with this? I didn't see anything about it in the release notes or the bug fixes and known issues articles. Also, I thought the entire point of the wwwroot folder was to house only white-listed files which will be needed by the actual site. Which, I guess there is no harm in making library code available here, it actually makes our lives easier as we add new libraries, but throughout the beta period the bower_components folder was pretty strictly separated.

https://www.visualstudio.com/en-us/news/vs2015-vs.aspx

https://support.microsoft.com/en-us/kb/3025135

Upvotes: 4

Views: 2762

Answers (2)

Guy Boicey
Guy Boicey

Reputation: 77

I understand that by having a bower_components folder instead of the content being in the wwwroot/lib folder adds more work via gulp. But that translates to more control. I also notice that having a bower_componets folder I get more content like readme, source code, change log, etc... What would be nice is to have an option to do it one way or another. Or just follow the steps below.

By having a bower_components folder I can control minifying, I can control which files are put into the wwwroot/lib folder. I can also control which files I don't want out on the web like .bower.json, LICENSE, or MIT-LICENSE.txt, etc. I can also combine and minify files myself or at least I can control that the *min.js, or min.css files are published only without having the none min files published. Having the bower components published to the wwwroot/lib to me seems as if the wwwroot/lib is more bloated than stream lined.

I did the following

  1. Show All Files
  2. Right Mouse Click on bower.json | Show in Solution Explore

  3. Expanded the bower.json file | edited the .bowerrc file and Changed to:

    {
     "directory": "bower_components"
}

  4. Toggle Show All Files to hide files.

  5. Right mouse click Dependencies | Restore Packages. This will restore the bower packages into the bower_components folder.
  6. Remove wwwroot/lib folder

  7. Here is a lean gulp.js that will not copy anything but min files, no map files, no none min files, no license file, etc... For bootstrap this will copy the font files

    "use strict";

var gulp = require("gulp"),
    rimraf = require("rimraf")

var paths = {
    bower: "./bower_components/",
    lib: "./wwwroot/lib/"
};

gulp.task('clean', function (callback) {
    rimraf(paths.lib, callback);
});

gulp.task('default', ['clean'], function () {
    var bower = {
        "bootstrap": "bootstrap/dist/**/*.{min.js,min.css,ttf,svg,woff,eot}",
        "jquery": "jquery/dist/jquery.min.js",
        "jquery-validation": "jquery-validation/dist/jquery.validate.js",
        "jquery-validation-unobtrusive": "jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"
    };

    for (var destinationDir in bower) {
        gulp.src(paths.bower + bower[destinationDir])
            .pipe(gulp.dest(paths.lib + destinationDir));
    }
});

There is more to this, but I think this is a good start. The _Layout.cshtml needs modifying. There also needs to be a gulp task that would create a development version of the lib folder which would have the none min files or include the map files.

One last thing I believe you will need to add this to the project.json file

  "exclude": [
    "wwwroot",
    "node_modules",
    "bower_components"
  ],

And this

  "scripts": {
    "prepublish": [ "npm install", "bower install", "gulp clean", "gulp default" ]
  }

Upvotes: 2

Joe Audette
Joe Audette

Reputation: 36736

I've been trying to adjust my project to match the changes in the latest VS project template for asp.net 5 as well.

From what I can tell, previously there was a task to copy stuff from the bower_components folder into wwwroot/lib

But now that is not needed because they put the bower files directly in wwwroot/lib and this happens because there is a new file in the root of the web app named .bowerrc which has the following content:

{
  "directory": "wwwroot/lib"
}

so I think bower_components folder is no longer needed lots of related changes in gruntfile.js as well.

Upvotes: 10

Related Questions