Grunt заменяет все меньше файлов на css файлы

Я использую grunt для преобразования всех моих меньших файлов в файлы css, используя это:

less: {
  development: {
    files: {
      "css/*.css": "less/*.less"
    }
  }
}

Это работало на версии 0.3.0, но теперь, когда я обновился до версии 4.0, он больше не работает.

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

less: {
  development: {
    files: {
      "css/test.css": "less/*.less"
    }
  }
}

Любая идея?

Ответ 1

Это не ошибка. Grunt больше не поддерживает globbing в dest с использованием этой конфигурации. Однако вы можете использовать формат файлов массивов, например:

files: [
  {
    expand: true,
    cwd: 'src',
    src: ['*.less'],
    dest: 'assets/css/',
    ext: '.css'
  }
]

Кроме того, если вы используете такую библиотеку, как Bootstrap, и хотите создать каждый LESS файл (компонент) в отдельный отдельный CSS файл, выполнить его "из коробки" очень непросто. Причина в том, что каждый LESS файл должен иметь свои собственные операторы @import для variables.less и mixins.less (и еще несколько таких, как forms.less и navbar.less, поскольку они указаны в других файлах).

Чтобы сделать это очень просто, попробуйте плагин Grunt, assemble-less (отказ от ответственности: я являюсь одним из разработчиков проекта, и я также в основной команде для less.js). без сбоев - это вилка Tyler Kellen, но она добавляет некоторые экспериментальные функции, которые помогут вам в том, что вам нужно (если вы хотите стабильности, пожалуйста, придерживайтесь grunt-contrib-less). Например:

// Project configuration.
grunt.initConfig({

  less: {
    // Compile all targeted LESS files individually
    components: {
      options: {
        imports: {
          // Use the new "reference" directive, e.g.
          // @import (reference) "variables.less";
          reference: [
            "bootstrap/mixins.less", 
            "bootstrap/variables.less" 
          ]
        }
      },
      files: [
        {
          expand: true,
          cwd: 'bootstrap/less',
          // Compile each LESS component excluding "bootstrap.less", 
          // "mixins.less" and "variables.less" 
          src: ['*.less', '!{boot,var,mix}*.less'],
          dest: 'assets/css/',
          ext: '.css'
        }
      ]
    }
  }
  ...
}

Функция imports существенно добавляет указанные операторы @import к исходным файлам. Опция reference позволяет вам "ссылаться" на другие файлы меньшего размера, в то время как выдает только стили, которые специально указаны через mixins или :extend. Возможно, вам понадобится ссылаться на несколько файлов, чем показано здесь, поскольку стили перекрестных ссылок Bootstrap из других компонентов, таких как forms.less, buttons.less и т.д. (См. Gruntfile в сборке без примеров)

Итак, после запуска задачи assemble-less с конфигурацией в примере выше, папка assets/css имела бы:

alerts.css
badges.css
breadcrumbs.css
button-groups.css
buttons.css
carousel.css
close.css
code.css
component-animations.css
dropdowns.css
forms.css
glyphicons.css
grid.css
input-groups.css
jumbotron.css
labels.css
list-group.css
media.css
modals.css
navbar.css
navs.css
normalize.css
pager.css
pagination.css
panels.css
popovers.css
print.css
progress-bars.css
responsive-utilities.css
scaffolding.css
tables.css
theme.css
thumbnails.css
tooltip.css
type.css
utilities.css
wells.css

Существуют и другие функции, которые должны помочь вам в этом, но функция imports является супер мощной, поскольку она позволяет добавлять директивы непосредственно в файл Grunt.