grunt + sass：同时输出2个CSS文件

Question

我想让咕comp编译我的Sass的压缩版和压缩版。 我可以编译一个或另一个，但不能同时编译。 我努力了：

sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                'style.min.css': 'css/main.scss',
            }
        }
    },

    sass: {
        dist: {
            options: {
                style: 'compact'
            },
            files: {
                'style.css': 'css/main.scss',
            }
        }
    }

并且：

sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                'style.min.css': 'css/main.scss',
            }
        },
        dist: {
            options: {
                style: 'compact'
            },
            files: {
                'style.css': 'css/main.scss',
            }
        }
    }

但两者都没有奏效。 有什么解决方案？

Answer 1

看一下我在项目中采用的方法，我对此可能会犯错，但我的意图与创建一个文件以提高可读性而创建另一个文件以达到缩小目的类似。

sass: {
  appStyles: {options: {style: 'expanded', sourcemap: 'none'}, files: {'styles/app.css': 'styles/app/main.scss'}},
  appStylesMinified: {options: {style: 'compressed', sourcemap: 'none'}, files: {'styles/app.min.css': 'styles/app.css'}}
}

请注意，我为appStyles和appStylesMinified选择的style分别被expanded和compressed 。 另外， compressed版本采用新创建的app.css文件而不是main.scss进一步创建app.min.css 。

当我仍处于开发模式时，我发现此app.css在调试中也很有用。 但是，当然，当一切准备就绪后， app.min.css便从那里开始。

Answer 2

为什么要压缩saas文件，您可以直接在saas文件中使用@import ，而您的单个文件将准备就绪，然后使用compress。 只需创建诸如main.scss之类的文件，然后导入其中的所有saas文件，然后压缩此文件即可。

编辑：

grunt.initConfig({
  sass: {
    dist: {
      files: {
        'main.css': 'main.scss',
        'main1.css': 'main1.scss'
      }
    }
  }
});

Answer 3

我发现以下代码可以正常工作。 我grunt-contrib-cssmin依靠sass来输出具有不同压缩率的多个文件，而是让sass输出了紧凑的样式，然后使用grunt-contrib-cssmin进一步压缩css。

module.exports = function(grunt) {

  grunt.initConfig({
    sass: {
      dist: {
        options: {
          style: 'compact'
        },
        files: {
          'style.css': 'css/main.scss',
          'style1.css': 'css/main1.scss',
        }
      }
    },
    cssmin: {
      dist: {
        files: {
          'style.min.css': ['style.css'],
          'style1.min.css': ['style1.css']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  grunt.registerTask('default', ['sass', 'cssmin']);

};

您甚至不需要紧凑选项。 这将使输出的CSS更易于阅读。