Для этого примера мы воспользуемся Less. Чтобы сделать то же самое для Sass вы можете использовать пакет grunt-contrib-compass. Вот наши настройки для компиляции Less-файлов. Как и в примере с минимизацией JavaScrip в параметрах определяются исходные и выходные файлы.
// Gruntfile.js
grunt.initConfig({
...
// компиляция Less в CSS
less: {
build: {
files: {
'dist/css/pretty.css': 'src/css/pretty.less'
}
}
}
});
В данном примере мы не устанавливаем какие-либо параметры, просто компилируем файл src/css/pretty.less в dist/css/pretty.css.
Для начала добавим немного Less в наш исходный файл.
/* src/css/pretty.less */
@red : #CC594A;
@yellow : #B8CC24;
@blue : #8BC5FF;
@purple : #6F3596;
body {
background:@red;
color:@yellow;
}
button {
background:@blue;
}
div {
background:@purple;
}
Мы определили несколько переменных Less и применили их к элементам. Теперь запустим нашу задачу!
$ grunt less
Создаётся файл dist/css/pretty.css содержащий результат компиляции Less в CSS и теперь он выглядит как обычный стилевой документ.
/* dist/css/pretty.css */
body {
background: #cc594a;
color: #b8cc24;
}
button {
background: #8bc5ff;
}
div {
background: #6f3596;
}
Давайте взглянем ещё на пару вещей, которые мы можем сделать с помощью Grunt.