1

我按照以下步骤安装了 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
4

1 回答 1

1

我在这个问题上找到了解决方案。我使用 gulp-concat-css 将 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 文件后：

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

于 2018-02-07T14:37:01.897 回答