Grunt Sass -多个css样式输出

Grunt Sass - Multiple css style outputs

本文关键字：样式 输出 css 多个 Sass Grunt      更新时间：2023-09-26

我已经做了相当多的搜索，但似乎不能提出一个完整的答案。

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

例如:

基地。SCSS应该有两个输出，第一个是style. CSS，它具有扩展的CSS样式。

第二个应该是style.min.css，其中包含压缩后的css样式。

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

您可以通过两个配置来实现这一点，一个输出扩展CSS，另一个输出压缩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
}

这是一个更完整的解决方案属于gruntfile.js，改进了Colin Bacon已经发布的内容。默认情况下，grunt的pkg已经设置为读取当前目录中的package.json，所以不需要写它。你只需要安装jit-grunt插件(当然除了手表和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']);
};

在你的styles文件夹中添加一个新的manifest文件。例如，您通常有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'
    }]
  }
}

file section sass读取所有.scss/.sass文件并将其复制到.tmp/styles。之后，copy任务将这些移动到dist/styles。

相关文章：