最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Grunt Sass - Multiple css style outputs - Stack Overflow

programmeradmin2浏览0评论

I've done a fair bit of searching but can't seem to e 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.

For example:

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

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

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

I've done a fair bit of searching but can't seem to e 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.

For example:

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

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

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

Share Improve this question asked Aug 23, 2015 at 14:40 DuncanDuncan 2262 silver badges11 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 7

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

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 pressed css file
                options: {
                    outputStyle: 'pressed' // Minify output
                },
                files: {
                    'style.min.css': 'base.scss'
                }
            }
        }
    });

    grunt.registerTask('default', ['sass:dev', 'sass:prod']); // Task runs both
}

Here is a more plete 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.

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'
        }
      },
      pressed: {                         // Target
        options: {                       // Target options
          style: 'pressed'
        },
        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']);
};

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.

If your sass task looks something like this (default yeoman webapp generator):

sass: {
  options: {
    sourceMap: true,
    includePaths: ['bower_ponents']
    },
  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'
    }]
  }
}

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

发布评论

评论列表(0)

  1. 暂无评论