将Microsoft Ajax Minifier集成到VS2013对JS、CSS进行编译时压缩

在网站发布中,一般要将js,css文件压缩减少体积,以减少在HTTP请求中的流量。将Microsoft Ajax Minifier集成到VS2013中就可以对JS、CSS进行编译时压缩。

VS2013的集成方法:

Asp.net网站上的详细说明网址:http://www.asp.net/ajaxlibrary/AjaxMinQuickStart.ashx

     Microsoft Ajax Minifier下载地址:http://ajaxmin.codeplex.com/

下载安装后,按照如下步骤集成到VS2013

1、在web项目上右键,点击卸载项目

2、在web项目上右键,编辑项目

3、在打开的csproj文件中的</Project> 标签上面插入下面代码

<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
<Target Name="AfterBuild">
<ItemGroup>
  <JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />
</ItemGroup>
<ItemGroup>
  <CSS Include="**\*.css" Exclude="**\*.min.css" />
</ItemGroup>
<AjaxMin
    JsSourceFiles="@(JS)"  JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js"
    CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css"  />
</Target>

Include属性是需要进行压缩的目录路径并带文件通配符

Exclude则是不需要进行压缩的文件路径

AjaxMin节点是压缩的一些参数设置

4、重新加载项目

5、编译该项目时会自动把项目下所有的*.css和*.js文件全部改名为*.min.css *.min.js

最终的版本只要引用min.css和min.js即可。如果页面文件不修改,也可使用批处理

Ajaxmin.bat

@echo off

setlocal enabledelayedexpansion

for /r . %%f in (*.min.m.js) do (

set src=%%f

set dst=!src:.min.m.js=.js!

echo !src! !dst!

copy /y !src! !dst!

)

[千万不要在开发目录下运行这个,否则把开发的js文件都覆盖了,在部署的目录下运行即可]

规范检查

和其他的语言一样,为了使javascript的编码符合规范,可以使用ajaxmin进行检查。

如要在VS2013中使用,其具体配置如下[VS菜单 -> 工具 –> 添加外部工具]

标题:AjaxMin-Analyse
命令:D:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\AjaxMin.exe(安装目录)
参数:/A /W:4 "$(ItemFileName)$(ItemExt)"
初始目录:$(ItemDir)

vs2008中有点不一样

标题:AjaxMin-Analyse
命令:D:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\AjaxMin.exe(安装目录)
参数:-ANALYZE –warn:4 "$(ItemFileName)$(ItemExt)"
初始目录:$(ItemDir)

完成以上操作后,在项目中选择你要分析的js或css文件,在工具菜单中点击“AjaxMin-Analyse”,输出窗口就会显示有警告的行数还有压缩后的js或者css代码

利用脚本AjaxMinCommandPrompt.bat 执行命令

偶尔在调试已经压缩过的js文件或则需要分析已有的压缩过的js文件时,可以使用这个工具进行还原,这样规范化以后由于格式整齐,就更好分析。

运行脚本AjaxMinCommandPrompt.bat (在Microsoft Ajax Minifier的安装目录下)

此脚本可以执行的具体命令如下:

还原:ajaxmin -pretty demo.min.js -clobber -o demo.js

压缩:ajaxmin demo.js -o demo.min.js

分析:ajaxmin –analyze –warn:4 demo.js

CSS Sprite Generator

网站如果在前期就使用CSS Sprite技术对图片进行了合并,开发起来还是挺方便的,而如果是开发好后再来整理零散的图片就会很麻烦,需要对齐图片像素、调整相关CSS样式等。

还好有工具可以帮我们完成这样的工作,这里介绍一个在线生成CSS Sprite的工具:http://www.freespritegenerator.com/

点击Select Files,将所有需要合并的图片上传。

点击Upload Files后,即可生成对应的CSS代码和合并后的图片,左边的代码就是CSS Sprite技术的精髓:通过图片的偏移实现显示合并的图片上不同位置的小图片。 而右边的图片可以通过右键另存为保存到本地。

时间: 2024-10-09 00:20:45

将Microsoft Ajax Minifier集成到VS2013对JS、CSS进行编译时压缩的相关文章

【翻译】Microsoft Ajax Minifier 快速使用指南(与VS集成使用) 编译后直接压缩项目的JS或CSS文件

