0

我想让 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',
            }
        }
    }

但两者都没有奏效。解决方案是什么？

4

3 回答 3

1

看看我在我的项目中采用的方法，我可能对此大错特错，但我有类似的意图，即创建一个文件以提高可读性，另一个文件用于缩小目的。

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'}}
}

请注意，style我分别为两者选择了appStyles和和。此外，该版本采用新创建的文件而不是进一步创建.appStylesMinifiedexpandedcompressedcompressedapp.cssmain.scssapp.min.css

app.css当我仍处于开发模式时，我发现这在调试中也很有用。但是，当然，当一切都准备好生产时，app.min.css从那里拿走它。

于 2015-04-14T10:30:11.167 回答
0

为什么要压缩可以直接在 saas 文件中使用@import的 saas 文件，您的单曲将准备就绪，然后使用 compress。只需创建类似 main.scss 的内容并导入其中的所有 saas 文件，然后压缩此文件即可。

编辑：

grunt.initConfig({
  sass: {
    dist: {
      files: {
        'main.css': 'main.scss',
        'main1.css': 'main1.scss'
      }
    }
  }
});
于 2015-04-14T09:56:18.363 回答
0

我发现下面的代码工作得很好。我没有依靠 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 更易于阅读。

于 2015-04-14T10:14:35.480 回答