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