网上找了好久终于找到一个能跟VS集成使用的JS和CSS压缩工具,因为害怕忘记,所以给转发过来,顺便翻译一下,大学那会儿学的英语基本上都已经还给老师了,所以翻译的不太好,不过能看懂就成,对吧? 原文地址:http://www.asp.net/ajaxlibrary/AjaxMinQuickStart.ashx 一.在命令行中使用 在下载安装完成Microsoft Ajax Minifier之后,你就可以以命令的方式使用它了.单击“开始”——“所有程序”——“Microsoft Ajax Minif

microsoft ajax registered - to fix microsoft ajax update panel post back

<dnn:DnnScriptBlock runat="server">     <script type="text/javascript">     (function($) {         var initDnnFileUploader = function() {             var settings = {                 fileFilter: '<%= FileFilter %>',  

vs2013 + python3.52 + boost1.61, 编译C++库失败

使用vs2013  + python3.52 + boost1.61,  编译C++库,  失败!  提示如下": boost::python::detail::init_module(struct PyModuleDef &,void (__cdecl*)(void))" ([email protected]@[email protected]@@[email protected]@[email protected]@[email protected]),该符号在函数 PyI

VS2013使用VS2008的联合编译进行工程编译

公司开发C++是使用vs2008,编译的时候使用联合编译IncreBuild进行编译:在vs2008中使用visual assistx,如果代码太长,滚动的时候偶尔会出现页面乱码,而且有时候虚函数互相定位也有问题,没有vs2013使用方便,但是在vs2013中又不能直接编译,所有寻思做个插件解决编译问题: 因为工程文件都是使用vc9生成的,所有使用vs2013打开时,会自动进行工程升级,升级完成后,vc9和vs2013的工程会同时存在,如果想在vs2013中调用vs2008的编译器进行编译,可以

VS2013下开发VC++程序,编译时提示错误error MSB8020: The build tools for v140 (Platform Toolset = &#39;v140&#39;) 的解决方案

1. 问题描述: 提示如下错误:error MSB8020: The builds tools for v140 (Platform Toolset = 'v140') cannot be found. To build using the v140 build tools, either click the Project menu or right-click the solution, and then select "Update VC++ Projects...". Inst

win10下vs2013为程序集新建强名称文件时“未能完成操作。拒绝访问”的解决方案

昨日,在使用vs2013开发开发一个小工具,打算给这个小工具的源代码进行保护. 在输入完成建立强名称密钥文件时,爆出了如下错误: 一开始以为是项目所在路径的权限问题,于是给项目所在路径文件夹添加了“User"的写入和执行权限.结果 然并卵. 尝试了系统的temp路径,同样的结果.问了度娘和谷歌,也没什么用,都是些奇奇怪怪的回答.决定继续完善功能,最后再来搞定这个问题. 今天早上开发功能完成,继续各种路径的尝试解决,最后在csdn中找到一个类似的问题,有人回答了” 给Everyone 用户,文件夹

Ajax 简单实例,其实就是js里面内容有些不同而已(转载)

这些时间,瞎子也看得见,AJAX正大踏步的朝我们走来.不管我们是拥护也好,反对也罢,还是视而不见,AJAX像一阵潮流,席转了我们所有的人. 关于AJAX的定义也好,大话也好,早有人在网上发表了汗牛充栋的文字,在这里我也不想照本宣科. 只想说说我感觉到的一些优点,对于不对,大家也可以和我讨论: 首先是异步交互,用户感觉不到页面的提交,当然也不等待页面返回.这是使用了AJAX技术的页面给用户的第一感觉. 其次是响应速度快,这也是用户强烈体验. 然后是与我们开发者相关的,复杂UI的成功处理,一直以来,

AJAX入门学习-2:基于JS的AJAX实现(以Django为例)

小生博客:http://xsboke.blog.51cto.com 如果有疑问,请点击此处,然后发表评论交流,作者会及时回复. -------谢谢您的参考,如有疑问,欢迎交流 一. ajax的实现操作流程 实例对象: var xmlhttp = XMLHttprequest() 连接server端: xmlhttp.open("") 发送数据: xmlhttp.send("") # 请求体的内容 ,如果是GET请求就没有内容,内容在URL里面,写为send(null

ajax分页实现,jquery.pagination.js

1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代码 1 /** 2 * This jQuery plugin displays pagination links inside the selected elements. 3 * 4 * @author Gabriel Birke (birke *at* d-scribe *dot* de) 5