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

Take a look at the approach I take in my projects, I could be dead wrong about it but I have similar intention as to create one file for readability and other for minification purposes.

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 that I have chosen for both appStyles а также appStylesMinified являются expanded а также compressed соответственно. Так же compressed version takes the newly created app.css файл вместо main.scss to further create app.min.css,

Я нахожу это app.css a little useful in debugging as well when I am still in development mode. But of course, when everything is production ready, app.min.css takes it from there.

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

Почему вы хотите сжать файлы Saas, которые вы можете использовать напрямую @import в ваших файлах Saas и ваш сингл будет готов, а затем использовать сжатие. Просто создайте что-то вроде main.scss и импортируйте в него все файлы saas, а затем вместо этого сожмите этот файл.

Отредактировано:

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