Sass - Complex folder structure with a lot of css files

Question

Hi everyone,

I have a lot of css files in my project with a very complex structure so I had to replicate the structure of the folders containing css files at the root of the project. So every time I save a scss file, grunt has to check each 160+ lines of config I gave him. Is there a way to optimize this this configuration? Maybe an option to tell contrib-sass to compile the scss file with the same structure he's in?

Here is a simplified example of my code :

   ...
       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'
            }
          }
        },
    ...

Thanks!

score 1 · Answer 1 · answered Feb 13 '15 at 11:17

You can pass parameters to your Grunt task using grunt.option. Take a look. You can pass params to grunt using this syntax:

$grunt [task] myparam=myvalue

Then, from any place in your gruntfile (or sub-files) you can do that:

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

With that, you can create a task for compile only one scss file passing the name in the param for example or even if the param doesn't exist compile all.

...
   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 {

         }
        }
      }
    },
...

Nice idea but I would like to make it more automatic. The only difference between src and dest is one folder : `'./common/ft/css/laptop.css': './scss/common/ft/css/laptop.scss'`. Is there a way to just replace the /scss when calling for the `dest`, maybe a function? I tried `dest: function(path) { return path.replace(/(\/scss)/,"") }`. Doesn't work... — goodguytrigu, Feb 13 '15 at 16:36

score 1 · Accepted Answer · answered Feb 13 '15 at 19:46

After some research I discovered grunt-newer which can be used this way:

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

It's not what I was trying to do exactly but It optimised perfectly the grunt process. Really nice plugin!!

Sass - Complex folder structure with a lot of css files

2 Answers2