css - 使用 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/文件夹下)。

• 在我使用 postcss 缩小 bundle.css 文件之后:

  postcss 输出/bundle.css > 输出/bundle.min.css