Javascript Grunt Sass-多个css样式输出

我已经做了相当多的搜索，但似乎无法找到一个完整的答案

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

例如：

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

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

---

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

只需在“样式”文件夹中添加一个新的清单文件。例如，如果创建

main2.scss

并在其中导入一些文件，则通常有

main.scss

。它将为您拥有的每个清单文件创建一个文件

如果您的

sass

任务看起来像这样（默认yeoman webapp generator）：

sass：{
选项：{
sourceMap:true，
includePaths:['bower_components']
},
地区：{
档案：[{
是的，
cwd:“/styles”，
src:['*.{scss，sass}']，
目标：'.tmp/styles'，
分机：'.css'
}]
},
服务器：{
档案：[{
是的，
cwd:“/styles”，
src:['*.{scss，sass}']，
目标：'.tmp/styles'，
分机：'.css'
}]
}
}

---

文件部分sass读取所有

.scss/.sass

文件，并将这些文件复制到

.tmp/styles

。稍后，

copy

任务将这些内容移动到

dist/styles

您可以通过两种配置来完成此操作，一种输出扩展的CSS，另一种输出压缩的CSS。然后注册您的任务以同时运行这两个任务。您的grunt文件应该如下所示：

示例

module.exports=函数（grunt）{
"严格使用",；
grunt.initConfig({
pkg:grunt.file.readJSON（'package.json'），
//无礼
sass：{
dev:{//这将输出扩展的css文件
档案：{
'style.css'：'base.scss'
}
},
prod:{//这将输出压缩的css文件
选项：{
outputStyle:'压缩'//缩小输出
},
档案：{
'style.min.css'：'base.scss'
}
}
}
});
registerTask（'default'，['sass:dev'，'sass:prod']）；//任务同时运行
}

这里是一个更完整的解决方案，它是属于

grunfile.js

的，改进了Colin Bacon已经发布的内容。默认情况下，grunt的

pkg

已在当前目录中设置为read

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']);
};

---

我来试一试，如果不创建一个新的.scss文件，没有办法吗？@Duncan使用grunt-sass，我不知道怎么做。效果很好，非常感谢这正是我想要的。@Duncan实际上你可以使用['sass'，grunt将自动启动'sass:dev'和'sass:prod'任务。

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']);
};