Сократить несколько входных файлов с помощью postcss

Question

Я установил cssnano, выполнив следующие действия: http://cssnano.co/guides/getting-started/

В корень моего проекта я запустил:

npm install cssnano --save-dev

После того, как я установил postcss-cli:

npm install postcss-cli --global

Наконец, я создал файл postcss.config.js, следуя инструкциям:

module.exports = {
   plugins: [
    require('cssnano')({
        preset: 'default',
    }),
  ],
};

Я был в состоянии минимизировать только файл. В роу моего проекта я выполнил:

postcss src/plugins/bootstrap/css/bootstrap.css > src/compiled.min.css

Но я не могу включить несколько входных файлов (и я не знаю, возможно ли это), как я сделал в gulp. Когда я пытаюсь запустить команду этого типа:

postcss src/plugins/bootstrap/css/bootstrap.css src/plugins/animatecss/css/animate.css > src/compiled.min.css

Произошла следующая ошибка:

Input Error: Must use --dir or --replace with multiple input files

Answer 1

Я нашел решение по этому вопросу. Я использовал gulp-concat-css для объединения всех файлов CSS в пакет следующим образом:

• Я создал файл Gulpfile.js в корне моего проекта и соединил файл с gulp-concat-css, как описано здесь:

https://www.npmjs.com/package/gulp-concat-css

var gulp = require('gulp');
var concatCss = require('gulp-concat-css');

gulp.task('default', function () {
  return gulp.src('cssfolder/*.css')
    .pipe(concatCss("bundle.css"))
    .pipe(gulp.dest('out/'));
});

• В командной строке в корне моего проекта я запустил:

  глоток по умолчанию

И был создан bundle.css (в папке out /).

• После того, как я уменьшил файл bundle.css с помощью postcss:

  postcss out / bundle.css> out / bundle.min.css