Visual Studio - 预编译 - 无点答案

【问题标题】：Visual studio - precompile - dotlessVisual Studio - 预编译 - 无点
【发布时间】：2011-01-11 17:04:10
【问题描述】：

我想知道是否有办法使用 Visual Studio 预编译 *.less 文件（http://www.dotlesscss.org/）。

该网站给了我一个dotless.compiler.exe，但我不知道如何将它连接到 Visual Studio。我正在为 Webforms 和 ASP.NET MVC 寻找解决方案。

【问题讨论】：

标签： asp.net-mvc visual-studio-2008 less dotless

【解决方案1】：

这是我使用 MSBuild 提出的解决方案。它是增量的，所以它应该只在 Less 发生变化时发生。它还能正确处理@import。

首先，使用 NuGet 将 dotless 添加到您的项目中。您不需要它为您的web.config 添加的任何魔法，因此您可以恢复它 - 您只是使用它来获取编译器可执行文件。

接下来，将您的“根”Less 文件添加到您的 .csproj，如下所示：

<ItemGroup>
    <LessCssRootInput Include="example.less" />
</ItemGroup>

最后，在你的.csproj的底部添加这个sn-p：

<ItemGroup>
    <LessCssSubInput Include="**\*.less" Exclude="@(LessCssRootInput)" />
    <LessCssOutput Include="@(LessCssRootInput -> '%(RelativeDir)\%(Filename).css')" />
</ItemGroup>
<Target Name="CompileLessCss" BeforeTargets="Compile" Inputs="@(LessCssRootInput);@(LessCssSubInput)" Outputs="@(LessCssOutput)">
    <Exec Command="&quot;$(SolutionDir)\packages\dotless.1.3.1.0\tool\dotless.compiler.exe&quot; --minify --keep-first-comment @(LessCssRootInput)" />
</Target>

【讨论】：

是否自动包含项目中的文件？或者我仍然必须显示所有文件，然后手动包含生成的文件？请回答..谢谢！
你不需要告诉它只包含在其他文件中的 Less 文件。这些会自动包含在“***.less”模式中。但是您确实需要告诉它执行包含的“根”Less 文件（在 LessCssRootInput 中）。它会为每个“根”Less 文件生成一个 CSS 文件。
在 dotless 1.6.7 包中没有带有二进制 (exe) 的工具文件夹。
我已经在 VS2017 下的 csproj 中添加了这个。但它是如何工作的？它是在保存单击时自动编译较少的文件更改还是其他。请解释更多。

【解决方案2】：

您可能想看看Chirpy。它有更多的支持，而不仅仅是 LESS。我希望我能在自己写之前找到它。

说到这里，我还写了一个使用 JS 文件（而不是 .NET 端口）执行的 Visual Studio 自定义构建工具，你可以在这里查看源代码：https://github.com/paultyng/JsBuildTools

或者它也在JsBuildTools下的扩展库中。

【讨论】：

【解决方案3】：

全部，

在使用了这里讨论的几乎所有替代方案并且不满意之后，我为 Visual Studio 编写了一个 LessCss 编译器插件。它仅在 .less 文件更改时才需要 .less 文件并生成 .css 文件。它使用最新最好的less.js 编译器。

See it in use here.

Download the signed extension.

Source code is here.

我刚刚将它提交到 VS 扩展库。希望它很快就会出现，但在此期间请安装（或编译然后安装）并检查一下。

【讨论】：

我看到了视频，它看起来正是我要找的东西。不过，我无法安装它。安装程序显然可以工作，但它没有出现在 Visual Studio 中。你知道为什么会发生这种情况吗？
顺便说一句，它在 VS 扩展库中获得批准了吗？我在那儿找不到。
我现在设法安装了它。我跟着这个：msdn.microsoft.com/en-us/library/ee814429.aspx，但我不确定这是什么解决了问题。
嘿感谢您安装它。我提交给 VS 画廊，但从未收到回音。我会再试一次。
@Steve Potter 我安装了你的插件，但在我的 .less 文件的属性窗口中，我没有使用自定义工具获得“LessCss”选项。

【解决方案4】：

根据您的构建环境，您可以启动 dotless.Compiler.exe 作为构建任务。

例如，在 Visual Studio 中使用 Pre-Build 任务（全 1 行）：

$(SolutionDir)Tools\dotLess\dotless.compiler.exe -m 
    $(ProjectDir)content\css\site.less $(ProjectDir)content\css\site.css

宏（$(SolutionDir) 等）为项目和文件位置提供了一些灵活性。无需使用标准的 .less 文件，只需在您的标记中引用新的 .css 文件即可。

【讨论】：

ALL IN ONE LINE 非常重要，否则您将收到 MS Build 错误。该命令以shit -1 结束。
关于可移植性：不要忘记将命令的每个参数括在引号中，因为构建任务作为批处理文件执行，并且批处理无法处理目录名称中的空格。示例："$(ProjectDir)..\..\..\..\lib\dotless\tool\dotless.compiler.exe" "$(ProjectDir)Styles\Home.less" "$(ProjectDir)Styles\Home.css"

【解决方案5】：

在搜索使用 DotLess 时，我还发现了这个库：

http://www.codethinked.com/post/2010/03/17/Bundler-Now-Supports-Css-And-less.aspx

将其添加到我自己的问题中，因为它可能对其他人有所帮助。

【讨论】：

【解决方案6】：

还有另一种在开发过程中预编译的方法。

dotless 项目具有一个命令行编译器 (dotless.Compiler.exe)，可以编译和缩小 CSS。

您还可以将 compiler.exe 与 --watch 参数一起使用，它将继续运行并扫描您的输入文件以查找更改，并在您对文件进行更改时重新生成。从而使您独立于 Visual Studio。

【讨论】：

这就是我们编写该功能的原因。从喜欢使用 dotless 但不关心所有 .NET 特定内容的 php 开发人员那里收到了太多问题。与 ruby 不同，dotless 毕竟只有一个 exe 和一个 dll。

【解决方案7】：

Phil Haack 前来救援：http://haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx

当您想在编译时在您的解决方案中生成某些东西时，T4 通常是要走的路...

【讨论】：

此外，T4 模板现在是 dotless 项目的一部分，并在每次提交时由 buildserver 生成（Phil 的模板现在已过期）。您可以通过点击我们网站上的下载按钮dotlesscss.com，从 dotless buildserver 获取最新的 t4css