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 }

Answer 2

以下是gruntfile.js所属内容的更完整解决方案，改进了Colin Bacon已发布的内容。默认情况下，grunt的pkg已设置为在当前目录中读取package.json，因此无需编写。{1}}。你只需要安装jit-grunt插件（当然除了watch和sass插件）以使我的答案有效。

module.exports = function(grunt) {
require('jit-grunt')(grunt);

grunt.initConfig({
  sass: {
      expanded: {                         // Target
        options: {                       // Target options
          style: 'expanded'
        },
        files: {                         // Dictionary of files
          'style.css': 'style.scss'       // 'destination': 'source'
        }
      },
      compressed: {                         // Target
        options: {                       // Target options
          style: 'compressed'
        },
        files: {                         // Dictionary of files
          'style.min.css': 'style.scss'  // 'destination': 'source'
        }
      }
  },
  watch: {
    styles: {
      files: ['**/*.scss'], // which files to watch
      tasks: ['sass'],
      options: {
        spawn: false // speeds up watch reaction
      }
    }
  }
});

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

Answer 3

只需在样式文件夹中添加新的清单文件即可。例如，如果您创建main.scss并导入其中的某些文件，则通常为main2.scss。它将为您拥有的每个清单文件创建一个文件。

如果sass任务看起来像这样（默认的yeoman webapp生成器）..

sass: { options: { sourceMap: true, includePaths: ['bower_components'] }, dist: { files: [{ expand: true, cwd: '<%= config.app %>/styles', src: ['*.{scss,sass}'], dest: '.tmp/styles', ext: '.css' }] }, server: { files: [{ expand: true, cwd: '<%= config.app %>/styles', src: ['*.{scss,sass}'], dest: '.tmp/styles', ext: '.css' }] } }

文件部分sass读取所有.scss/.sass个文件并将其复制到.tmp/styles。稍后，copy任务会将这些内容移至dist/styles

Grunt Sass - 多种css风格输出

3 个答案: