Grunt Sass -多重css样式输出。

I've done a fair bit of searching but can't seem to come up with a full answer to this.

我已经做了一些搜索，但似乎无法给出一个完整的答案。

I'm using grunt to manage my sass flow and I've been trying to find a way to output multiple css styles from grunt.

我正在使用grunt来管理sass流，我一直在尝试从grunt中输出多个css样式。

For example:

例如:

base.scss should have two outputs the first being style.css which has the expanded css style.

基地。scss应该有两个输出，第一个是样式。具有扩展css样式的css。

The second should be style.min.css which has the compressed css style.

第二点应该是风格。具有压缩css样式的css。

How can I configure my gruntfile to do this for me?

我如何配置我的gruntfile为我做这个?

3 个解决方案

#1

You can do this by having two configurations, one outputting expanded CSS and the other compressed. Then register your task to run both. Your grunt file should look something like this:

您可以通过使用两个配置来实现这一点，一个输出展开的CSS，另一个压缩。然后注册您的任务以同时运行这两个任务。你的咕哝文件应该是这样的:

Example

例子

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
}

#2

Here is a more complete solution of what belongs in gruntfile.js, improving upon what Colin Bacon has already posted. By default grunt's pkg is already set to read package.json in the current directory, so no need to write that. You just need to install the jit-grunt plugin (besides the watch and sass plugins of course) to get my answer working.

这里有一个更完整的文件格式。js，在科林·培根的文章基础上改进。默认情况下，grunt的pkg已经被设置为读取包。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']);
};

#3

Just add a new manifest file in your styles folder. for example you have normally main.scss, if you create main2.scss and import some files in there. It will create a file for each manifest file you have.

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

If you sass task looks something like this (default yeoman webapp generator)..

如果你sass任务看起来像这样(默认约曼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:{选项:{sourceMap: true, includep: ['bower_components']}， dist:{文件:{扩展:true, cwd: <%= config。应用% > /风格”,src:[' *。{ scss,sass },桌子:。tmp /风格的ext:“。{files:[{展开:true, c:' <%= config。应用% > /风格”,src:[' *。{ scss,sass },桌子:。tmp /风格的ext:“。css ' }]} }

The file section sass read all .scss/.sass files and copy those to .tmp/styles. Later, copy task move those to dist/styles

文件部分sass读取所有.scss/。sass文件并复制到。tmp/styles。稍后，将任务复制到dist/styles

#1