Grunt Sass - 多个CSS样式输出

Question

我已经进行了相当多的搜索，但似乎找不到这个问题的完整答案。

我正在使用grunt来管理我的sass流程，一直在尝试找到一种输出多个css样式的方法。例如：

base.scss应该有两个输出，第一个是style.css，其中包含扩展的CSS样式。第二个应该是style.min.css，其中包含压缩的CSS样式。我该如何配置我的gruntfile来实现这一点？

- Duncan

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
}

- Colin Bacon

---

非常感谢，这正是我所需要的，运行得非常完美。 - Duncan

@Duncan 实际上你只需要使用 ['sass']，grunt 就会自动启动 'sass:dev' 和 'sass:prod' 两个任务。 - Justin

Answer 2

以下是关于 gruntfile.js 的更完整的解决方案，对 Colin Bacon 已经发布的内容进行了改进。默认情况下，grunt 的 pkg 已经设置为读取当前目录中的 package.json，因此不需要编写该部分内容。您只需要安装 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']);
};

- Justin

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。

- Orlando

---

我会试一下，难道没有不创建新的 .scss 文件的方法吗？ - Duncan

@Duncan，使用grunt-sass，我不知道有什么方法可以做到这一点。 - Orlando