javascript - 咕噜+萨斯: output 2 css files at the same time

Question

我想让 grunt 编译我的 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

看看我在项目中采用的方法，我可能是完全错误的，但我有类似的意图，即创建一个文件以提高可读性，并创建另一个文件以实现缩小化 em> 目的。

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'}}
}

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

我找到这个app.css当我仍处于开发模式时，在调试时也有点用处。但是当然，当一切都准备好生产时，app.min.css从那里获取它。