Grunt Sass-多个CSS样式输出

Question

我已经做了相当多的搜索，但似乎无法给出完整的答案。

我正在使用grunt来管理我的sass流，并且一直在尝试找到一种从grunt输出多种CSS样式的方法。

例如：

base.scss应该有两个输出，第一个是style.css，它具有扩展的CSS样式。

第二个应该是style.min.css，它具有压缩的CSS样式。

如何配置我的gruntfile为我做这件事？

Answer 1

您可以通过两种配置来实现此目的，一种配置输出扩展的CSS，另一种压缩。然后注册您的任务以同时运行它们。您的grunt文件应如下所示：

例

module.exports = function(grunt) {
    'use strict';
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        // Sass
        sass: {
            dev: { // This outputs the expanded css file
                files: {
                    'style.css': 'base.scss'
                }
            },
            prod: { // This outputs the compressed css file
                options: {
                    outputStyle: 'compressed' // Minify output
                },
                files: {
                    'style.min.css': 'base.scss'
                }
            }
        }
    });

    grunt.registerTask('default', ['sass:dev', 'sass:prod']); // Task runs both
}