Grunt Sass - 多种 css 样式输出答案

【问题标题】：Grunt Sass - Multiple css style outputsGrunt Sass - 多种 css 样式输出
【发布时间】：2015-11-17 00:33:37
【问题描述】：

我进行了相当多的搜索，但似乎无法找到完整的答案。

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

例如：

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

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

如何配置我的 gruntfile 来为我执行此操作？

【问题讨论】：

标签： javascript css sass

【解决方案1】：

只需在您的样式文件夹中添加一个新的清单文件。例如，您通常拥有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。

【讨论】：

我试一试，不创建新的 .scss 文件就没有办法了吗？
@Duncan 使用 grunt-sass，我不知道怎么做。

【解决方案2】：

您可以通过两种配置来做到这一点，一种是输出扩展的 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
}

【讨论】：

工作完美，非常感谢，这正是我想要的。
@Duncan 实际上你可以使用 ['sass'] 并且 grunt 会自动启动 'sass:dev' 和 'sass:prod' 任务。

【解决方案3】：

这里是属于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']);
};

【讨论】：