grunt + sass: 同时输出2个css个文件

Question

我想让 grunt 编译我的 sass 的紧凑和压缩版本。我可以让它编译一个或另一个，但不能同时编译两者。我试过：

sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                'style.min.css': 'css/main.scss',
            }
        }
    },

    sass: {
        dist: {
            options: {
                style: 'compact'
            },
            files: {
                'style.css': 'css/main.scss',
            }
        }
    }

还有：

sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                'style.min.css': 'css/main.scss',
            }
        },
        dist: {
            options: {
                style: 'compact'
            },
            files: {
                'style.css': 'css/main.scss',
            }
        }
    }

但都没有用。有什么解决办法？

Answer 1

为什么要压缩saas文件你可以直接在你的saas文件中使用@import，你的单曲就准备好了，然后使用压缩。只需创建 main.scss 之类的东西并导入其中的所有 saas 文件，然后压缩此文件即可。

已编辑：

grunt.initConfig({
  sass: {
    dist: {
      files: {
        'main.css': 'main.scss',
        'main1.css': 'main1.scss'
      }
    }
  }
});

Answer 2

我发现下面的代码工作得很好。我没有依赖 sass 以不同的压缩方式输出多个文件，而是 sass 输出紧凑样式，然后使用 grunt-contrib-cssmin 进一步压缩 css。

module.exports = function(grunt) {

  grunt.initConfig({
    sass: {
      dist: {
        options: {
          style: 'compact'
        },
        files: {
          'style.css': 'css/main.scss',
          'style1.css': 'css/main1.scss',
        }
      }
    },
    cssmin: {
      dist: {
        files: {
          'style.min.css': ['style.css'],
          'style1.min.css': ['style1.css']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  grunt.registerTask('default', ['sass', 'cssmin']);

};

您甚至不需要压缩选项。这将使输出 css 更易于阅读。

Answer 3

看看我在项目中采用的方法，我可能完全错了，但我有类似的意图，即为 可读性 创建一个文件，为缩小目的。

sass: {
  appStyles: {options: {style: 'expanded', sourcemap: 'none'}, files: {'styles/app.css': 'styles/app/main.scss'}},
  appStylesMinified: {options: {style: 'compressed', sourcemap: 'none'}, files: {'styles/app.min.css': 'styles/app.css'}}
}

请注意，我为 appStyles 和 appStylesMinified 选择的 style 分别是 expanded 和 compressed。此外，compressed 版本使用新创建的 app.css 文件而不是 main.scss 来进一步创建 app.min.css.

我发现这个 app.css 在我仍处于开发模式时对调试也有一点用处。但是，当然，当一切准备就绪时，app.min.css 从那里开始。

grunt + sass: 同时输出2个css个文件

grunt + sass: output 2 css files at the same time

javascript

gruntjs

grunt-contrib-sass