csssassgruntjsgrunt-contrib-watchgrunt-contrib-sass

Sass - Complex folder structure with a lot of css files


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!


Solution

  • 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!!