使用PostCSS缩小多个输入文件

Question

我在以下步骤之后安装了cssnano：http：//cssnano.co/guides/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',
    }),
  ],
};

我只能缩小文件。在我执行的项目的ROOW中：

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将Al CSS文件串成一个捆绑包，如下所示：

• 我在项目root中创建了一个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/'));
});

• 在提示命令中，在我的项目的根部我运行：

  gulp默认

和bundle.css(在/文件夹下(。

• 我用PostCSS缩小bundle.css文件后：

  postcs out/bundle.css＆gt;out/bundle.min.css