在 Heroku 上部署 Sass 代码时如何处理 CSS 压缩？

1. 使用构建工具集成压缩功能
   • Gulp集成CSS压缩
     • 如果在本地开发中使用Gulp构建项目，可以通过安装gulp - cssnano插件来实现CSS压缩。首先在项目目录下使用npm install gulp - cssnano - -save - dev安装该插件。
     • 然后在gulpfile.js中配置任务。例如：

     const gulp = require('gulp');
     const sass = require('gulp - sass')(require('node - sass'));
     const cssnano = require('gulp - cssnano');
     
     gulp.task('sass', function () {
       return gulp.src('src/styles/*.scss')
     .pipe(sass())
     .pipe(cssnano())
     .pipe(gulp.dest('public/css'));
     });
     

     • 在将项目部署到Heroku时，这个构建任务会在Heroku环境中运行（假设已经正确配置了package.json中的脚本和Procfile等相关文件），从而在编译Sass并转换为CSS的同时进行压缩操作。
   • Webpack集成CSS压缩
     • 在Webpack项目中，可以使用optimize - css - assets - webpack - plugin插件来压缩CSS。首先安装该插件：npm install optimize - css - assets - webpack - plugin - -save - dev。
     • 在webpack.config.js中配置插件。例如：

     const OptimizeCSSAssetsPlugin = require('optimize - css - assets - webpack - plugin');
     const MiniCssExtractPlugin = require('mini - css - extract - plugin');
     
     module.exports = {
       module: {
         rules: [
           {
             test: /\.scss$/,
             use: [
               MiniCssExtractPlugin.loader,
               "css - loader",
               "sass - loader"
             ]
           }
         ]
       },
       plugins: [
         new MiniCssExtractPlugin({
           filename: "styles.css"
         }),
         new OptimizeCSSAssetsPlugin({})
       ]
     };
     

     • 这样，在Webpack构建过程中（包括在Heroku环境下的构建），CSS文件将被压缩。
2. 使用命令行工具进行压缩
   • PostCSS与Cssnano
     • 可以使用postcss结合cssnano来压缩CSS。首先安装postcss和cssnano：npm install postcss postcss - cli cssnano - -save - dev。
     • 在package.json的脚本中添加一个用于压缩CSS的脚本。例如：

     {
       "scripts": {
         "compress - css": "postcss public/css/*.css -o public/css/ - - use cssnano"
       }
     }
     

     • 在部署到Heroku时，可以在Procfile中的release阶段或者在predeploy脚本中调用这个compress - css脚本，确保在Sass编译为CSS之后进行压缩操作。例如，在Procfile中：

     release: npm run build:sass && npm run compress - css
     

     这里假设build:sass脚本是用于编译Sass文件的脚本。