grunt + sass：同时输出2个css文件答案

【问题标题】：grunt + sass: output 2 css files at the same timegrunt + sass：同时输出2个css文件
【发布时间】：2015-04-14 20:50:24
【问题描述】：

我想让 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',
            }
        }
    }

但两者都没有奏效。解决办法是什么？

【问题讨论】：

您也可以使用其他 grunt 任务将您的样式压缩为 github.com/gruntjs/grunt-contrib-cssmin

标签： javascript gruntjs grunt-contrib-sass

【解决方案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'}}
}

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

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

【讨论】：

感谢@TahirAhmed，效果很好。我是 grunt 的新手，所以我没有意识到您可以自定义 appStyles 之类的声明（我假设它是自定义的，因为我在文档中没有找到它）。感谢您解决我的问题并同时教育我！
很高兴它有帮助。是的，声明 appStyles 和 appStylesMinified 是自定义的和可更改的。不客气。

【解决方案2】：

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

已编辑：

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

【讨论】：

嗨@Kushal，感谢您的回复。如果我可以澄清我的问题，我希望 sass 在运行 grunt 时一次输出两个 css 文件，一个可读的 css 文件和一个缩小的 css 文件。我已经在按照您的建议在我的主 scss 文件中使用导入。谢谢。

【解决方案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 更易于阅读。

【讨论】：