整合ajaxmin 和 less 到VS.net
我用的前端框架是bootstrap_extra, twitter团队做的，这个是他的一个扩展，首先从上面下载一个。至于ajaxmin，请参考这里
1) 从bootstrap_extra的解压包中，复制build目录下三个文件到项目中去，这三个文件分别是
- BatchSubsitute.bat
- less.js
- lessc. wsf
2) 然后加入到Vs.net 的项目中,我把build目录排除出项目外，这样使用publish功能的时候，就不会把Build目录页发布出去。
3） 编写less.bat,其中我的 less文件是放在 项目目录下面 Content\less\
call BatchSubstitute.bat "@VERSION" "1.4.0" ..\Content\less\bootstrap_xtra.less > ..\Content\less\bootstrap_xtra.tmp.less
call BatchSubstitute.bat "@DATE" "%date% %time%" ..\Content\less\bootstrap_xtra.tmp.less > ..\Content\less\bootstrap_xtra.tmp.1.less
cd ../Content/less
@cscript //nologo "http://www.cnblogs.com/build/lessc.wsf" bootstrap_xtra.tmp.1.less ../combine/bootstrap.css
del /f bootstrap_xtra.tmp.less
del /f bootstrap_xtra.tmp.1.less
cd http://www.cnblogs.com/build
call BatchSubstitute.bat "@DATE" "%date% %time%" ..\Content\less\bootstrap_xtra.tmp.less > ..\Content\less\bootstrap_xtra.tmp.1.less
cd ../Content/less
@cscript //nologo "http://www.cnblogs.com/build/lessc.wsf" bootstrap_xtra.tmp.1.less ../combine/bootstrap.css
del /f bootstrap_xtra.tmp.less
del /f bootstrap_xtra.tmp.1.less
cd http://www.cnblogs.com/build
3) 然后用记事本，或者notepad++之类的编辑器修改 项目文件,如 hehe.csproj
找到编译Web项目的Task，一般如下：
<Target Name="MvcBuildViews" AfterTargets="AfterBuild" Condition="'$(MvcBuildViews)'=='true'">
<AspNetCompiler VirtualPath="temp" PhysicalPath="$(ProjectDir)\..\$(ProjectName)" />
</Target>
<AspNetCompiler VirtualPath="temp" PhysicalPath="$(ProjectDir)\..\$(ProjectName)" />
</Target>
红色部分是 编译成功之后，执行的Task名称叫做“AfterBuild"，然后启动我们刚刚写得less.bat，执行编译css，留意一下WorkingDirectory，我是假设执行目录是在build目录执行的，否知会出错。
<Target Name="AfterBuild">
<Exec Command="$(MSBuildProjectDirectory)\Build\less.bat" ContinueOnError="false" WorkingDirectory="$(MSBuildProjectDirectory)\Build\" />
<ItemGroup>
<JS Include="**\Scripts\Combine\*.js" Exclude="**\Scripts\Combine\*.min.js" />
</ItemGroup>
<ItemGroup>
<CSS Include="**\Content\Combine\*.css" Exclude="**\Content\Combine\*.min.css" />
</ItemGroup>
<AjaxCombine JsSourceFiles="@(JS)" JsCombinedFileName="..\global.js" CssSourceFiles="@(CSS)" CssCombinedFileName="..\global.css" />
<ItemGroup>
<COMBINEDJS Include="**\Scripts\global.js" Exclude="**\Scripts\*.min.js" />
</ItemGroup>
<ItemGroup>
<COMBINEDCSS Include="**\Content\global.css" Exclude="**\Content\*.min.css" />
</ItemGroup>
<AjaxMin JsSourceFiles="@(COMBINEDJS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" CssSourceFiles="@(COMBINEDCSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />
</Target>
<Target Name="MvcBuildViews" AfterTargets="AfterBuild" Condition="'$(MvcBuildViews)'=='true'">
<AspNetCompiler VirtualPath="temp" PhysicalPath="$(ProjectDir)\..\$(ProjectName)" />
</Target>
<Exec Command="$(MSBuildProjectDirectory)\Build\less.bat" ContinueOnError="false" WorkingDirectory="$(MSBuildProjectDirectory)\Build\" />
<ItemGroup>
<JS Include="**\Scripts\Combine\*.js" Exclude="**\Scripts\Combine\*.min.js" />
</ItemGroup>
<ItemGroup>
<CSS Include="**\Content\Combine\*.css" Exclude="**\Content\Combine\*.min.css" />
</ItemGroup>
<AjaxCombine JsSourceFiles="@(JS)" JsCombinedFileName="..\global.js" CssSourceFiles="@(CSS)" CssCombinedFileName="..\global.css" />
<ItemGroup>
<COMBINEDJS Include="**\Scripts\global.js" Exclude="**\Scripts\*.min.js" />
</ItemGroup>
<ItemGroup>
<COMBINEDCSS Include="**\Content\global.css" Exclude="**\Content\*.min.css" />
</ItemGroup>
<AjaxMin JsSourceFiles="@(COMBINEDJS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" CssSourceFiles="@(COMBINEDCSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />
</Target>
<Target Name="MvcBuildViews" AfterTargets="AfterBuild" Condition="'$(MvcBuildViews)'=='true'">
<AspNetCompiler VirtualPath="temp" PhysicalPath="$(ProjectDir)\..\$(ProjectName)" />
</Target>
less编译完毕之后，我们就执行 用ajaxmin，执行压缩，这个配置请参考这里
以下是新增的部分
<Import Project="$(MSBuildProjectDirectory)\Build\ajaxmin.tasks" />
<!-- To modify your build process, add your task inside one of the targets below and uncomment it.
Other similar extension points exist, see Microsoft.Common.targets.
<Target Name="BeforeBuild">
</Target> -->
<Target Name="AfterBuild">
<Exec Command="$(MSBuildProjectDirectory)\Build\less.bat" ContinueOnError="false" WorkingDirectory="$(MSBuildProjectDirectory)\Build\" />
<ItemGroup>
<JS Include="**\Scripts\Combine\*.js" Exclude="**\Scripts\Combine\*.min.js" />
</ItemGroup>
<ItemGroup>
<CSS Include="**\Content\Combine\*.css" Exclude="**\Content\Combine\*.min.css" />
</ItemGroup>
<AjaxCombine JsSourceFiles="@(JS)" JsCombinedFileName="..\global.js" CssSourceFiles="@(CSS)" CssCombinedFileName="..\global.css" />
<ItemGroup>
<COMBINEDJS Include="**\Scripts\global.js" Exclude="**\Scripts\*.min.js" />
</ItemGroup>
<ItemGroup>
<COMBINEDCSS Include="**\Content\global.css" Exclude="**\Content\*.min.css" />
</ItemGroup>
<AjaxMin JsSourceFiles="@(COMBINEDJS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" CssSourceFiles="@(COMBINEDCSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />
</Target>
<Target Name="MvcBuildViews" AfterTargets="AfterBuild" Condition="'$(MvcBuildViews)'=='true'">
<AspNetCompiler VirtualPath="temp" PhysicalPath="$(ProjectDir)\..\$(ProjectName)" />
</Target>
<!-- To modify your build process, add your task inside one of the targets below and uncomment it.
Other similar extension points exist, see Microsoft.Common.targets.
<Target Name="BeforeBuild">
</Target> -->
<Target Name="AfterBuild">
<Exec Command="$(MSBuildProjectDirectory)\Build\less.bat" ContinueOnError="false" WorkingDirectory="$(MSBuildProjectDirectory)\Build\" />
<ItemGroup>
<JS Include="**\Scripts\Combine\*.js" Exclude="**\Scripts\Combine\*.min.js" />
</ItemGroup>
<ItemGroup>
<CSS Include="**\Content\Combine\*.css" Exclude="**\Content\Combine\*.min.css" />
</ItemGroup>
<AjaxCombine JsSourceFiles="@(JS)" JsCombinedFileName="..\global.js" CssSourceFiles="@(CSS)" CssCombinedFileName="..\global.css" />
<ItemGroup>
<COMBINEDJS Include="**\Scripts\global.js" Exclude="**\Scripts\*.min.js" />
</ItemGroup>
<ItemGroup>
<COMBINEDCSS Include="**\Content\global.css" Exclude="**\Content\*.min.css" />
</ItemGroup>
<AjaxMin JsSourceFiles="@(COMBINEDJS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" CssSourceFiles="@(COMBINEDCSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />
</Target>
<Target Name="MvcBuildViews" AfterTargets="AfterBuild" Condition="'$(MvcBuildViews)'=='true'">
<AspNetCompiler VirtualPath="temp" PhysicalPath="$(ProjectDir)\..\$(ProjectName)" />
</Target>
如果是使用 bootstrap 2.0.1，从sourcecode给的Less，在上面的脚本Less.js（已经是最新的）运行时会出错的，请教一下谁有更好的解决方案请告知我。
我的修复方式如下：
把下面这一段，移动到 @import "reset.less" 之前，因为Reset.less 引用了 minxs.less的 东西。
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
打开 variable.less
把
// Sprite icons path
@iconSpritePath: “../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
@iconSpritePath: “../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
修改为 带 url的变量，例如向下面那种：
// Sprite icons path
@iconSpritePath: url('img/glyphicons-halflings.png');
@iconWhiteSpritePath: url('img/glyphicons-halflings-white.png');
@iconWhiteSpritePath: url('img/glyphicons-halflings-white.png');
转到sprite.less，把引用上面变量的地方，改为像下面那种样式
backgroupd-image: url(@iconSpritePath)
改为
backgroupd-image: @iconSpritePath
