MVC-采用Bundles方式引入css和js文件

优点:修改js或css时会自动生成hash版本号。

缺点:需要在BundleConfig中先添加对应的文件,然后在html中再引用对应的bundle,多操作了一步。

web.config中 <compilation debug="true" targetFramework="4.5" />

1、BundleConfig

  如果是调试模式,前端页面会显示真实的js、css路径,生产环境是会显示前面的路径。在bundles中还可以使用通配符引用。

 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));
 bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));

2、前端页面

@Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

3、Global文件中

  要在Application_Start事件中注册Bundles。

BundleConfig.RegisterBundles(BundleTable.Bundles);

4、说明

  只有在生产环境,修改js、css文件才会生成版本哈希值。

  在生产环境,使用bundles的方式会自动引用压缩版min文件。

5、截图说明

  调试模式

  生产环境

时间: 2024-10-13 15:14:19

MVC-采用Bundles方式引入css和js文件的相关文章

Yii2引入css和js文件

引入方式有多种: 1.可以直接在视图页面上引入 <?php use yii\helpers\Html; ?> <?=Html::cssFile('@web/css/index.css')?> <?=Html::jsFile('@web/js/jquery.min.js')?> 2.可以直接写原生代码引入,路径是项目目录/web/css 或者/js <script src="js/nav.js"></script> 3.可以使用

引入CSS和JS文件时 到底应该在head标签中还是body中?

引入CSS在head中, JS建议在body的尾部引入; 这样有利于加载速度 <!DOCTYPE html> <html>   <head>      <!--网页页面字符集-->     <meta charset="utf-8">       <!--让IE使用最新的渲染模式-->     <meta http-equiv="X-UA-Compatible" content="

laravel引入css和js文件

laravel默认从public开始,所以静态文件放到public下开始,只需要把你想要加载的css文件和js文件放入public文件夹中即可. 这里以我用得layui为例: 在项目文件中加载即可: <link rel="stylesheet" href="{{URL::asset('layui-v2.5.4/layui/css/layui.css')}}"> <script type="text/javascript" src

MVC bundle(包扎)CSS或是JS文件

以前写asp.net网页时,会在<head>节点中引用很多样式文件或是javascript文件,如下图左大括号的引用语句. 现在在MVC应用程序中,可以使用使用Bundle来捆一起, 在Solution Explorer窗口应用程序下,找到App_Start目录.在此目录下创建一个类,命名为“BundleConfig.cs” 并修改namespace: Insus.NET 上图中的#11行的蓝下划线的名称,将就是以View应用的名称.接下来,我们打开Global.asax.cs文件,分三步,第

在引入的css或者js文件后面加参数的作用

有时候可能会遇到js或者css文件引用后传递参数: css和js带参数(形如.css?v=与.js?v=) <script type=”text/javascript” src=”jb51.js?version=1.2.6″></script> <link rel=’stylesheet’ href=’base.css?version=2.3.3′ type=’text/css’ /> 使用参数有两种可能: 第一.脚本并不存在,而是服务端动态生成的,因此带了个版本号,以

Spring工程视图中如何引入css和js样式

之前我们引入css和js样式是这样的 1 <!--bootstrap的css样式--> 2 <link href="css/bootstrap.min.css" rel="stylesheet" > 3 <!--jquery ui的js样式--> 4 <script src="jquery-ui-1.12.1/jquery-ui.min.js" ></script> 而String工程里

CI框架引入外部css和js文件

首先在项目根目录下建立assets文件夹,在这个文件夹下再建立css和js文件夹分别放置css和js文件 然后,在项目根目录下建立.htaccess文件 内容如下: RewriteEngine on      RewriteCond $1 !^(index\.php|images|robots\.txt|js|css|upimg|artDialog|style|sphinx_auth|assets)      RewriteRule ^(.*)$ index.php/$1 [L] 把上面的ass

使用System.Web.Optimization对CSS和JS文件合并压缩

在ASP.NET MVC 中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现. 大致步骤如下: 1.App_Start添加: public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new StyleBundle("~/Themes/Homecss&q

使用gulp自动化打包合并前端静态资源(CSS、JS文件压缩、添加版本号)

现在正在做的项目更新迭代比较频繁,会经常对前端代码打包部署,手动整合代码文件很麻烦并且浪费时间,所以决定使用gulp来代替手工完成这项工作. 前端静态资源在发版更新时会面临客户端浏览器缓存的问题(可参考这篇文章),解决这个问题可以采用两类方法:覆盖方法(引用资源时加版本号,不修改资源文件名).非覆盖方法(修改资源文件名),本篇文章主要采用的是第一种加版本号的方式,主要用gulp给静态资源自动加版本号和压缩CSS.JS. 原理:通过对JS,CSS文件内容进行Hash运算,生成一个文件的唯一Hash