Web Essentials之Bundling_html/css_WEB-ITnose
返回Web Essentials功能目录
本篇目录
- 介绍
- 样例文件
- 已知行为
这篇要讲的是Bundling,我看很多人把它翻译为捆绑,如果你喜欢你也可以这么理解,我是不太习惯,我还是喜欢它为bundling,或者bundle。
Bundling允许我们组合和压缩相同类型的文件来提升网站的性能。
啥是bundle?
Web Essentials的bundle文件是用于组合和压缩相同类型的一组文件的一个食谱,它可以限制浏览器将要下载的数据量。
Web Essentials提供了两种bundling类型:
- .bundle:用于CSS和JS文件 对于CSS,会输出一个XML类型的bundle食谱文件,一个目标CSS文件和一个源代码的压缩版本(前提是在该食谱文件中打开了minify选项)。
- .sprite:用于图片文件(png,jpg和gif)。 它生成了一个sprite(很多人翻译为精灵)图片,对于background属性中的所有坐标都具有样例代码的CSS,具有保持相同background属性的混淆的LESS和SASS文件和一个自定义的映射文件(json)。
如何制造一个bundle呢?
创建一个bundle的步骤和所有类型文件的步骤是相同的:
- 在解决方案浏览器上,选择你想bundle在一起的文件。
- 在 web Essentials 的上下文菜单中,选择 Create image sprite... 或者 Create CSS/JS bundle file ,取决于你的上下文。
- 为该bundle文件起一个名字。
它如何工作?
基本上,有两种方法来更新bundled的资产(就是放在bundle中的资源文件):
- 更改原料,比如.js,css或者图片。
- 更新bundle的菜谱文件。
样例文件
我刚才已经创建了一个bundle文件,名字为是默认的MyBundle。我将刚才生成的XML文件内容放在下面。可以看到,生成的XML文件已经自己注释好了,只不过是英文的注释。
<?xml version="1.0" encoding="utf-8"?><bundle xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/bundle.xsd"> <settings> <!--Determines if the bundle file should be automatically optimized after creation/update.--> <minify>true</minify> <!--Determine whether to generate/re-generate this bundle on building the solution.--> <runOnBuild>false</runOnBuild> <!--Use absolute path in the generated CSS files. By default, the URLs are relative to generated bundled CSS file.--> <adjustRelativePaths>true</adjustRelativePaths> <!--Specifies a custom subfolder to save files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectory /> </settings> <!--The order of the <file> elements determines the order of the files in the bundle.--> <files> <file>/Content/themes/base/jquery-ui.css</file> <file>/Content/themes/base/jquery.ui.accordion.css</file> <file>/Content/themes/base/jquery.ui.all.css</file> </files></bundle>
下面我在创建一个sprite文件:
对应的XML类型的sprite文件内容如下:
<?xml version="1.0" encoding="utf-8"?><sprite xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/sprite.xsd"> <settings> <!--Determines if the sprite image should be automatically optimized after creation/update.--> <optimize>true</optimize> <!--Determines the orientation of images to form this sprite. The value must be vertical or horizontal.--> <orientation>vertical</orientation> <!--The margin (in pixel) around and between the constituent images.--> <margin>1</margin> <!--File extension of sprite image.--> <outputType>png</outputType> <!--Determine whether to generate/re-generate this sprite on building the solution.--> <runOnBuild>false</runOnBuild> <!--Use full path to generate unique class or mixin name in CSS, LESS and SASS files. Consider disabling this if you want class names to be filename only.--> <fullPathForIdentifierName>true</fullPathForIdentifierName> <!--Use absolute path in the generated CSS-like files. By default, the URLs are relative to sprite image file (and the location of CSS, LESS and SCSS).--> <useAbsoluteUrl>false</useAbsoluteUrl> <!--Specifies a custom subfolder to save files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectory /> <!--Specifies a custom subfolder to save CSS files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectoryForCss /> <!--Specifies a custom subfolder to save LESS files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectoryForLess /> <!--Specifies a custom subfolder to save SCSS files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectoryForScss /> </settings> <!--The order of the <file> elements determines the order of the images in the sprite.--> <files> <file>/Content/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png</file> <file>/Content/themes/base/images/ui-bg_flat_75_ffffff_40x100.png</file> <file>/Content/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png</file> </files></sprite>
已知行为
通用
当为一个目录生成一个bundle时,文件的列表来自文件系统,而不是该VS项目。因此,如果该目录包含的文件没有包括在项目中,它们也会包括在sprite中。为了阻止这种情况,必须手动选择所有的文件而不是该目录。

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우
