Grunt Sass: изменить имя одной папки по пути назначения - PullRequest
Новая
       4

Grunt Sass: изменить имя одной папки по пути назначения

0 голосов
/ 23 мая 2018

Как сгенерировать файлы CSS в папке, отличной от той, что находится в источнике SCSS, но сохранив часть этого дерева?

Позвольте мне объяснить, у меня есть разные папки с несколькими источниками .scss: 

resources/client-1/scss/app.scss
resources/client-2/scss/app.scss

Я бы хотел, чтобы CSS генерировал это место в папке css, а не в scss.Итак: 

resources/client-1/css/app.scss
resources/client-2/css/app.scss

Но мне особенно хотелось бы иметь динамическую конфигурацию, потому что количество папок client-x со временем будет увеличиваться.

Есть идеи?Спасибо.

РЕДАКТИРОВАТЬ:

Моя конфигурация с использованием grunt-sass в настоящее время выглядит следующим образом: 

module.exports = {
  options: {
    outputStyle: 'nested',
    precision: 3, 
    sourceMap: true
  },
  main: {
    files: {
      'resources/clients-1/css/style.css': ['resources/clients-1/scss/style.scss' ],
      'resources/clients-2/css/style.css': [ 'resources/clients-2/scss/style.scss' ]
    }
  }
};

1 Ответ

0 голосов
/ 25 мая 2018

Вы можете динамически создавать объект файлов (вместо использования формата объектов файлов , который используется в настоящее время) и использовать переименовывать * 1006.* свойство для создания нового пути назначения для каждого результирующего .css файла.

Вместо этого вместо свойства files укажите следующее: 

files: [{
  expand: true,
  cwd: 'resources',
  src: ['**/*.scss'],
  dest: 'resources/', // <-- Value must match `cwd` value and 
                      //     include trailing forward slash.
  ext: '.css',
  rename: function(dest, src) {
    var parts = src.split('/');
    parts.splice(1, 1, 'css');

    return dest + parts.join('/');
  }
}]

Объяснение:

  1. В теле функции rename мы сначала разбиваем путь src на массив через строку, которая гласит: 

    var parts = src.split('/');

    В вашем примереисходный путь 'resources/clients-1/scss/style.scss', это приведет к массиву, назначенному переменной parts, например: 

    ['clients-1', 'scss', 'style.scss']

  2. Затем мы используем splice()в следующей строке: 

    parts.splice(1, 1, 'css');

    Заменяет значение с индексом 1 (т. е. 'scss') на заданное значение 'css'.Массив parts теперь приводит к следующему: 

    ['clients-1', 'css', 'style.scss']

  3. Наконец, через строку, которая гласит: 

    return dest + parts.join('/');

    Мы возвращаем из функции новую строкудля пути dest.Учитывая предыдущий пример, путь dest будет таким: 

    'resources/clients-1/css/style.css'

    Поскольку свойство ext имеет значение .css, grunt заменяет исходное имя расширения .scss на .css.

Примечание:

Если в папке resources есть подпапки, содержащие .scss файлов, которые вы не хотите сгенерировать файл .css, так как вам нужно будет отменить его, используя шаблон сглаживания .Например, предположим, что ваша директория resources выглядит следующим образом: 

.
├── resources
│   ├── clients-1
│   │   └── scss
│   │      └── style.scss
│   ├── clients-2
│   │   └── scss
│   │      └── style.scss
│   ├── foo
│   │   └── scss
│   │      └── style.scss
│   └── quux
│       └── scss
│          └── style.scss
└── ...

И, скажем, вам не нужны файлы .css, созданные для файлов .scss, которые существуют в папках foo и quux, (т.е. вы хотите обрабатывать только папки clients-1 и clients-2).

В такой ситуации вам необходимо изменить свойство src в приведенном выше примере кода на: 

src: ['{,!(foo|quux)/**/}*.scss'],
...