Как автоматически компилировать LESS в читабельный CSS?

Question

[KennySP]

Приветствую.
Пользуюсь sublime text 2, установил плагин less2css. Также устанавливал LESS через node.js (не сильно в этом разбираюсь).
Так вот, когда я пишу в редакторе код LESS, после каждого сохранения, он автоматически компилируется в одноименный CSS файл. Но проблема в том, что CSS на выходе получается в одну строчку. Можно ли сделать так, чтобы он получался читабельным?
К примеру:
header {font-size: 1.5em; color: #000;}
или
header {
font-size: 1.5em;
color: #000;
}
Заранее благодарю за ответы)

[update]
Хех, а решение было таким простым) prntscr.com/54k6az
В настройках плагина можно переключать.

Но системы сборки буду учить в любом случае, спасибо за советы)

Answer 1

[Сергей Протько]

В настройках less есть параметры оптимизаций. Я рекомендую вам все же использовать nodejs + gulp для сборки и инкрементной сборки во время разработки, просто потому что там точно можно все настроить как вам того нужно. А еще есть сорсмэпы.

Answer 2

[Андрей Хохлов]

Используйте Grunt или Gulp.

Я Grunt использую: один таск компилит less в css (читабельный), другой - минифицирует css

Comments

[KennySP]

Хорошо, попробую, спасибо. Правда у меня небольшой опыт веб разработки и я немного боюсь командной строки. И если на то пошло, то какая сборка все-таки лучше? Слышал мнение что Gulp быстрее

[Сергей Протько]

А использовали бы gulp было бы так:

gulp.task('styles', function () {
    return gulp.src('src/styles/app.less')
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(sourcemaps.write())
        .pipe(gulp.dist('dist/styles/')
    ;
});
<?code>

[Сергей Протько]

KennySP: gulp быстрее за счет того что все происходит в памяти и нету промежуточных файлов. Меня это дико бесило в гранте.

Answer 3

[zooks]

Рекомендую генерировать карту map для css. Она покажет в браузере все переносы и отбивки и не увеличит размер самого файла.

Answer 4

[Фади Хадж]

Используйте Brackets.