Как объединить (а не компилировать) несколько файлов less в один с помощью grunt

У меня возникли проблемы с поиском решения этой проблемы. У меня есть файл меньшего размера app.less, который состоит только из @import операторов. Теперь я хочу сгенерировать один файл меньшего размера, который включает все импортированные файлы меньшего размера, потому что я хочу отправить его клиенту, чтобы он скомпилировал его там (да, у меня есть на то причины).

Таким образом, файл less не должен компилироваться на этапе сборки grunt, а только конкатенироваться, чтобы клиенту не приходилось загружать несколько меньше файлов. Я чувствую, что это вариант использования, который должен был появиться и у других при компиляции на клиенте, но я не смог найти ни одного решения. Меня не волнует, произойдет ли конкатенация с помощью grunt-contrib-less или любого другого инструмента.


less gruntjs grunt-contrib-less
person Peter    schedule 04.08.2015    source источник
comment
Используйте grunt-contrib-concat.   -  person Rene Korss    schedule 04.08.2015
comment
Хорошо, я полагаю, что это возможно. Но grunt-contrib-concat не понимает менее @importутверждений. Затем мне в основном нужно заменить файл app.less файлом конфигурации grunt-contrib-concat, чего я хотел избежать.   -  person Peter    schedule 04.08.2015

Ответы (2)


arrow_upward
7
arrow_downward

МЕНЬШЕ документы говорят:

Используйте @import (встроенный) для включения внешних файлов, но не для их обработки.

См.: Импорт At-правил и @import (встроенный)

Вы можете создать новый файл, например concatenate.less, и импортировать .less файлов с ключевым словом inline. Затем, если вы его обработаете, он будет работать точно так же, как конкатенация, из него не обрабатывается CSS.

объединить.less

@import (inline) "file1.less"
@import (inline) "file2.less"
@import (inline) "file3.less"

И используйте свою задачу Grunt, как раньше, просто переименуйте расширение выходного файла в .less для ясности. Протестировано, должно дать вам именно то, что вы хотели.

Вложенный импорт

Как отметил @seven-phases-max, в этом случае вложенный импорт будет проблемой.

Решением будет grunt-includes.

  • Используйте grunt-includes с опцией includeRegexp для создания файлов, перечисленных в concatenate.less, с уже импортированными файлами LESS в другую папку.
  • Измените пути concatenate.less файлов к этой папке.
  • Запустите задачу компиляции LESS Grunt в обычном режиме.
person Rene Korss    schedule 04.08.2015
comment
Хорошее место. Я никогда раньше не видел такого использования (inline) (ну, у этого есть свои проблемы, связанные с отсутствием поддержки вложенного импорта, но все же очень аккуратно). - person seven-phases-max; 04.08.2015
comment
Спасибо @seven-phases-max! Да, вложенный импорт будет проблемой. Надеюсь, в этом случае у @Peter нет вложенного импорта. Но я постараюсь найти какое-нибудь хорошее решение для вложенности. - person Rene Korss; 05.08.2015
comment
Спасибо, это действительно работает! И, к счастью, у меня нет вложенного импорта. - person Peter; 05.08.2015
comment
На самом деле я только что понял, в чем недостаток этого: поскольку импортированные файлы не обрабатываются, все комментарии остаются в объединенном файле less, что делает его как минимум на 20% длиннее, чем нужно. Теперь я использую grunt-stripcomments для удаления комментариев. - person Peter; 05.08.2015
comment
Да, комментарии не удаляются. Он просто объединит файлы .less, как вы впервые спросили. Но красивое решение. - person Rene Korss; 05.08.2015

arrow_upward
4
arrow_downward

если кто-то работает с gulp,

вы можете просто создать concatenate.less, как предложил @Rene Korss, и использовать ту же команду, что и для компиляции less.

Less выводит имя файла concatenate.css, что в нашем случае вводит в заблуждение, поэтому я использую gulp-rename чтобы имя файла было названо так, как я хочу.

var src = 'path-to-concatenate-less-file';
var destination = 'path-to-destination';
gulp.task('concatenate-styles', function () {
    var compile= gulp.src(src)
    .pipe(less())
    .pipe(rename('concatenate-all.less'))
    .pipe(gulp.dest(destination))
    .pipe(notify("Saved file: <%= file.relative %>!"));
    compile.on('error', console.error.bind(console));
    return compile;
});

Пример concatenate.less:

@import (inline) "general.less";
@import (inline) "typography.less";
person Angel M.    schedule 05.03.2016