Less.js: Поддержка подстановки файлов для @imports

Круто .. хотя только узел (не браузер) и не думаю, что это поможет другим
вопросы. Думаю, может быть полезно... обычно у вас будет цепочка зависимостей
так что вы не хотели бы все в алфавитном порядке.

Да, у браузера нет возможности узнать, какие файлы запрашивать, так что это похоже на нестартер.

ну, я бы не стал исключать это только потому, что это применимо только к узлу, но я также не считаю это особенно важным запросом функции.

@agatronic относительно цепочки зависимостей, я только что говорил с кем-то о том же самом вчера на встрече узла. Я думаю, что это полезно для библиотек компонентов/модулей, миксинов и т. д., как в примере. И да, только узел был тем, о чем я думал.

Я только что прочитал, что стилус позволяет указать каталог, и если вы это сделаете, он ищет index.sty - мне это нравится.

что касается импорта каждого файла в каталоге, это действительно полезно, только если файлы содержат только миксины (без содержимого) ... потому что порядок имеет значение. не уверен, что это реальный сценарий прямо сейчас?

Мне нравится идея индекса. Это хороший способ сделать это.

это действительно полезно, только если файлы содержат только миксины (без содержимого).

Мы используем много компонентной разработки. Большинство наших компонентов Less не зависят от других файлов. Конечно, порядок имеет значение в CSS и более традиционных шаблонах проектирования, поэтому я думаю, что вы правы. Большинство людей, вероятно, не будут использовать это так, как я, а это значит, что они, вероятно, не будут использовать все это. Но идея индекса стилуса — интересное решение этой проблемы.

Это не приоритет, но я только что увидел это и хотел добавить в качестве ссылки: https://github.com/chriseppstein/sass-globbing

Я большой поклонник Sass, и я все время использую плагин для импорта glob Криса Эппштейна (товарищи по команде, которые работали на компьютерах с Windows, не могли его использовать, так что имейте это в виду).

Я искал эквивалент в LESS, кто-нибудь видел что-нибудь подобное?

Да, я фанат этого плагина. Я думаю, что любой, кто использовал подстановку, знает, как приятно с ней работать, но это одна из тех вещей, которые кажутся «приятными», пока вы на самом деле не используете их. Я не могу представить себе попытки делать сборки без него сейчас. Вы можете использовать assemble-less , он поддерживает подстановку (я один из его сопровождающих...)

Кстати , @josephspens вчера я создал этот проект для преобразования SASS в LESS. В качестве доказательства концепции я преобразовал файлы .scss из bootstrap-sass и Foundation в LESS, оба примера находятся в папке ./test/ . Я был действительно удивлен тем, насколько близко я подошел к преобразованию всех файлов Bootstrap .scss обратно в LESS. Попробуйте сделать разницу между преобразованными файлами sass и «родными» файлами без начальной загрузки (v2.3.1) — это неполная функция, но это экономит много времени.

Если вам в конечном итоге придется использовать LESS в проекте, возможно, стоит проверить это. Для некоторых языковых функций нетрудно обратить процесс преобразования LESS в SASS.

@lukeapage , вы упомянули здесь https://github.com/cloudhead/less.js/issues/1181#issuecomment -13546979, что это будет полезно только для миксинов, и это было правдой в то время.

Однако теперь, когда у нас есть <strong i="8">@import</strong> (reference) , эта функция будет полезна для каждой таблицы стилей, на которую можно ссылаться.

Также я подумал о концепции index.less и создал для нее запрос: https://github.com/cloudhead/less.js/issues/1339. Но я не думаю, что эти функции являются взаимоисключающими или даже обязательно связанными. Подстановка позволяет включать и исключать шаблоны, поэтому у вас есть большой контроль над шаблонами подстановки в самом операторе импорта.

Я думаю, что функция index.less решит совершенно другую задачу, которая больше похожа на определение зависимостей — действительно полезно для модулей, компонентов, тем и т. д.

@jonschlinkert Я согласен

