用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

但我无法像吞咽一样包含多个输入文件(我不知道是否可能)。当我尝试运行这种类型的命令时：

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将al 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/文件夹下)。

• 在我用postcss缩小bundle.css文件之后： 输出/bundle.css> out/bundle.min.css