Использование grunt-contrib-sass для компиляции в несколько мест назначения относительно их источников (рекурсивно)

У меня есть огромная база кодов таблиц стилей со многими файлами.scss в нескольких папках и подпапках, которые я хочу скомпилировать в файлы.css. Все идет нормально.

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

Исходные пути у меня есть:

  • src/project-1/scss/project-1.scss
  • src/project-2/subfolder/scss/project-2.scss

Пути назначения мне нужны:

  • src/project-1/css/project-1.css
  • src/project-2/subfolder/css/project-2.css

Моя основная задача заключается в следующем:

sass: {
    prod: {
        options: {
            style: 'expanded'
        },
        files: [{
            expand: true,
            cwd: 'src',
            src: ['**/*.scss'],
            dest: 'src',
            ext: '.css',
        }]
    }
}

Эта установка компилирует каждый файл.css в ту же папку, что и файлы.scss. Они нужны мне из папки "scss" и в папку "css" в той же родительской папке.

В поисках решения:

Я пробовал разные значения в dest поле без удачи.

Я пытался использовать grunt-contrib-copy и rename() функция:

copy: {
    target: {
        files: [{
            expand: true,
            cwd: 'src',
            src: ['**/*.css'],
            dest: 'src/',
            rename: function(dest, src) {
                return dest + src.replace(/\/scss\/$/, "/css/");
            }
        }]
    }
}

Последний "почти" работает. Я копирую файлы в их собственное место назначения и одновременно пытаюсь переименовать папку "scss" в "css", но функция замены, по-видимому, не учитывает имена папок в исходном пути, только имена файлов.

Я близок к обходному пути или я иду в тупик здесь?

РЕДАКТИРОВАТЬ: решение найдено

Я сделал небольшие изменения в rename функция, которая решила мою проблему:

sass: {
    prod: {
        options: {
            style: 'expanded'
        },
        files: [{
            expand: true,
            cwd: "src",
            src: ["**/*.scss"],
            dest: "src/",
            ext: ".css",
            rename: function (dest, src) {
                return dest + src.replace('scss', 'css'); // The target file is written to folder "css" instead of "scss" by renaming the folder
            }
        }]
    }
}

Это дает мне скомпилированный CSS в новой папке /css на том же уровне, что и папка source / scss.

Например:

src/project-1/scss/project-1.scss составлен в src/project-1/css/project-1.css,

Я тоже использую точно такой же files: [{...}] настройки для моего grunt-autoprefixer а также grunt-contrib-cssmin задач, и все это пишет в одну папку и файл.

0 ответов

Другие вопросы по тегам