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.