@lukeapage , не могли бы вы подсказать, какие места в коде необходимо изменить (помимо дерева/импорта/.js?), или посоветовать, что мне нужно учитывать, например, должно ли это быть специфичным для узла и т. д. ? Я мог бы попробовать.

Это было бы отличной функцией. В настоящее время у меня есть большой длинный список таблиц стилей в моем файле bundle.less :

<strong i="7">@import</strong> 'pages/home';
<strong i="8">@import</strong> 'pages/login';
<strong i="9">@import</strong> 'pages/404';
//etc

Было бы полезно сжать это в:

<strong i="13">@import</strong> 'pages/*';

или похожие.

Стилус позволяет вам сделать это -- <strong i="5">@import</strong> 'partials/*.styl -- и я использовал его все время. Было бы очень интересно иметь это и в Less, чтобы избавить меня от утомительной задачи ручного учета импорта.

Это + явный импорт + отсутствие дубликатов было бы очень удобно:

// Import specific file
<strong i="6">@import</strong> "extras/specific.less"
// Import all others, specific file is skipped in this glob
<strong i="7">@import</strong> "extras/*.less"

@lukeapage Я хотел бы сделать для этого плагин, не могли бы вы подсказать, с чего начать? Спасибо

Прости, Джон, что я пропустил твой первый запрос о помощи, это было непреднамеренно.
Я думаю, нам лучше поместить его в ядро ​​(потому что плагин захочет
переопределить стандартный доступ к файлу узла - и вы можете наследовать и реализовать
но это не позволяет другому плагину строиться поверх него, если только они не
очень осторожно), в любом случае я бы добавил поддержку ядра для импорта
несколько файлов из одного импорта. Сегодня это возможно, новый плагин Bower
делает это, но это немного взломано. Будем на связи.

Ха, я не знал, что уже прокомментировал, так что нас двое, лол. не беспокойтесь вообще я знаю, как это.

может быть лучше положить его в ядро

Звучит неплохо. Я был бы рад помочь с этим тоже. Не беспокойтесь в любом случае.

Хорошо, подумал, и вот как бы я это сделал.

1. Добавьте expandToFilelist в абстрактный файловый менеджер. По умолчанию должно
   вернуть массив, содержащий заданное имя файла. Не уверен, что это должно
   быть синхронным или асинхронным - вероятно, не имеет значения - сделать его асинхронным?
2. В диспетчере импорта вызовите эту функцию, если у вас есть файловый менеджер. потом
   перебрать все файлы и сделать на каждом то, что вы делали на 1.
3. Я бы попросил диспетчера импорта подождать, пока он не получит результаты из всех файлов.
   перед обратным вызовом обратного вызова (который находится в посетителе импорта) таким образом
   мы можем поддерживать последовательный заказ. Обратный вызов теперь займет
   массив, содержащий все аргументы (например, полное имя файла должно быть получено один раз
   за файл).
4. Могут возникнуть сложности при импорте посетителя в контексте, а не
   Конечно
5. Импорт теперь будет принимать массив корней (или, может быть, массив корней
   и имена файлов). Ему нужно будет оценить все корни в своей функции eval и
   вернуть комбинированный корень.. или, возможно, создать новые наборы правил, используя массив
   evald корни, если это работает
6. Скомпилируйте и протестируйте - все должно работать
7. Измените файловый менеджер узла для реализации expandToFilelist, если имя файла
   содержит *
8. Добавьте тесты и добавьте тесты в исключения в разделе Jasmine
   gruntfile, так как мы не можем реализовать для браузера
   Вуаля!

Просто хотел прокомментировать, в качестве обходного пути вы можете использовать gulp с gulp-concat , если вы используете gulp в качестве инструмента сборки.

