整合ajaxmin 和 less 到VS.net

    我用的前端框架是bootstrap_extra, twitter团队做的,这个是他的一个扩展,首先从上面下载一个。至于ajaxmin,请参考这里

    

   1) 从bootstrap_extra的解压包中,复制build目录下三个文件到项目中去,这三个文件分别是

  •    BatchSubsitute.bat  
  •    less.js
  •    lessc. wsf

  2) 然后加入到Vs.net 的项目中,我把build目录排除出项目外,这样使用publish功能的时候,就不会把Build目录页发布出去。

整合ajaxmin 和 less 到VS.net 

 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

 


 

   

 


 

   

你可能感兴趣的:(.net)