Sass — сложная структура папок с большим количеством css-файлов.

Привет всем,

У меня в проекте много css-файлов с очень сложной структурой, поэтому мне пришлось реплицировать структуру папок, содержащих css-файлы, в корне проекта. Поэтому каждый раз, когда я сохраняю файл scss, grunt должен проверять каждые 160+ строк конфигурации, которые я ему дал. Есть ли способ оптимизировать эту конфигурацию? Может быть, есть возможность указать contrib-sass скомпилировать файл scss с той же структурой, в которой он находится?

Вот упрощенный пример моего кода:

   ...
       sass: {
          dist: {
            options: {
              style: 'expanded',
              sourcemap: 'none',
              trace: true,
            },
            files: {
              './css/laptop.css': './scss/css/laptop.scss',
             ....
             ... (160 more lines)
             ....
              './css/player.css': './scss/css/player.scss'
            }
          }
        },
    ...

Спасибо!


css sass gruntjs grunt-contrib-watch grunt-contrib-sass
person goodguytrigu    schedule 12.02.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете передать параметры своей задаче Grunt, используя grunt.option. Взглянем. Вы можете передать параметры grunt, используя этот синтаксис:

$grunt [task] myparam=myvalue

Затем из любого места в файле grunt (или подфайлах) вы можете сделать это:

var myoption = grunt.option("myparam") || defaultvalue;

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

...
   var myoption = grunt.option("myparam") || defaultvalue;

   sass: {
      dist: {
        options: {
          style: 'expanded',
          sourcemap: 'none',
          trace: true,
        },
        files: {
         if ( myoption == defaultvalue ) {
           './css/laptop.css': './scss/css/laptop.scss',
           ....
           ... (160 more lines)
           ....
          './css/player.css': './scss/css/player.scss'
         } else {

         }
        }
      }
    },
...
person Alex R Chies    schedule 13.02.2015
comment
Хорошая идея, но я хотел бы сделать это более автоматическим. Единственная разница между src и dest — это одна папка: './common/ft/css/laptop.css': './scss/common/ft/css/laptop.scss'. Есть ли способ просто заменить /scss при вызове dest, может быть, функции? Я пробовал dest: function(path) { return path.replace(/(\/scss)/,"") }. Не работает... - person goodguytrigu; 13.02.2015

arrow_upward
1
arrow_downward

После некоторых исследований я обнаружил grunt-newer, который можно использовать следующим образом:

      css:{
        files: [
          './scss/**'
        ],
        tasks: ['newer:sass'],
        livereload: {
          options: { livereload: true },
          files: ['./**'],
        },
      }

Это не совсем то, что я пытался сделать, но это идеально оптимизировало процесс ворчания. Очень хороший плагин!!

person goodguytrigu    schedule 13.02.2015