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

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

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

источник

2015-08-04 Peter

Используйте [grunt-contrib-concat] (https://github.com/gruntjs/grunt-contrib-concat). –

Хорошо, я полагаю, это возможно. Но 'grunt-contrib-concat' не понимает меньше' 'import_statements. Затем я в основном должен заменить файл 'app.less' файлом конфигурации' grunt-contrib-concat', который я старался избежать. – Peter

МЕНЬШЕ Docs говорит:

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

См: Import options и @import (inline)

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

concatenate.less

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

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

Вложенного импорт

Как @ семь-фаз-макс отметил, что гнездовый импорт будет проблема в этом случае.

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

Использование grunt-includes с includeRegexp возможностью создавать файлы, перечисленные в concatenate.less с уже импортированных LESS файлов в другую папку.
Изменение concatenate.less пути к этой папке.
Выполняйте задачу LESS для компиляции Grunt.

источник

2015-08-04 17:22:01

Ницца место. Я никогда не видел использование '(inline)' как это раньше (ну, у этого есть свои проблемы, не поддерживающие вложенный импорт, но все же очень аккуратный). –

Спасибо @ seven-phase-max! Да, вложенный импорт будет проблемой с этим. Надеюсь, @Peter не имеет вложенных импортов в этом случае. Но я постараюсь найти хорошее решение для гнездования. –

Спасибо, это работает! И, к счастью, у меня нет вложенных импортов. – Peter

в случае, если кто работает с глотком,

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

Меньше выходов concatenate.css filename, что вводит в заблуждение в нашем случае, , поэтому я использую 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; 
});

Пример конкатенации.%:

@import (inline) "general.less"; 
@import (inline) "typography.less";

источник

2016-03-05 18:17:34

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

ответ

Смежные вопросы