Question

大家好，

我的项目中有很多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'
            }
          }
        },
    ...

谢谢！

Answer 1

您可以使用grunt.option将参数传递给Grunt任务。看一看。您可以使用以下语法将params传递给grunt：

$grunt [task] myparam=myvalue

然后，您可以从gruntfile（或子文件）中的任何位置执行此操作：

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

这样，您可以创建一个任务，只编译一个scss文件，例如在param中传递名称，或者即使param不存在，也可以编译所有。

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

         }
        }
      }
    },
...

Answer 2

经过一些研究后，我发现了一种可以这种方式使用的咕噜声：

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

这不是我想要做的事情，但它完美地优化了咕噜声过程。非常好的插件!!

Sass - 具有大量css文件的复杂文件夹结构

2 个答案: