使用MVC5中的Bundles来定义Css样式集合和Js文件集合

在制作Web项目时，往往会有很多个页面调用相同的JS和CSS文件，每一次新建一个页面，都需要复制粘贴相同的样式文件和Js文件，即感到麻烦又占用页面空间，所以我们可以使用Bundles来定义一些相同的引用文件，然后在页面中一句话调用这些文件即可。

首先创建一个MVC应用，在App_Start文件夹下找到BundleConfig.cs类文件，在RegisterBundles方法里添加如下代码：

            bundles.Add(new ScriptBundle("~/Views/Bootstrap-Table/Js").Include(
                "~/Scripts/HUI/js/jquery.min.js",
                "~/Scripts/HUI/js/bootstrap.min.js",
                "~/Scripts/HUI/js/plugins/layer/laydate/laydate.js",
                "~/Scripts/bootstrap-table-develop/dist/bootstrap-table.js",
                "~/Scripts/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.min.js",
                "~/Scripts/bootstrap-select/js/bootstrap-select.min.js",
                "~/Scripts/bootstrap-select/js/i18n/defaults-zh_CN.min.js"
                ));
            bundles.Add(new StyleBundle("~/Views/Bootstrap-Table/Css").Include(
                "~/Scripts/HUI/css/bootstrap.min.css",
                "~/Scripts/HUI/css/font-awesome.min.css",
                "~/Scripts/HUI/css/animate.css",
                "~/Scripts/HUI/css/style.css",
                "~/Scripts/bootstrap-table-develop/dist/bootstrap-table.css",
                "~/Scripts/bootstrap-select/css/bootstrap-select.min.css"
                ));

然后在页面head中调用以下指令，就可以将以上的样式和Js文件引用到页面中了：

    @Scripts.Render("~/Views/Bootstrap-Table/Js")
    @Styles.Render("~/Views/Bootstrap-Table/Css")

注： bundles.Add(new StyleBundle("~/Views/Bootstrap-Table/Css") 其中“~/Views/Bootstrap-Table/Css”为自定义的虚拟路径，无需在应用中存在，其实跟变量名的作用差不多，定义变量名称和值，调用变量就获得了它的值。