MVC4 Less Bundle @import Каталог

Я написал небольшой пост в блоге об использовании LESS CSS. С веб-оптимизацией MVC4.

В основном это сводится к использованию 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");
        }


    }
}

Дополнение к ответу Бена Калла:

Я знаю, что это «должно быть комментарием к сообщению Бена Калла», но оно добавляет немного лишнего, что было бы невозможно добавить в комментарий. Так что проголосуйте за меня, если хотите. Или закрой меня.

Сообщение в блоге Бена делает все это, за исключением того, что оно не определяет минимизацию.

Итак, установите пакет 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 не найден, что мне все равно, кто меня проголосует.

Если, наоборот, вы чувствуете желание проголосовать за этот ответ, пожалуйста, отдайте свой голос Бену.

Так что.

Обходной путь, который мне показался действительно полезным, заключался в том, чтобы установить каталог перед запуском Less.Parse внутри LessMinify.Process(). Вот как я это сделал:

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 не имеет ссылки на место, откуда был получен файл.

Чтобы решить эту проблему, мне пришлось поместить все файлы «меньше» в одно место.

Затем вы должны понять, что порядок файлов становится важным. Таким образом, я начал переименовывать файл с числом (например: «0 CONSTANTS.less», «1 MIXIN.less», что означает, что они загружаются вверху комбинированного вывода, прежде чем они перейдут в LessMinify.

если вы отлаживаете свой LessMinify и просматриваете ответ. Контент, вы увидите комбинированный результат меньше!

Надеюсь это поможет

Вот самая простая версия кода для обработки этого, которую я мог придумать:

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», кроме bootstrap.less и (для адаптивного дизайна) responsive.less.

~/Content/twitterbootstrap/imports

Добавлена ​​конфигурация в web.config:

<add key="TwitterBootstrapLessImportsFolder" value="imports" />

Создал два класса (небольшая модификация класса выше):

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 используется статический член BundlePath класса TwitterBootstrapLessMinify. Это позволяет нам ввести базовый путь для импорта. Я хотел бы использовать другой подход (предоставив экземпляр моего класса, но я не мог).

Наконец, я добавил следующие строки в Global.asax:

BundleTable.Bundles.EnableDefaultBundles();

var lessFB = new DynamicFolderBundle("less", new TwitterBootstrapLessMinify(), "*.less", false);
BundleTable.Bundles.Add(lessFB);

Это эффективно решает проблему импорта, не зная, откуда импортировать.

По состоянию на февраль 2013 года: отличное решение Майкла Бэрда было заменено ответом «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 (новый CssMinify()); заменено на css.Transforms.Add(new BundleTransformer.MicrosoftAjax());

В соответствии с приведенным ниже RockResolve, чтобы использовать минификатор MicrosoftAjax, укажите его как минимизатор CSS по умолчанию в файле web.config, а не передавайте его в качестве аргумента.

From https://bundletransformer.codeplex.com/wikipage/?title=Bundle%20Transformer%201.7.0%20Beta%201#BundleTransformerMicrosoftAjax_Chapter

Чтобы сделать MicrosoftAjaxCssMinifier CSS-минификатором по умолчанию, а MicrosoftAjaxJsMinifier — JS-минификатором по умолчанию, необходимо внести изменения в файл Web.config. В атрибуте defaultMinifier элемента \configuration\bundleTransformer\core\css должно быть установлено значение, равное MicrosoftAjaxCssMinifier, а в этом же атрибуте элемента \configuration\bundleTransformer\core\js - MicrosoftAjaxJsMinifier.

Я столкнулся с той же проблемой, увидев то же сообщение об ошибке. Поиск решения в Интернете привел меня сюда. Моя проблема заключалась в следующем:

В меньшем файле у меня в какой-то момент был неправильный стиль, который предупреждал меня. Файл less не может быть проанализирован. Я избавился от сообщения об ошибке, удалив неправильную строку.

Я надеюсь, что это помогает кому-то.