整合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

?

3) 然后用記事本，或者notepad++之類的編輯器修改 項目文件,如 hehe.csproj

找到編譯Web項目的Task，一般如下：

?

<Target Name="MvcBuildViews" AfterTargets="AfterBuild" Condition="'$(MvcBuildViews)'=='true'">
??? <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>

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>

?

?

如果是使用 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";

?修改為 帶 url的變量，例如向下面那種：

// Sprite icons path

@iconSpritePath:????????? url('img/glyphicons-halflings.png');
@iconWhiteSpritePath:???? url('img/glyphicons-halflings-white.png');

轉到sprite.less，把引用上面變量的地方，改為像下面那種樣式

? ? backgroupd-image: url(@iconSpritePath)?

改為

backgroupd-image: @iconSpritePath

?

?

?

?

? ?