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

Я установил 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

css postcss cssnano gulp-minify-css postcss-cli
person bobc82    schedule 06.02.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел решение в этом вопросе. Я использовал 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 из/bundle.css › из/bundle.min.css

person bobc82    schedule 07.02.2018