Grunt Sass - 多CSS樣式輸出

Question

我已經做了一點搜索，但似乎無法拿出一個完整的答案。

我正在使用grunt來管理我的sass流程，我一直在試圖找到一種方法來從grunt輸出多個css樣式。

例如：

base.scss應該有兩個輸出第一感的style.css其具有擴大的CSS樣式。

第二個應該是style.min.css，它具有壓縮的css風格。

如何配置我的gruntfile來爲我做這件事？

Answer 1

您可以通過兩種配置，一種輸出擴展的CSS和另一種壓縮。然後註冊您的任務以同時運行。你的咕嚕文件應該是這個樣子：

例

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 
} 

Answer 2

只需在樣式文件夾中添加一個新的清單文件。例如，如果您創建main2.scss並在其中導入某些文件，則通常會有main.scss。它會爲每個清單文件創建一個文件。

如果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' }] } }

文件部分青菜讀取所有.scss/.sass文件，並複製那些.tmp/styles。後來，copy任務將這些移動到dist/styles

Answer 3

這裏是在gruntfile.js屬於什麼，在什麼科林·培根已經發布提高了更完整的解決方案。默認情況下，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']); 
};