Bower安装了未在bower.json中定义的组件到asp.net 5应用程序

时间:2015-05-29 07:04:38

标签: asp.net bower asp.net-core asp.net-core-mvc bower-install

在ASP.NET 5应用程序中使用Bower尝试安装客户端软件包时遇到问题。我在 bower.json 文件中定义了一些我要安装到我的应用程序的软件包,如下所示:

 {
  "name": "bower",
  "license": "Apache-2.0",
  "private": true,
  "dependencies": {
    "jquery": "1.11.2",
    "modernizr": "2.8.3",
    "bootstrap": "3.3.4",
    "jquery.uniform": "2.1.2",
    "fluidbox": "1.4.3",
    "owl-carousel": "1.3.2",
    "photo.swipe": "4.0.8",
    "magnific-popup": "1.0.0",
    "slippry": "1.2.9",
    "fastclick": "1.0.6",
    "imagesloaded": "3.1.8",
    "jquery-validate": "1.13.1",
    "fitvids": "1.1.0",
    "jquery-gridrotator": "0.1.0" }

保存之后,我在隐藏的 bower_components 文件夹中看到了一些我没有在bower.json文件中定义的其他软件包,如下所示:

enter image description here

运行grunt任务后,我看到我的应用程序安装了一些奇怪的软件包。

enter image description here

我的简单gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        bower: {
            install: {
                options: {
                    targetDir: "wwwroot/lib",
                    layout: "byComponent",
                    cleanTargetDir: true
                }
            }
        }
    });

    grunt.registerTask("default", ["bower:install"]);

    grunt.loadNpmTasks("grunt-bower-task");
};

那么,我怎样才能将我想要的软件包安装到我的ASP.NET 5应用程序中呢?非常感谢你。

1 个答案:

答案 0 :(得分:0)

它们是bower通过示例安装的依赖项Masonry使用此依赖项

{
  "name": "masonry",
  "version": "3.3.0",
  "description": "Cascading grid layout library",
  "main": "masonry.js",
  "dependencies": {
    "get-size": "~1.2.2",
    "outlayer": "~1.4.0",
    "fizzy-ui-utils": "~1.0.1"
  }
}

我建议您使用dest,js_dest,css_dest和font_dest按类型拆分文件,并将选项keepExpandedHierarchy设置为false,如下所示

           {
                dest: "wwwroot/lib",
                js_dest: "wwwroot/lib/js",
                css_dest: "wwwroot/lib/css",
                fonts_dest: "wwwroot/lib/font",
                options: {
                    keepExpandedHierarchy: false
                }
            }

并使用像includeSource这样的模块添加cshtml文件中的所有文件

includeSource: {
            layout: {
                files: {
                    'Views/Shared/_Layout.cshtml': 'Views/Shared/_Layout.cshtml'
                }
            },
            options: {
                basePath: "wwwroot/lib/js",
                baseUrl: '~/lib/',
            }
        }

并且您必须在页面中添加标记

 <!-- include: "type": "js", "files":"**/*.js", "ordering": "top-down" -->
    <!-- /include -->

希望有所帮助