咕噜声+咕噜声:同时输出2个CSS文件

Question

我想让咕噜咕噜编译一个压缩和压缩版本的我的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文件，@import在你的SaaS文件中，你的单曲将准备就绪，然后使用压缩。只需创建类似main.scss的东西并导入其中的所有Saas文件，然后压缩此fle。

编辑：

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

Answer 3

我

发现以下代码工作正常。我不依赖 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 更易于阅读。