Sass

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 任务。看一看。您可以使用以下语法将参数传递给 grunt：

$grunt [task] myparam=myvalue

然后，从你的 gruntfile（或子文件）中的任何地方你可以这样做：

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 {

         }
        }
      }
    },
...

Answer 2

经过一些研究，我发现 grunt-newer 可以这样使用：

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

这不是我真正想要做的，但它完美地优化了 grunt 过程。非常不错的插件！！

Sass - 包含大量 css 个文件的复杂文件夹结构

Sass - Complex folder structure with a lot of css files

css

gruntjs

grunt-contrib-watch

grunt-contrib-sass