博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
将Microsoft Ajax Minifier集成到VS2013对JS、CSS进行编译时压缩
阅读量:7080 次
发布时间:2019-06-28

本文共 1869 字,大约阅读时间需要 6 分钟。

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

VS2013的集成方法:

      Asp.net网站上的详细说明网址:

      Microsoft Ajax Minifier下载地址:

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

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

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

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

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

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

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

       4、重新加载项目

image

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

image

      最终的版本只要引用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的工具:

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

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

转载于:https://www.cnblogs.com/feiyuhuo/p/4864632.html

你可能感兴趣的文章
现场剪光缆!ATEC上支付宝模拟自断一半服务器,26秒一切恢复正常
查看>>
世界上最流行的编程语言恰恰也是大多数黑客的首选武器
查看>>
hadoop,spark,Zookeeper,,, 这些名字都是怎么来的呢?
查看>>
4. 安装ingress-nginx
查看>>
小技巧:onchange事件+iframe 模拟异步文件上传
查看>>
实践 | Sentinel 扩展性设计
查看>>
【Android架构】基于MVP模式的Retrofit2+RXjava封装(一)
查看>>
17、python面向对象进阶
查看>>
正则表达式笔记(三)
查看>>
微信开发示例(图片信息的发送)
查看>>
[ 好文分享 ] CSS布局终极方案之--圣杯布局(兼容IE6+,现代浏览器)
查看>>
现代汽车加入 Linux 基金会和 AGL 车载系统标准平台
查看>>
mysql单点库到集群库的迁移
查看>>
Tensorboard 详解(上篇)
查看>>
[Spring实战系列](11)SpEL使用表达式装配
查看>>
每个程序员必知之SEO
查看>>
关于神经网络,你需要了解这些(二)
查看>>
13.13 java.util.ConcurrentModificationException
查看>>
freeMarker读取布尔值,布尔值判断
查看>>
Android中的设计模式之策略模式
查看>>