gulp.src([
    'src/styles/main.less'
    ,'src/controls/**/*.less`
])
.pipe(concat('bundle.less')
.pipe(less())
...

Это фактически моя структура каталогов... (хотя моя структура немного отличается). Я надеялся, что это встроенная функция, так как даже если только узел, это было бы очень полезно.

Просто подумал, что я +1 здесь ... это довольно распространенный шаблон. Есть также несколько простых обходных путей, позволяющих избежать проблемы с порядком.

+1

Я этого не говорил, но я был бы признателен за вариант (даже если только на стороне сервера)...

о, ирония здесь (основная библиотека стала js, потому что одна и та же библиотека могла затем использоваться сервером и клиентом, только чтобы добавить функцию только для сервера).

Механизм синтаксического анализа может сохранять четность. Это по-прежнему огромное преимущество, которое не имеет ничего общего с тем, что мы обсуждаем.

+1

Как будто уже мало: +1

+1 серьезно

+1

:+1:

+1

+1

+1

+1

:+1: пожалуйста!

+1 Иисус был бы рад поддержке подстановочных знаков.

Привет, ребята, отзывы отличные, но +1 не сделают эту функцию быстрее. Он помечен как готовый к реализации, и когда кто-то его реализует, он будет реализован.

+1 Иисус был бы рад поддержке подстановочных знаков.

Я думаю, можно с уверенностью сказать, что если бы Иисус выбрал препроцессор, то это был бы Less.

Поскольку я больше не могу ждать решения этой проблемы, я пишу плагин, который это делает, и использую его для своих проектов. https://github.com/just-boris/less-plugin-glob
Меньше позволяют создавать собственные загрузчики файлов для @imports . Я создал этот, который разрешает импорт с помощью глобусов в пути импорта. Любая обратная связь будет оценена.

@just-boris Привет, мне было интересно, как я могу установить это, кроме как с помощью NPM,

Я получаю следующие ошибки при использовании NPM:

нпм ОШИБКА! 404 «less-glob-plugin» отсутствует в реестре npm.
нпм ОШИБКА! 404 Вы должны сообщить автору, чтобы опубликовать его
нпм ОШИБКА! 404
нпм ОШИБКА! 404 Обратите внимание, что вы также можете установить из
нпм ОШИБКА! 404 tarball, папка, URL-адрес http или URL-адрес git.

Заранее спасибо, это сэкономит много душевных страданий.

@tonyflp , извините, была опечатка, вы должны установить less-plugin-glob .
Less принимает только плагины, названные в нотации less-plugin-*

@just-boris Отлично сработало, спасибо за это.

Нет обновлений для этой функции?

просто-борис, я использую grunt-contrib-less, у них есть пример того, как загружать плагины следующим образом:

плагины: [
новый (require('less-plugin-autoprefix'))({браузеры: ["последние 2 версии"]}),
новый (требуется ('less-plugin-clean-css')) (cleanCssOptions)
],

Как мне загрузить сюда ваш чудесный плагин, чтобы он работал без ворчания?

Большой :+1: за функцию

@vospascal ответил в моем репо

;) спасибо @just-boris я видел :-) :+1:

Все еще жду эту функцию :+1: . Спасибо, @just-boris.

@just-boris thanks! В смысле, спасибо :-)

Это было бы очень полезно для меня, так как я предпочитаю собирать все свои компоненты в одном месте, а не хранить все файлы Less в одном месте. Это приводит к тому, что файлы Less существуют повсюду, что было бы кошмаром для ведения списка импорта вручную.

Для тех, кто использует Gulp для создания своих файлов Less, я добился успеха с помощью плагина gulp-inject для автоматического создания операторов @import в моем основном файле Less. Я кратко описал это здесь: http://www.michaelbromley.co.uk/blog/425/automatic-import-of-lesssass-files-with-gulp .

Для меньшего количества вы можете просто запустить это в своем проекте,

npm install less-plugin-glob --save-dev

затем добавьте это в свой Gruntfile в группе опций вашей задачи less

plugins: [require('less-plugin-glob')]

Результат примерно такой:

···
options: {
    compress: true,
    yuicompress: true,
    optimization: 2,
    cleancss: true,
    sourceMap: false,
    sourceMapFilename: 'css/maps/style.css.map',
    plugins: [require('less-plugin-glob')]
},
···

