MVC4 Less Bundle @importディレクトリ
MVC4バンドリングを使用して、より少ないファイルの一部をグループ化しようとしていますが、使用しているインポートパスがオフになっているようです。私のディレクトリ構造は次のとおりです。
static/
less/
mixins.less
admin/
user.less
User.lessでは、これを使用してmixins.lessをインポートしようとしています：
@import "../mixins.less";
以前はドットレスでchirpyを使用していたときにこれが機能していましたが、ELMAHが私に腹を立てていることに気付きました。
System.IO.FileNotFoundException:
You are importing a file ending in .less that cannot be found.
File name: '../mixins.less'
MVC4で別の@importを使用することになっていますか？
いくつかの追加情報
これを試みるために使用しているlessクラスとglobal.asax.csコードは次のとおりです。
LessMinify.cs
...
public class LessMinify : CssMinify
{
public LessMinify() {}
public override void Process(BundleContext context, BundleResponse response)
{
response.Content = Less.Parse(response.Content);
base.Process(context, response);
}
}
...
Global.asax.cs
...
DynamicFolderBundle lessFB =
new DynamicFolderBundle("less", new LessMinify(), "*.less");
BundleTable.Bundles.Add(lessFB);
Bundle AdminLess = new Bundle("~/AdminLessBundle", new LessMinify());
...
AdminLess.AddFile("~/static/less/admin/user.less");
BundleTable.Bundles.Add(AdminLess);
...
MVC4 Web最適化でLESS CSSを使用 についての簡単なブログ記事を書きました。
基本的には BundleTransformer.Less Nuget Package を使用し、BundleConfig.csを変更するだけです。
ブートストラップでテスト済み。
EDIT：これを言う理由を述べておくと、@ importディレクトリ構造の問題にぶつかったので、このライブラリはそれを正しく処理します。
GitHub Gistには、@ importおよびdotLessで適切に動作するコードが投稿されています。 https://Gist.github.com/2002958
Twitter Bootstrap でテストしましたが、うまく機能します。
ImportedFilePathResolver.cs
public class ImportedFilePathResolver : IPathResolver
{
private string currentFileDirectory;
private string currentFilePath;
/// <summary>
/// Initializes a new instance of the <see cref="ImportedFilePathResolver"/> class.
/// </summary>
/// <param name="currentFilePath">The path to the currently processed file.</param>
public ImportedFilePathResolver(string currentFilePath)
{
CurrentFilePath = currentFilePath;
}
/// <summary>
/// Gets or sets the path to the currently processed file.
/// </summary>
public string CurrentFilePath
{
get { return currentFilePath; }
set
{
currentFilePath = value;
currentFileDirectory = Path.GetDirectoryName(value);
}
}
/// <summary>
/// Returns the absolute path for the specified improted file path.
/// </summary>
/// <param name="filePath">The imported file path.</param>
public string GetFullPath(string filePath)
{
filePath = filePath.Replace('\\', '/').Trim();
if(filePath.StartsWith("~"))
{
filePath = VirtualPathUtility.ToAbsolute(filePath);
}
if(filePath.StartsWith("/"))
{
filePath = HostingEnvironment.MapPath(filePath);
}
else if(!Path.IsPathRooted(filePath))
{
filePath = Path.Combine(currentFileDirectory, filePath);
}
return filePath;
}
}
LessMinify.cs
public class LessMinify : IBundleTransform
{
/// <summary>
/// Processes the specified bundle of LESS files.
/// </summary>
/// <param name="bundle">The LESS bundle.</param>
public void Process(BundleContext context, BundleResponse bundle)
{
if(bundle == null)
{
throw new ArgumentNullException("bundle");
}
context.HttpContext.Response.Cache.SetLastModifiedFromFileDependencies();
var lessParser = new Parser();
ILessEngine lessEngine = CreateLessEngine(lessParser);
var content = new StringBuilder(bundle.Content.Length);
foreach(FileInfo file in bundle.Files)
{
SetCurrentFilePath(lessParser, file.FullName);
string source = File.ReadAllText(file.FullName);
content.Append(lessEngine.TransformToCss(source, file.FullName));
content.AppendLine();
AddFileDependencies(lessParser);
}
bundle.Content = content.ToString();
bundle.ContentType = "text/css";
//base.Process(context, bundle);
}
/// <summary>
/// Creates an instance of LESS engine.
/// </summary>
/// <param name="lessParser">The LESS parser.</param>
private ILessEngine CreateLessEngine(Parser lessParser)
{
var logger = new AspNetTraceLogger(LogLevel.Debug, new Http());
return new LessEngine(lessParser, logger, false);
}
/// <summary>
/// Adds imported files to the collection of files on which the current response is dependent.
/// </summary>
/// <param name="lessParser">The LESS parser.</param>
private void AddFileDependencies(Parser lessParser)
{
IPathResolver pathResolver = GetPathResolver(lessParser);
foreach(string importedFilePath in lessParser.Importer.Imports)
{
string fullPath = pathResolver.GetFullPath(importedFilePath);
HttpContext.Current.Response.AddFileDependency(fullPath);
}
lessParser.Importer.Imports.Clear();
}
/// <summary>
/// Returns an <see cref="IPathResolver"/> instance used by the specified LESS lessParser.
/// </summary>
/// <param name="lessParser">The LESS prser.</param>
private IPathResolver GetPathResolver(Parser lessParser)
{
var importer = lessParser.Importer as Importer;
if(importer != null)
{
var fileReader = importer.FileReader as FileReader;
if(fileReader != null)
{
return fileReader.PathResolver;
}
}
return null;
}
/// <summary>
/// Informs the LESS parser about the path to the currently processed file.
/// This is done by using custom <see cref="IPathResolver"/> implementation.
/// </summary>
/// <param name="lessParser">The LESS parser.</param>
/// <param name="currentFilePath">The path to the currently processed file.</param>
private void SetCurrentFilePath(Parser lessParser, string currentFilePath)
{
var importer = lessParser.Importer as Importer;
if(importer != null)
{
var fileReader = importer.FileReader as FileReader;
if(fileReader == null)
{
importer.FileReader = fileReader = new FileReader();
}
var pathResolver = fileReader.PathResolver as ImportedFilePathResolver;
if(pathResolver != null)
{
pathResolver.CurrentFilePath = currentFilePath;
}
else
{
fileReader.PathResolver = new ImportedFilePathResolver(currentFilePath);
}
}
else
{
throw new InvalidOperationException("Unexpected importer type on dotless parser");
}
}
}
ベンカルの回答の補遺：
これは「Ben Cullの投稿へのコメントでなければならない」ことは知っていますが、コメントを追加するのは不可能な少し余分なものを追加します。必要な場合は投票してください。または私を閉じます。
Benのブログ投稿は、ミニファイを指定していないことを除き、すべてを実行します。
したがって、Benが提案するようにBundleTransformer.Lessパッケージをインストールしてから、cssを縮小したい場合は、以下を実行してください（〜/ App_Start/BundleConfig.csで）：
var cssTransformer = new CssTransformer();
var jsTransformer = new JsTransformer();
var nullOrderer = new NullOrderer();
var css = new Bundle("~/bundles/css")
.Include("~/Content/site.less");
css.Transforms.Add(cssTransformer);
css.Transforms.Add(new CssMinify());
css.Orderer = nullOrderer;
bundles.Add(css);
追加された行は次のとおりです。
css.Transforms.Add(new CssMinify());
CssMinifyはSystem.Web.Optimizations
@importの問題と.less拡張子が付いた結果のファイルを見つけられなかったので、誰が私に投票するかは気にしません。
それどころか、この答えに投票したいという気持ちがあれば、ベンに投票してください。
だからそこに。
私が本当に役立つとわかった回避策は、LessMinify.Process（）内でLess.Parseを実行する前にディレクトリを設定することでした。ここに私がそれをした方法があります：
public class LessTransform : IBundleTransform
{
private string _path;
public LessTransform(string path)
{
_path = path;
}
public void Process(BundleContext context, BundleResponse response)
{
Directory.SetCurrentDirectory(_path);
response.Content = Less.Parse(response.Content);
response.ContentType = "text/css";
}
}
次に、以下のように変換の少ないオブジェクトを作成するときにパスを渡します。
lessBundle.Transforms.Add(
new LessTransform(HttpRuntime.AppDomainAppPath + "/Content/Less")
);
お役に立てれば。
問題は、DynamicFolderBundleがファイルのすべてのコンテンツを読み取り、結合されたコンテンツをLessMinifyに渡すことです。
そのため、@ importsにはファイルの取得元への参照がありません。
これを解決するには、「少ない」ファイルをすべて1つの場所に配置する必要がありました。
次に、ファイルの順序が重要になることを理解する必要があります。そのため、ファイルの名前を番号に変更し始めました（例： "0 CONSTANTS.less"、 "1 MIXIN.less"。これは、LessMinifyに入る前に、結合された出力の先頭にロードされることを意味します。
lessMinifyをデバッグしてresponse.Contentを表示すると、結合されたless出力が表示されます！
お役に立てれば
これを処理するコードの最も簡単なバージョンを以下に示します。
public class LessTransform : IBundleTransform
{
public void Process(BundleContext context, BundleResponse bundle)
{
var pathResolver = new ImportedFilePathResolver(context.HttpContext.Server);
var lessParser = new Parser();
var lessEngine = new LessEngine(lessParser);
(lessParser.Importer as Importer).FileReader = new FileReader(pathResolver);
var content = new StringBuilder(bundle.Content.Length);
foreach (var bundleFile in bundle.Files)
{
pathResolver.SetCurrentDirectory(bundleFile.IncludedVirtualPath);
content.Append(lessEngine.TransformToCss((new StreamReader(bundleFile.VirtualFile.Open())).ReadToEnd(), bundleFile.IncludedVirtualPath));
content.AppendLine();
}
bundle.ContentType = "text/css";
bundle.Content = content.ToString();
}
}
public class ImportedFilePathResolver : IPathResolver
{
private HttpServerUtilityBase server { get; set; }
private string currentDirectory { get; set; }
public ImportedFilePathResolver(HttpServerUtilityBase server)
{
this.server = server;
}
public void SetCurrentDirectory(string fileLocation)
{
currentDirectory = Path.GetDirectoryName(fileLocation);
}
public string GetFullPath(string filePath)
{
var baseDirectory = server.MapPath(currentDirectory);
return Path.GetFullPath(Path.Combine(baseDirectory, filePath));
}
}
私がやったことは次のとおりです。
Twitter Bootstrap Nugetモジュールを追加しました。
これを私の_Layout.cshtmlファイルに追加しました：
<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/twitterbootstrap/less")" rel="stylesheet" type="text/css" />
できることを示すために、「less」フォルダーの名前をtwitterbootstrapに変更したことに注意してください
少ないファイルをすべて「imports」というサブフォルダーに移動しましたexceptbootstrap.lessおよび（レスポンシブデザインの場合）responsive.less。
~/Content/twitterbootstrap/imports
Web.configに構成を追加しました。
<add key="TwitterBootstrapLessImportsFolder" value="imports" />
2つのクラスを作成しました（上記のクラスのわずかな変更）：
using System.Configuration;
using System.IO;
using System.Web.Optimization;
using dotless.Core;
using dotless.Core.configuration;
using dotless.Core.Input;
namespace TwitterBootstrapLessMinify
{
public class TwitterBootstrapLessMinify : CssMinify
{
public static string BundlePath { get; private set; }
public override void Process(BundleContext context, BundleResponse response)
{
setBasePath(context);
var config = new DotlessConfiguration(dotless.Core.configuration.DotlessConfiguration.GetDefault());
config.LessSource = typeof(TwitterBootstrapLessMinifyBundleFileReader);
response.Content = Less.Parse(response.Content, config);
base.Process(context, response);
}
private void setBasePath(BundleContext context)
{
var importsFolder = ConfigurationManager.AppSettings["TwitterBootstrapLessImportsFolder"] ?? "imports";
var path = context.BundleVirtualPath;
path = path.Remove(path.LastIndexOf("/") + 1);
BundlePath = context.HttpContext.Server.MapPath(path + importsFolder + "/");
}
}
public class TwitterBootstrapLessMinifyBundleFileReader : IFileReader
{
public IPathResolver PathResolver { get; set; }
private string basePath;
public TwitterBootstrapLessMinifyBundleFileReader() : this(new RelativePathResolver())
{
}
public TwitterBootstrapLessMinifyBundleFileReader(IPathResolver pathResolver)
{
PathResolver = pathResolver;
basePath = TwitterBootstrapLessMinify.BundlePath;
}
public bool DoesFileExist(string fileName)
{
fileName = PathResolver.GetFullPath(basePath + fileName);
return File.Exists(fileName);
}
public string GetFileContents(string fileName)
{
fileName = PathResolver.GetFullPath(basePath + fileName);
return File.ReadAllText(fileName);
}
}
}
IFileReaderの実装では、TwitterBootstrapLessMinifyクラスの静的メンバーBundlePathを調べます。これにより、インポートが使用するベースパスを挿入できます。私は別のアプローチを取りたいと思っていました（クラスのインスタンスを提供することで、できませんでした）。
最後に、Global.asaxに次の行を追加しました。
BundleTable.Bundles.EnableDefaultBundles();
var lessFB = new DynamicFolderBundle("less", new TwitterBootstrapLessMinify(), "*.less", false);
BundleTable.Bundles.Add(lessFB);
これにより、インポート元がわからないインポートの問題が効果的に解決されます。
2013年2月現在、マイケルベアードの優れたソリューションは、ベンカルの投稿で言及されている「BundleTransformer.Less Nuget Package」という回答に取って代わられました。同様の回答： http://blog.cdeutsch.com/2012/08/using-less-and-Twitter-bootstrap-in.html
Cdeutschのブログとawrigleyのミニフィケーションを追加した投稿は良いですが、現在は正しいアプローチではないようです。
同じソリューションを持つ他の誰かがBundleTransformer作成者からいくつかの回答を得ました： http://geekswithblogs.net/ToStringTheory/archive/2012/11/30/who-could-ask-for-more-with-less- css-part-2.aspx 。下部のコメントを参照してください。
要約すると、組み込みの組み込みミニファイヤの代わりにBundleTransformer.MicrosoftAjaxを使用します。例えばcss.Transforms.Add（new CssMinify（））; css.Transforms.Add（new BundleTransformer.MicrosoftAjax（））;に置き換えられました。
以下のRockResolveに続いて、MicrosoftAjaxミニファイヤを使用するには、引数として渡すのではなく、web.configでデフォルトのCSSミニファイヤとして参照します。
MicrosoftAjaxCssMinifierをデフォルトのCSS-minifierに、MicrosoftAjaxJsMinifierをデフォルトのJS-minifierにするには、Web.configファイルに変更を加える必要があります。 defaultMinifierで、\ configuration\bundleTransformer\core\css要素の属性はMicrosoftAjaxCssMinifier、および\ configuration\bundleTransformer\core\js要素の同じ属性-MicrosoftAjaxJsMinifier。
私のライブラリを確認してください https://www.nuget.org/packages/LessMVCFour 役に立てば幸いです。