Теперь в вашем файле .less вы можете написать следующее:

···
<strong i="15">@import</strong> "commons/**/*";
<strong i="16">@import</strong> "basic/**/*";
···

Пришел сюда, задаваясь вопросом, поддерживается ли импорт glob, но поскольку я использую пару однострочных сценариев оболочки вместо grunt/gulp для моего процесса сборки. В итоге я просто использовал find и cat , и мой источник остается чище, чем любая из альтернатив. Меньше продолжает быть удивительным.

# src/index.less + src/foo/bar.less + ... = dist/index.css
find -X src -type f -name '*.less' | xargs cat | lessc - | cleancss --s0 >dist/index.css

+1

Очень удивлен, что этого еще не произошло. По крайней мере, в Gulp есть поддержка этой функции.

@davidcalhoun Прочитайте первый пост в этой теме.

То же самое, насколько мне известно, большинство людей компилируют свои файлы LESS в CSS, я не знаю многих сайтов, на которых браузер напрямую интерпретирует LESS? Для тех, кто хочет отладить, могут использовать исходные карты

@just-boris Я не могу заставить ваш плагин работать... Я предполагаю, что делаю что-то не так.

Кто-нибудь еще заставил его работать?

Не получаю никаких ошибок... просто нет вывода, когда я пытаюсь использовать подстановку.

gulp.task( 'styles', () => {
  return gulp.src( [ 'app/styles/main.less' ] )
    .pipe( $.less( {
      plugins: [ require( 'less-plugin-glob' ) ],
    } ) )
    .pipe( gulp.dest( 'dist/styles' ) );
} );

// main.less
// Each line below is tried on it's own of course.
<strong i="10">@import</strong> "app/module/waffle.less"; // Works
<strong i="11">@import</strong> "app/module/**"; // Does not work.
<strong i="12">@import</strong> "app/module/**/*"; // Does not work.
<strong i="13">@import</strong> "app/module/**/*.less"; // Does not work.

@SpencerCarstens Лучше поднять вопрос в собственном репозитории плагина.

@семь фаз-макс :+1:

Я надеялся охватить большую аудиторию, но вы правы.

@ Seven-Phases-Max Вы не можете интегрировать плагин glob внутрь less?

Он отлично интегрируется, но, похоже, ничего не делает.

Если я закомментирую плагин, мои менее корректные ошибки при импорте
шаровидный.

Когда я вставляю его обратно, ошибка исчезает.

Итак, я предполагаю, что он что-то делает.

В среду, 5 августа 2015 г., Маттиа Асторино, [email protected]
написал:

@SpencerCarstens https://github.com/SpencerCarstens Вы не можете интегрировать
глоб-плагин внутри меньше?

—
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/less/less.js/issues/1181#issuecomment-128262749 .

С уважением,

Спенсер Карстенс

@equinusio

Вы не можете интегрировать glob-плагин внутри less?

Если вы имеете в виду «почему бы не помещать это в ядро»… Тогда, ну, текущий подход Less (более или менее настроенный в нескольких обсуждениях в разных темах здесь) примерно таков: «никогда не помещайте функцию в ядро, _до_ того, как станет абсолютно и полностью очевидно, что фича принадлежит именно этому месту и других путей быть не может". То есть, если что-то можно реализовать в виде плагина, то оно _должно_ быть реализовано в виде плагина (поэтому, например, даже долгоживущая в ядре функция clean-css была перенесена из ядра в соответствующий плагин) .

@ семь фаз-макс хорошо, спасибо. Мне это нравится.

Закрытие реализовано в плагине @just-boris .

+1

+1

Разговор о воскрешении старых тем

На что должны указывать эти +1? Плагин не работает?

+1 означает, что вы тоже хотите или поддерживаете это

Поддержать что? Вот что я говорю. Это было решено, и вопрос закрыт. Итак, я спрашиваю, что ставится +1?

Я получаю эти электронные письма более 2 лет, в чем здесь дело ..